मुझे यह कहकर प्रस्तावना दें, मैं आपको और सभी को मान रहा हूं, जो पहले से ही इसे कोणीय 1 के साथ आराम से पढ़ रहे हैं ( अब नए संस्करणों के लिए केवल कोणीय के रूप में, कोणीयजेएस के रूप में संदर्भित किया जाता है )। यह कहा जा रहा है, आइए हम कोणीय 2+ में कुछ अतिरिक्त और महत्वपूर्ण अंतरों के बारे में जानें।
- उन्होंने एक कोणीय जोड़ा
cli।
आप रनिंग करके एक नया प्रोजेक्ट शुरू कर सकते हैं ng new [app name]। आप ng serve
यहां अधिक जानें चलाकर अपनी परियोजना की सेवा कर सकते हैं: https://github.com/angular/angular-cli
- आपका कोणीय कोड ES6 टाइपस्क्रिप्ट में लिखा गया है और यह ब्राउजर में जावास्क्रिप्ट में रनटाइम पर संकलित है।
इस पर पूरी समझ पाने के लिए मैं अपने उत्तर के निचले भाग में मौजूद कुछ संसाधन सूची की जाँच करने की सलाह देता हूँ।
- प्रोजेक्ट संरचना
एक मूल संरचना में, आपके पास एक app/tsफ़ोल्डर होगा जहां आप अपना अधिकांश काम app/jsकरेंगे और आप app/jsएक .js.mapएक्सटेंशन के साथ फ़ोल्डर फ़ाइलों में पाएंगे । वे डीबगिंग के लिए आपके ब्राउज़र के लिए "अपने" .ts "फ़ाइल" मैप करते हैं क्योंकि आपका ब्राउज़र देशी टाइपस्क्रिप्ट नहीं पढ़ सकता है।
अपडेट : यह बीटा से बाहर है। प्रोजेक्ट संरचना थोड़ी बदल गई, ज्यादातर मामलों में और यदि आप कोणीय क्ली का उपयोग कर रहे हैं, तो आप src/app/फ़ोल्डर में काम करेंगे
। एक स्टार्टर प्रोजेक्ट में, आपके पास निम्नलिखित होंगे।
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css : सीएसएस फ़ाइल आपको विशिष्ट का उपयोग करना चाहिएcomponent.html
app.component.html : एक दृश्य (app.component.js में घोषित चर)
app.component.spec.ts : परीक्षण के लिए उपयोग किया जाता हैapp.component.ts
app.component.ts : आपका कोड जो बांधता हैapp.component.html
app.module.ts : यह वह है जो आपके ऐप को बंद कर देता है और जहां आप सभी प्लगइन्स, घटकों, सेवाओं आदि को परिभाषित करते हैं। यह app.jsकोणीय में समतुल्य है।
index.ts प्रोजेक्ट फ़ाइलों को परिभाषित या निर्यात करने के लिए उपयोग किया जाता है
अतिरिक्त जानकारी:
प्रो टिप: आप ng generate [option] [name]नई सेवाओं, घटकों, पाइपों आदि को बनाने के लिए चला सकते हैं ।
इसके अलावा tsconfig.jsonफ़ाइल के रूप में अपनी परियोजना के लिए टीएस संकलन नियमों को परिभाषित करता है महत्वपूर्ण है।
अगर आप सोच रहे हैं कि मुझे एक नई भाषा सीखनी है? ... उह ... थोड़े, टाइपस्क्रिप्ट जावास्क्रिप्ट का एक सुपरसेट है। डरा मत करो; यह आपके विकास को आसान बनाने के लिए है। मुझे लगा कि इसके साथ खेलने के कुछ ही घंटों के बाद मुझे इस पर एक अच्छी पकड़ थी, और 3 दिनों के बाद यह सब खत्म हो गया।
- आप अपने HTML को उसी तरह से बांधते हैं, जैसे आप कोणीय 1 निर्देश में कैसे करेंगे। तो चर की तरह
$scopeऔर $rootScopeपदावनत किया गया है।
यह एक आप निहित हो सकता है। कोणीय 2 अभी भी एक एमवी * है, लेकिन आप अपने घटकों के लिए कोड को बांधने के तरीके के रूप में ' घटकों ' का उपयोग करेंगे, उदाहरण के लिए, निम्नलिखित करें
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
यहाँ importएक v1 नियंत्रक में अपने निर्भरता इंजेक्शन के रूप में बयान के बारे में सोचो । आप अपने पैकेजों importको आयात करने के लिए उपयोग करते हैं, जहां import {Component}आप कहते हैं कि आप अपने componentलिए बाध्य करना चाहते हैं HTML।
सूचना @Componentएक डेकोरेटर आप selectorऔर template। यहाँ पर आप के selectorरूप में आपके द्वारा $scopeउपयोग किए जाने वाले के बारे में सोचें कि आप v1 का उपयोग करते हैं, directivesजहां का नाम वह selectorहै जिसे आप अपने HTML में बांधने के लिए उपयोग करते हैं जैसे
<my-app> </my-app>
<my-app>आपके कस्टम टैग का नाम कहां है जो आप उपयोग करेंगे जो आपके टेम्प्लेट में घोषित किए गए प्लेसहोल्डर के रूप में कार्य करेगा। यानी) <h1> Hello World! </h1>। जबकि यह v1 में निम्नलिखित की तरह दिखेगा:
एचटीएमएल
<h1>{{hello}}</h1>
जे एस
$scope.hello = "Hello World!"
लोडिंग संदेश उत्पन्न करने के लिए आप इन टैगों के बीच कुछ जोड़ सकते हैं, जैसे:
<my-app> Loading... </my-app>
फिर यह लोडिंग संदेश के रूप में " लोड हो रहा है ... " प्रदर्शित करेगा ।
ध्यान दें कि जो घोषित किया गया templateहै वह पथ या कच्चा HTML है जिसे आप HTMLअपने selectorटैग में उपयोग कर रहे हैं ।
एंगुलर 1 का फुलर कार्यान्वयन इस तरह दिखाई देगा:
एचटीएमएल
<h1 ng-controller="myCtrl">{{hello}}</h1>
V1 में यह कुछ इस तरह दिखेगा
जे एस
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
यह वही है जो मुझे वास्तव में v2 के बारे में पसंद है। मैंने पाया कि v1 में मेरे लिए निर्देशन एक कठिन सीखने की अवस्था थी और जब मैंने उन्हें खोजा था तब भी मुझे अक्सर यह पता CSSनहीं था कि मैं किस तरह का इरादा रखता हूं। मुझे लगता है यह आसान तरीका है।
V2 आपके एप्लिकेशन की आसान मापनीयता की अनुमति देता है क्योंकि आप v1 में अपने ऐप को आसान बना सकते हैं। मुझे यह तरीका पसंद है क्योंकि आप एक फाइल में अपने सभी काम करने वाले हिस्सों को कोणीय v1 में कई होने का विरोध कर सकते हैं।
V1 से v2 तक अपनी परियोजना को बदलने के बारे में क्या?
विकास टीम से मैंने जो सुना है, अगर आप अपने v1 प्रोजेक्ट को v2 में अपडेट करना चाहते हैं, तो आप बस के माध्यम से जा रहे हैं और हटाए गए ब्लब्स को हटाकर अपने $scopeएस को selectorएस के साथ बदल देंगे । मुझे यह वीडियो मददगार लगा। यह कुछ आयोनिक टीम के साथ है जो कंधे से कंधा मिलाकर काम कर रही है क्योंकि v2 का मोबाइल https://youtu.be/OZg4M_nWuIk पर ज्यादा फोकस है ।
अद्यतन: मैं कोणीय 2 के आधिकारिक कार्यान्वयन के रूप में उदाहरण जोड़कर अद्यतन किया गया है।
अद्यतन 2: यह अभी भी एक लोकप्रिय प्रश्न प्रतीत होता है, इसलिए मैंने सोचा कि मुझे कुछ संसाधन मिले जब मैंने कोणीय 2 के साथ काम करना शुरू किया।
सहायक संसाधन:
ES6 के बारे में अधिक जानकारी के लिए, मैं न्यू बोस्टन के ECMAScript 6 / ES6 के नए फीचर ट्यूटोरियल की जाँच करने की सलाह देता हूं - YouTube प्लेलिस्ट
टाइपस्क्रिप्ट फ़ंक्शन लिखने और यह देखने के लिए कि वे जावास्क्रिप्ट को कैसे टाइप करते हैं, टाइपस्क्रिप्ट भाषा खेल का मैदान देखें
कोणीय 2 में कोणीय 1 तुल्यता क्या है के कार्य विच्छेद द्वारा एक समारोह को देखने के लिए Angular.io - Cookbook -A1 A2 त्वरित संदर्भ देखें