कोणीय 2 में सोच रही थी जब एक कोणीय 1 पृष्ठभूमि

Question

से आ चलें कहते हैं कि मैं विकासशील क्लाइंट साइड एसपीए के कोणीय 1 के साथ के साथ सहज हो गए हैं लेकिन अब मैं कोणीय 2.

करने के लिए परिवर्तन कौन से कुछ होगा बनाना चाहते परिवर्तन करने पर विचार करने के लिए महत्वपूर्ण प्रतिमान?

• क्या कोणीय 2 के वास्तुशिल्प डिजाइन में मुख्य अंतर यह है 1 की तुलना में:

  यहाँ कुछ सवाल मदद मिल सकती है अपने जवाब फ्रेम कर रहे हैं?

• मुझे क्या रोकना/शुरू करना चाहिए?

Answer 1

आर्किटेक्चरल डिज़ाइन में मुख्य अंतर शायद यूनिडायरेक्शनल डेटा प्रवाह और घटकों पर केंद्रित है।

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

Answer 2

वास्तुकला में मुख्य अंतर के रूप में कहा ऊपर मैं भी कुछ बिंदुओं को जोड़ना चाहते हैं यूनिडायरेक्शनल डाटा प्रवाह है:

घटक आधारित यूआई

कोणीय एक घटक आधारित यूआई अपनाने है, एक अवधारणा डेवलपर्स को प्रतिक्रिया देने के लिए परिचित हो सकता है। एक अर्थ में, कोणीय 1.x नियंत्रक और निर्देश नए कोणीय 2 घटक में धुंधला हो जाते हैं।

इसका मतलब है कि कोणीय 2 में कोई नियंत्रक नहीं हैं और कोई निर्देश नहीं है। इसके बजाए, एक घटक में एक चयनकर्ता होता है जो घटक टैग के अनुरूप एचटीएमएल टैग के अनुरूप होता है और घटक के लिए एक HTML टेम्पलेट निर्दिष्ट करने के लिए @View।

निम्नलिखित उदाहरण ईएस 6 जावास्क्रिप्ट मानकों के एक सुपरसेट टाइपस्क्रिप्ट का उपयोग करते हैं। कोणीय 2 वर्तमान में टाइपस्क्रिप्ट में विकसित किया जा रहा है, लेकिन ईएस 5 और ईएस 6 जावास्क्रिप्ट मानकों दोनों के साथ संगत होगा।

कोणीय 1.x:

angular.module(‘example’) 
.controller(‘ExampleCtrl’, function() { 
}); 

कोणीय 2.0: इवेंट सिंटेक्स

कोणीय अनुप्रयोगों के साथ

import {Component} from 'angular2/core'; 
@Component({ 
    selector: 'example', 
    templateUrl: './components/example/example.html' 
}) 
export class App {} 

उपयोगकर्ता इनपुट अब घटना सिंटेक्स के उपयोग से उपयोगकर्ता इनपुट का जवाब । घटना वाक्यविन्यास कोष्ठक (घटना) से घिरी एक क्रिया द्वारा दर्शाया गया है।

आप #var वाक्यविन्यास का उपयोग कर स्थानीय चर के रूप में टेम्पलेट के अन्य हिस्सों में तत्व संदर्भ भी उपलब्ध करा सकते हैं।

कोणीय 1.x:

<input ng-model=”thing.item” type=”text”> 
<button ng-click=”thing.submit(item)” type=”submit”> 

कोणीय 2।0:

<input #item type=”text”> 
<button (click)=”submit(item)” type=”submit”> 

अलविदा $ गुंजाइश

हालाँकि '$ विषय-क्षेत्र' 'नियंत्रक के रूप में "द्वारा प्रतिस्थापित किया गया कोणीय 1.2 के बाद से सर्वोत्तम अभ्यास के रूप में, यह अभी भी कई ट्यूटोरियल में lingers। अंततः कोणीय 2 इसे बंद कर देता है, क्योंकि गुण घटकों से बंधे होते हैं।

कोणीय 1.x:

angular.module(‘example’) 
.controller(‘ExampleCtrl’, function($scope) { 
     $scope.name = “John Smith”; 
}); 

कोणीय 2.0:

@Component({ 
selector: 'example', 
templateUrl: './components/example/example.html' 
}) 
export class App{ 
    constructor() { 
    this.name = “John Smith”; 
    } 
} 

बेहतर प्रदर्शन

अल्ट्रा फास्ट परिवर्तन का पता लगाने और अपरिवर्तनीय डेटा संरचनाओं के साथ

, कोणीय 2 वादों दोनों होने के लिए तेज और अधिक स्मृति कुशल। इसके अलावा, फ्लक्स द्वारा लोकप्रिय यूनी-दिशात्मक डेटा प्रवाह की शुरूआत, एंगुलर ऐप के साथ प्रदर्शन समस्याओं को डीबग करने में कुछ चिंता को कम करने में मदद करती है।

इसका मतलब यह भी नहीं है कि दो और तरफा डेटा बाइंडिंग जो कोणीय 1.x में एक लोकप्रिय विशेषता थी। चिंता न करें, भले ही एनजी-मॉडल नहीं है, वही अवधारणा को कोणीय 2 के साथ उसी तरह हल किया जा सकता है।