angularjs - यूआई-राउटर में कई दृश्यों के लिए आलसी लोड करें




uiview angular-ui-router state (2)

परिचय

जिस तरह से आप समाधान से संपर्क किया है, वह समस्या आपको सामना कर रही है, क्योंकि आपके पास एक ही राज्य के लिए बहुत सारे विचार हैं, यह उस राज्य को सेट करने के लिए सभी को लोड करने के लिए समाप्त होगा, इसलिए हर बार अपने राज्य तक पहुंचने के लिए, राय सेट करने के लिए ui-router को प्रत्येक टेम्पलेट लोड करना पड़ता है यह संभवतः कुछ संख्या में टेम्पलेट्स के लिए समस्या नहीं पैदा कर सकता है, लेकिन, आपके जैसे बड़ी संख्याओं के लिए यह निश्चित रूप से एक समस्या है

एनजी-टेम्पलेट्स

आप लोड हो जाने के समय को रोकने के लिए अपने <script type="text/ng-template"... में अपने <script type="text/ng-template"... का उपयोग करके कैश करने का प्रयास कर सकते हैं, जिस तरह से यह एक अच्छा अभ्यास है। आम तौर पर यह उत्पादन निर्माण अनुकूलन का हिस्सा होता है, टेम्प्लेट कैश में सभी टेम्पलेट लोड करता है, ताकि आवेदन लोड का समय काफी कम हो गया हो, बशर्ते आपको किसी पृष्ठ को लोड करने के लिए एक http कॉल की प्रतीक्षा करने की ज़रूरत नहीं है। यह वास्तव में आपके मामले में प्रदर्शन में वृद्धि करेगा, लेकिन मेरे पास कोई बेंचमार्क नहीं है जो यह सुनिश्चित करता है कि आपके परिदृश्य के लिए पर्याप्त होगा।

घटक आधारित समाधान

किसी भी तरह, आप इंटरफ़ेस घटकों को हमेशा जिस तरह से आप चाहते हैं, इस तरह से अनुकूलित करने के लिए इस तरह से अनुकूलित कर सकते हैं कि उपयोगकर्ता के लिए एक सिंगल पैनल दिखाने के लिए एक सौ टेम्प्लेट लोड करने की आवश्यकता नहीं है।

मेरा सुझाव है, ui-router का उपयोग करने के बजाय, एक घटक आधारित समाधान का उपयोग करें, प्रत्येक विंडो के पैनल सामग्री और उसके व्यवहार को पकड़ने के लिए एक निर्देशक घटक बनाएं; और खुले और बंद किए गए पैनलों की स्थिति का प्रबंधन करने के लिए एक नियंत्रक का उपयोग करें, एक सूची में प्रत्येक खोले पैनल को पकड़े और प्रबंधित करना और इसी तरह। उदाहरण के लिए:

<nav>
  <button ng-click="openPanel({title: 'My Panel Title', templateUrl: 'myPanel.html'>">
    Open myPanel
  </button>
<nav>
<main>
  <panel ng-repeat="panel in openedPanels"></panel>
</main>

निम्न स्निपेट बूटस्ट्रैप 4 सीएसएस का उपयोग करते हुए इस दृष्टिकोण को कार्यान्वित करता है, प्रत्येक पैनल एक बूटस्ट्रैप कार्ड है, और इसमें उन पैनलों की एक सूची होती है, जो इसे खोल सकते हैं और एक एनएवी सूची पर क्लिक करते हैं, यह संबंधित पैनल को खुले पैनल सूची में जोड़ता है, जहां कोणीयज इसे रेंडर कर सकता है ng-repeat का उपयोग करते हुए html पर इस तरह, केवल खुली हुई विंडो को गाया जाएगा, इसलिए, केवल खुले हुए विंडो टेम्पलेट को लोड किया जाएगा।

अस्वीकरण: यह एक बहुत आसान उदाहरण है, जो वहां उपलब्ध सर्वोत्तम प्रथाओं का उपयोग नहीं किया गया है। यदि आप इस दृष्टिकोण का उपयोग करने का इरादा रखते हैं, तो आपको अपने वास्तुकला की आवश्यकताओं को बेहतर बनाने के लिए अपने आवेदन के आधार पर इसे लागू करना चाहिए, यह एक पूर्ण कार्यात्मक घटक नहीं है, यह प्रदर्शन के लिए सिर्फ एक उदाहरण है

angular.module('app', [])
  .controller('PanelsCtrl', function($scope) {
  
    // available windows to be opened
    $scope.panels = [
      { title: 'Window 1', templateUrl: 'window1.html' },
      { title: 'Window 2', templateUrl: 'window2.html' }];
    
    // all currently opened panels
    $scope.openedPanels = [];
    
    // opens a panel (a.k.a, adds a panel
    //  to the opened panels list)
    $scope.openPanel = function(panel) {
      if ($scope.openedPanels.indexOf(panel) === -1)
        $scope.openedPanels.push(panel);
    };
    
    // close a panel (a.k.a, removes a panel
    //  from the opened panels list)
    $scope.onClosePanel = function(panel) {
      $scope.openedPanels.splice($scope.openedPanels.indexOf(panel), 1);
    };
  })
  .directive('window', function($templateRequest, $templateCache, $compile) {
    return {
      restrict: 'E',
      scope: {
        panel: '=',
        onClosePanel: '&'
      },
      template: `
        <div class="card">
          <h4 class="card-header">
            <span>{{ panel.title }}</span>
            <button
              ng-click="onClosePanel(panel)"
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </h4>
          <div class="card-body">
          	<ng-include src="panel.templateUrl"></ng-include>
          </div>
        </div>
      `
    }
  })
  // example controlelr to be used with ng-controller
  .controller('Window1Ctrl', function($scope) {
    $scope.window1Prop = 'This is a property from Window1Ctrl'
  })
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css'
<div ng-app="app">
  <div class="container" ng-controller="PanelsCtrl">
    <div class="row">
      <div class="col-sm-3">
        <ul class="nav flex-column">
          <li class="nav-item" ng-repeat="panel in panels">
            <a class="nav-link active" href="#" ng-click="openPanel(panel)">
            {{ panel.title }}
          </a>
          </li>
        </ul>
      </div>
      <div class="col-sm-9">
        <window ng-repeat="panel in openedPanels" panel="panel" on-close-panel="onClosePanel(panel)">
        </window>
      </div>
    </div>
  </div>
  
  <!-- NG-TEMPLATES -->
  
  <script type="text/ng-template" id="window1.html">
    <div ng-controller="Window1Ctrl">
      <b>{{panel.title}}</b>
      <h5>window1Prop: {{ window1Prop }}</p>
    </div>
  </script>
  <script type="text/ng-template" id="window2.html">
    <em>{{panel.title}}</em>
  </script>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>

कुछ महीने पहले मुझे विषय बनाया गया है: एक ही दृश्य (यू-राउटर) में दो टेम्पलेट्स प्रस्तुत करने की कोशिश करें , जहां मैंने एक ही पेज में एकाधिक दृश्य प्रस्तुत करने के बारे में पूछा। इस के साथ मेरा उद्देश्य एक वेब ऐप को एक डेस्कटॉप के रूप में बनाया गया था, इसे कम करने, अधिकतम करने, बंद करने और इस तरह सामान देने के लिए।

खैर, मेरा ऐप तैयार है, लेकिन मुझे समस्या आ रही है, जब मैं अपने ऐप को उत्पादन के लिए तैयार करता हूं, तो कुछ कंप्यूटर सभी दृश्यों को प्रस्तुत करने के लिए बहुत समय ले रहे हैं। छवि में हम एक बहुत कुछ अनुरोध कर सकते हैं जो सर्वर मेरे टेम्पलेट URL को वापस करने के लिए ले जाता है।

इस से बचने का एक तरीका है? मैं टेम्पलेट पर आलसी लोड की तलाश कर रहा था लेकिन मुझे कोई नहीं मिला :(

यह प्लंकर वह तरीका था जो मैंने इस्तेमाल किया था । मेरे सभी दृश्यों के लिए मेरे पास केवल एक राज्य है (मेरे वर्तमान app.config में 103 दृश्य हैं):

routerApp.config(function($stateProvider) {

  $stateProvider.state('mainState', {
    views: {
      'CompanyView': {
        templateUrl: 'Company.html'
      },
      'PeopleView': {
        templateUrl: 'People.html'
      },
     .....
     ....
    }
  })


});

एक तरीका है कि मैं अधिक शक्तिशाली देखता हूं और सभी मॉडलों में isDefault रखने से बचने के लिए एनजी-एट्रिब्यूट्स ng-model , ng-value और ng-checked

एनजी-मॉडल : आपके मॉडल के मान को बांधता है।

एनजी-वैल्यू : ng-model बाध्यकारी को पास करने के लिए मान।

एनजी-चेक : मूल्य या अभिव्यक्ति जिसका मूल्यांकन किया जाता है। रेडियो-बटन और चेक-बॉक्स के लिए उपयोगी।

उपयोग का उदाहरण: निम्नलिखित उदाहरण में, मेरे पास मेरा मॉडल और भाषाओं की एक सूची है जो मेरी साइट का समर्थन करता है। चुनिंदा भाषा के साथ मॉडल को समर्थित और अद्यतन करने वाली विभिन्न भाषाओं को प्रदर्शित करने के लिए हम इसे इस तरह से कर सकते हैं।

<!-- Radio -->
<div ng-repeat="language in languages">

  <div>
    <label>

      <input ng-model="site.lang"
             ng-value="language"
             ng-checked="(site.lang == language)"
             name="localizationOptions"
             type="radio">

      <span> {{language}} </span>

    </label>
  </div>

</div>
<!-- end of Radio -->

मूल्यांकन के दौरान अभिव्यक्ति (site.lang == language) सत्य होने पर हमारी मॉडल site.lang language प्राप्त करेगी। यह आपको सर्वर के साथ आसानी से सिंक करने की अनुमति देगा क्योंकि आपके मॉडल में पहले से ही बदलाव है।





angularjs uiview angular-ui-router state