AngularJS
टाइपस्क्रिप्ट के साथ AngularJS का उपयोग करना

वाक्य - विन्यास

• $ गुंजाइश: ng.IScope - यह एक विशेष चर के लिए प्रकार को परिभाषित करने के लिए टाइपस्क्रिप्ट में तरीका है।

टाइपस्क्रिप्ट में कोणीय नियंत्रक

जैसा कि AngularJS प्रलेखन में परिभाषित किया गया है

जब एक नियंत्रक एनजी-नियंत्रक निर्देश के माध्यम से DOM से जुड़ा होता है, तो कोणीय निर्दिष्ट नियंत्रक के निर्माण फ़ंक्शन का उपयोग करके एक नया नियंत्रक ऑब्जेक्ट को तुरंत हटा देगा। एक नया चाइल्ड स्कोप बनाया जाएगा और उसे कंट्रोलर के कंस्ट्रक्टर फंक्शन के लिए $ स्कोप के रूप में उपलब्ध कराया जाएगा।

टाइपस्क्रिप्ट कक्षाओं का उपयोग करके नियंत्रकों को बहुत आसानी से बनाया जा सकता है।

module App.Controllers {
    class Address {
        line1: string;
        line2: string;
        city: string;
        state: string;
    }
    export class SampleController {
        firstName: string;
        lastName: string;
        age: number;
        address: Address;
        setUpWatches($scope: ng.IScope): void {
            $scope.$watch(() => this.firstName, (n, o) => {
                //n is string and so is o
            });
        };
        constructor($scope: ng.IScope) {
            this.setUpWatches($scope);
        }
    }
}

परिणामी जावास्क्रिप्ट है

var App;
(function (App) {
    var Controllers;
    (function (Controllers) {
        var Address = (function () {
            function Address() {
            }
            return Address;
        }());
        var SampleController = (function () {
            function SampleController($scope) {
                this.setUpWatches($scope);
            }
            SampleController.prototype.setUpWatches = function ($scope) {
                var _this = this;
                $scope.$watch(function () { return _this.firstName; }, function (n, o) {
                    //n is string and so is o
                });
            };
            ;
            return SampleController;
        }());
        Controllers.SampleController = SampleController;
    })(Controllers = App.Controllers || (App.Controllers = {}));
})(App || (App = {}));
//# sourceMappingURL=ExampleController.js.map

नियंत्रक वर्ग बनाने के बाद कोणीय js मॉड्यूल को वर्ग के उपयोग से नियंत्रक के बारे में सरल किया जा सकता है

app
 .module('app')
 .controller('exampleController', App.Controller.SampleController)

नियंत्रक के साथ नियंत्रक का उपयोग करना सिंटैक्स

हमने जो कंट्रोलर बनाया है उसे इंस्टेंट किया जा सकता है और सिंटैक्स के controller as का उपयोग किया जा सकता है। ऐसा इसलिए है क्योंकि हमने चर को सीधे नियंत्रक वर्ग पर रखा है न कि $scope ।

controller as someName का उपयोग करते हुए controller as someName को $scope ही कंट्रोलर को अलग करना है। $scope , कंट्रोलर में निर्भरता के रूप में $ स्कोप को इंजेक्ट करने की कोई आवश्यकता नहीं है।

पारंपरिक तरीका :

// we are using $scope object.
app.controller('MyCtrl', function ($scope) {
  $scope.name = 'John';
});

<div ng-controller="MyCtrl">
  {{name}}
</div>

अब, सिंटैक्स के controller as साथ :

// we are using the "this" Object instead of "$scope"
app.controller('MyCtrl', function() {
  this.name = 'John';
});

<div ng-controller="MyCtrl as info">
  {{info.name}}
</div>

यदि आप जावास्क्रिप्ट में "क्लास" को तुरंत करते हैं, तो आप ऐसा कर सकते हैं:

var jsClass = function () {
  this.name = 'John';
}
var jsObj = new jsClass();

तो, अब हम किसी भी विधि या jsClass संपत्ति तक पहुँचने के लिए jsObj उदाहरण का उपयोग कर सकते हैं।

कोणीय में, हम एक ही प्रकार के काम करते हैं। हम इंस्टेंटेशन के लिए सिंटैक्स के रूप में नियंत्रक का उपयोग करते हैं।

बंडलिंग / न्यूनतम उपयोग करना

नियंत्रक के निर्माण कार्यों में जिस तरह से $ गुंजाइश को इंजेक्ट किया जाता है वह कोणीय निर्भरता इंजेक्शन के मूल विकल्प को प्रदर्शित करने और उपयोग करने का एक तरीका है, लेकिन उत्पादन तैयार नहीं है क्योंकि इसे छोटा नहीं किया जा सकता है। थिअर्स क्योंकि माइनिफिकेशन सिस्टम परिवर्तनशील नामों को बदलता है और एंगर की निर्भरता इंजेक्शन पैरामीटर नामों का उपयोग करता है यह जानने के लिए कि क्या इंजेक्ट किया जाना है। तो उदाहरण के लिए ExampleController का निर्माता फ़ंक्शन निम्न कोड के लिए छोटा है।

function n(n){this.setUpWatches(n)

और $scope को n बदल दिया गया है!
इसे दूर करने के लिए हम एक $ इंजेक्शन सरणी ( string[] ) जोड़ सकते हैं। ताकि कोणीय का DI जानता है कि कंट्रोलर्स कंस्ट्रक्टर फ़ंक्शन को किस स्थिति में इंजेक्ट करना है।
इसलिए उपरोक्त टाइपस्क्रिप्ट में परिवर्तन होता है

module App.Controllers {
    class Address {
        line1: string;
        line2: string;
        city: string;
        state: string;
    }
    export class SampleController {
        firstName: string;
        lastName: string;
        age: number;
        address: Address;
        setUpWatches($scope: ng.IScope): void {
            $scope.$watch(() => this.firstName, (n, o) => {
                //n is string and so is o
            });
        };
        static $inject : string[] = ['$scope'];
        constructor($scope: ng.IScope) {
            this.setUpWatches($scope);
        }
    }
}

नियंत्रक सिंटेक्स क्यों?

नियंत्रक समारोह

नियंत्रक फ़ंक्शन और कुछ नहीं, बल्कि एक जावास्क्रिप्ट कंस्ट्रक्टर फ़ंक्शन है। इसलिए, जब कोई दृश्य function context लोड function context ( this ) नियंत्रक ऑब्जेक्ट पर सेट होता है।

मामला एक :

this.constFunction = function() { ... }

इसे controller object में बनाया controller object , $scope पर नहीं। विचार नियंत्रक ऑब्जेक्ट पर परिभाषित कार्यों तक नहीं पहुंच सकते हैं।

उदाहरण :

<a href="#123" ng-click="constFunction()"></a> // It will not work

केस 2:

$scope.scopeFunction = function() { ... }

इसे $scope object में बनाया गया है, controller object पर नहीं। दृश्य केवल $scope ऑब्जेक्ट पर परिभाषित कार्यों तक पहुंच सकते हैं।

उदाहरण :

<a href="#123" ng-click="scopeFunction()"></a> // It will work

नियंत्रक क्यों?

• ControllerAs वाक्य रचना यह बहुत स्पष्ट करता है जहां वस्तुओं रहे हैं किया जा रहा है manipulated.Having oneCtrl.name और anotherCtrl.name यह बहुत आसान है कि आप एक की पहचान के लिए बनाता है name विभिन्न प्रयोजनों के लिए कई अलग अलग नियंत्रकों द्वारा लेकिन अगर सौंपा दोनों का इस्तेमाल किया ही $scope.name और होने एक पृष्ठ पर दो अलग-अलग HTML तत्व, जो दोनों {{name}} से बंधे हैं, फिर यह पहचानना मुश्किल है कि कौन सा नियंत्रक है।

• $scope छिपाते हुए और एक intermediary object माध्यम से सदस्यों को नियंत्रक से दृश्य में उजागर करना। this.* सेट करके this.* , हम एक्सपोजर से देखने के लिए जो हम चाहते हैं, बस उसे उजागर कर सकते हैं।

    <div ng-controller="FirstCtrl">
        {{ name }}
        <div ng-controller="SecondCtrl">
            {{ name }}
            <div ng-controller="ThirdCtrl">
                {{ name }}
            </div>
        </div>
    </div>
  

यहाँ, उपरोक्त मामले में {{ name }} का उपयोग करने के लिए बहुत भ्रमित किया जाएगा और हम यह भी नहीं जानते हैं कि कौन से नियंत्रक से संबंधित है।

<div ng-controller="FirstCtrl as first">
    {{ first.name }}
    <div ng-controller="SecondCtrl as second">
        {{ second.name }}
        <div ng-controller="ThirdCtrl as third">
            {{ third.name }}
        </div>
    </div>
</div>

$ गुंजाइश क्यों?

• $scope उपयोग करें जब आपको $scope की एक या एक से अधिक विधियों का उपयोग करने की आवश्यकता होती है जैसे $watch , $digest , $emit , $http आदि।
• जो गुण और / या विधियाँ $scope सामने आती हैं, उन्हें स्पष्ट रूप से आवश्यकतानुसार $scope जाता है।