AngularJS
कोणीय 2+ के लिए प्रवासन

परिचय

अपने AngularJS ऐप को एक कामचलाऊ-उन्मुख संरचना में परिवर्तित करना

नए कोणीय ढांचे में, घटक मुख्य निर्माण खंड हैं जो उपयोगकर्ता इंटरफ़ेस की रचना करते हैं। तो पहला कदम जो एक एंगुलरजेएस ऐप को नए एंगुलर में माइग्रेट करने में मदद करता है, वह है इसे अधिक घटक-उन्मुख संरचना में रिफ्लेक्टर करना।

1.5+ वर्जन से शुरू होने वाले पुराने AngularJS में कंपोनेंट्स भी पेश किए गए थे। AngularJS ऐप में कंपोनेंट्स का उपयोग करने से न केवल इसकी संरचना नए Angular 2+ के करीब हो जाएगी, बल्कि यह इसे अधिक मॉड्यूलर और बनाए रखने में आसान भी बना देगा।

आगे जाने से पहले मैं अवयवों के बारे में आधिकारिक AngularJS प्रलेखन पृष्ठ देखने की सलाह देता हूं, जहां उनके फायदे और उपयोग को अच्छी तरह से समझाया गया है।

मैं इसके बजाय पुराने ng-controller उन्मुख कोड को नए component उन्मुख शैली में बदलने के बारे में कुछ युक्तियों का उल्लेख करूंगा।

अपने ऐप को घटकों में तोड़ना शुरू करें

सभी घटक-उन्मुख ऐप्स में आमतौर पर एक या कुछ घटक होते हैं जिनमें अन्य उप-घटक शामिल होते हैं। तो पहले घटक को क्यों नहीं बनाया जा रहा है जिसमें बस आपका ऐप होगा (या इसका एक बड़ा टुकड़ा)।

मान लें कि हमारे पास एक नियंत्रक को निर्दिष्ट कोड का एक टुकड़ा है, जिसका नाम UserListController , और हम इसका एक घटक बनाना चाहते हैं, जिसे हम UserListComponent नाम देंगे।

वर्तमान HTML:

<div ng-controller="UserListController as listctrl">
    <ul>
        <li ng-repeat="user in myUserList">
            {{ user }}
        </li>
    </ul>
</div>

वर्तमान जावास्क्रिप्ट:

app.controller("UserListController", function($scope, SomeService) {

    $scope.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

नया HTML:

<user-list></user-list>

नया जावास्क्रिप्ट:

app.component("UserList", {
    templateUrl: 'user-list.html',
    controller: UserListController
});

function UserListController(SomeService) {

    this.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

ध्यान दें कि अब हम नियंत्रक फ़ंक्शन में $scope को कैसे इंजेक्ट कर रहे हैं और हम अब $scope बजाय this.myUserList घोषणा कर रहे हैं $scope.myUserList ;

नया टेम्प्लेट फ़ाइल user-list.component.html :

<ul>
    <li ng-repeat="user in $ctrl.myUserList">
        {{ user }}
    </li>
</ul>

ध्यान दें कि अब हम चर myUserList जिक्र कैसे कर रहे हैं, जो नियंत्रक से संबंधित है, html से $ctrl.myUserList का उपयोग करके $scope.myUserList . $scope.myUserList बजाय।

ऐसा इसलिए है क्योंकि जैसा कि आप शायद प्रलेखन को पढ़ने के बाद समझ गए हैं, खाका में $ctrl अब नियंत्रक फ़ंक्शन को संदर्भित करता है।

नियंत्रकों और मार्गों के बारे में क्या?

यदि आपका कंट्रोलर ng-controller बजाय राउटिंग सिस्टम का उपयोग करने के लिए बाध्य था, तो यदि आपके पास ऐसा कुछ है:

$stateProvider
  .state('users', {
    url: '/users',
    templateUrl: 'user-list.html',
    controller: 'UserListController'
  })
  // ..

आप अपनी राज्य घोषणा को बदल सकते हैं:

$stateProvider
    .state('users', {
      url: '/',
      template: '<user-list></user-list>'
    })
    // ..

आगे क्या होगा?

अब जब आपके पास एक घटक है, जिसमें आपका एप्लिकेशन (चाहे वह संपूर्ण एप्लिकेशन या उसका एक हिस्सा हो, जैसे कोई दृश्य), तो अब आपको अपने घटक को कई नेस्टेड घटकों में तोड़ना शुरू करना चाहिए, इसके नए उप-घटकों में भागों को लपेटकर , और इसी तरह।

आपको घटक सुविधाओं का उपयोग करना शुरू करना चाहिए

• इनपुट्स और आउटपुट बाइंडिंग

• जीवनचक्र के हुक जैसे $onInit() , $onChanges() , आदि ...

पढ़ने के बाद घटक दस्तावेज़ीकरण आप पहले से ही उन सभी घटक सुविधाओं का उपयोग करने के लिए कैसे पता होना चाहिए, लेकिन अगर आप एक असली सरल एप्लिकेशन का एक ठोस उदाहरण की जरूरत है, आप जाँच कर सकते हैं इस ।

इसके अलावा, यदि आपके घटक के नियंत्रक के अंदर आपके कुछ कार्य हैं जो बहुत सारे तर्क कोड रखते हैं, तो एक अच्छा विचार उस तर्क को सेवाओं में स्थानांतरित करने पर विचार कर सकता है।

निष्कर्ष

एक घटक-आधारित दृष्टिकोण अपनाने से यह आपके कोणीयजेएसएस को एक कदम के करीब धकेलता है जो इसे नए कोणीय ढांचे में स्थानांतरित करता है, लेकिन यह इसे बेहतर और बहुत अधिक मॉड्यूलर बनाता है।

निश्चित रूप से कई अन्य कदम हैं जो आप नए कोणीय 2+ दिशा में आगे जाने के लिए कर सकते हैं, जिसे मैं निम्नलिखित उदाहरणों में सूचीबद्ध करूंगा।

वेबपैक और ईएस 6 मॉड्यूल का परिचय

की तरह एक मॉड्यूल लोडर का उपयोग करके Webpack हम निर्मित में मॉड्यूल प्रणाली उपलब्ध फायदा हो सकता है ES6 (और साथ ही में टाइपप्रति)। फिर हम आयात और निर्यात सुविधाओं का उपयोग कर सकते हैं जो हमें यह निर्दिष्ट करने की अनुमति देती है कि हम आवेदन के विभिन्न भागों के बीच किस कोड के टुकड़े साझा करने जा रहे हैं।

जब हम अपने अनुप्रयोगों को उत्पादन में लेते हैं, तो मॉड्यूल लोडर भी उन सभी को बैटरी के साथ उत्पादन बंडल में पैकेज करना आसान बनाते हैं।