Angular 2 ट्यूटोरियल
शुरुआत एंगुलर 2 से हुई

टिप्पणियों

संस्करण

कोणीय-क्ली के साथ कोणीय 2 स्थापित करें

यह उदाहरण कोणीय 2 का एक त्वरित सेटअप है और एक त्वरित उदाहरण परियोजना कैसे उत्पन्न करता है।

आवश्यक शर्तें:

• Node.js v4 या अधिक से अधिक।
• npm v3 या अधिक या यार्न ।

एक टर्मिनल खोलें और एक-एक करके कमांड चलाएं:

npm install -g @angular/cli

या

yarn global add @angular/cli

पैकेज मैनेजर की अपनी पसंद के आधार पर।

पिछला कमांड विश्व स्तर पर @ कोणीय / cli स्थापित करता है, जो PATH के निष्पादन योग्य ng को जोड़ता है।

एक नई परियोजना की स्थापना के लिए

टर्मिनल के साथ एक फ़ोल्डर में नेविगेट करें जहां आप नई परियोजना स्थापित करना चाहते हैं।

आदेश चलाएँ:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

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

मौजूदा प्रोजेक्ट में जोड़ने के लिए

अपने वर्तमान प्रोजेक्ट की जड़ में नेविगेट करें।

कमांड चलाएँ:

ng init

यह आपकी परियोजना में आवश्यक मचान जोड़ देगा। फ़ाइलों को वर्तमान निर्देशिका में बनाया जाएगा ताकि खाली निर्देशिका में इसे चलाना सुनिश्चित करें।

स्थानीय रूप से प्रोजेक्ट चला रहा है

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

ng serve

यदि सर्वर सफलतापूर्वक शुरू हुआ तो उसे एक पता प्रदर्शित करना चाहिए जिस पर सर्वर चल रहा है। आमतौर पर यह है:

http://localhost:4200

बॉक्स से बाहर यह स्थानीय विकास सर्वर हॉट मॉड्यूल रीलोडिंग के साथ जुड़ा हुआ है, इसलिए HTML, टाइपस्क्रिप्ट, या सीएसएस में कोई भी परिवर्तन, ब्राउज़र को स्वचालित रूप से पुनः लोड होने के लिए ट्रिगर करेगा (लेकिन यदि वांछित हो तो इसे अक्षम किया जा सकता है)।

घटक, निर्देश, पाइप और सेवाएँ उत्पन्न करना

ng generate <scaffold-type> <name> (या बस ng g <scaffold-type> <name> ) कमांड आपको स्वचालित रूप से कोणीय घटकों को उत्पन्न करने की अनुमति देता है:

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component

कई संभव प्रकार के मचानों कोणीय-क्ली उत्पन्न कर सकते हैं:

आप इसके पहले अक्षर से टाइप नाम को भी बदल सकते हैं। उदाहरण के लिए:

ng gm my-new-module एक नया मॉड्यूल उत्पन्न करने के लिए या एक घटक बनाने के लिए ng gc my-new-component ।

भवन / बंडलिंग

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

ng build

या

ng build --prod

उसके बाद प्रोजेक्ट्स रूट निर्देशिका में /dist फ़ोल्डर के लिए देखें, जिसमें बिल्ड शामिल है।

यदि आप एक छोटे उत्पादन बंडल के लाभों को पसंद करते हैं, तो आप अहेड-ऑफ-टाइम टेम्पलेट संकलन का भी उपयोग कर सकते हैं, जो अंतिम बिल्ड से टेम्पलेट कंपाइलर को हटा देता है:

ng build --prod --aot

इकाई का परीक्षण

कोणीय 2 अंतर्निहित इकाई परीक्षण प्रदान करता है, और कोणीय-क्ली द्वारा बनाई गई प्रत्येक वस्तु एक बुनियादी इकाई परीक्षण उत्पन्न करती है, जिसका विस्तार किया जा सकता है। इकाई परीक्षण चमेली का उपयोग करके लिखे गए हैं, और कर्म के माध्यम से निष्पादित किए जाते हैं। निम्नलिखित कमांड निष्पादित करने के लिए परीक्षण शुरू करने के लिए:

ng test

यह कमांड प्रोजेक्ट में सभी परीक्षणों को निष्पादित करेगा, और हर बार स्रोत फ़ाइल में परिवर्तन होने पर उन्हें फिर से निष्पादित करेगा, चाहे वह आवेदन से परीक्षण या कोड हो।

अधिक जानकारी के लिए यहां भी जाएं: कोणीय-क्लि गिथब पृष्ठ

कोणीय-क्ली के बिना कोणीय 2 के साथ शुरू करना।

कोणीय 2.0.0-आरसी .4

इस उदाहरण में हम "हैलो वर्ल्ड!" सादगी के लिए केवल एक मूल घटक ( AppComponent ) के साथ ऐप।

आवश्यक शर्तें:

• Node.js v5 या बाद का
• npm v3 या बाद का

नोट: आप कंसोल / टर्मिनल में node -v और npm -v चलाकर संस्करणों की जांच कर सकते हैं।

चरण 1

अपनी परियोजना के लिए एक नया फ़ोल्डर बनाएँ और दर्ज करें। चलो इसे angular2-example ।

mkdir angular2-example
cd angular2-example

चरण 2

इससे पहले कि हम अपना ऐप कोड लिखना शुरू करें, हम नीचे दी गई 4 फाइलें जोड़ेंगे: package.json , tsconfig.json , typings.json और systemjs.config.js ।

अस्वीकरण: वही फाइलें आधिकारिक 5 मिनट क्विकस्टार्ट में पाई जा सकती हैं।

package.json - हमें npm के साथ सभी निर्भरताएं डाउनलोड करने की अनुमति देता है और सरल परियोजनाओं के लिए जीवन को आसान बनाने के लिए सरल स्क्रिप्ट निष्पादन प्रदान करता है। (आपको कार्यों को स्वचालित करने के लिए भविष्य में गुलप की तरह कुछ का उपयोग करने पर विचार करना चाहिए)।

{
  "name": "angular2-example",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json - टाइपस्क्रिप्ट ट्रांसपिलर को कॉन्फ़िगर करता है।

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json - टाइपस्क्रिप्ट उन पुस्तकालयों को पहचानते हैं जिनका हम उपयोग कर रहे हैं।

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

systemjs.config.js - कॉन्फ़िगर करता SystemJS (आप भी उपयोग कर सकते हैं webpack )।

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

चरण 3

टाइप करके निर्भरता स्थापित करते हैं

npm install

कंसोल / टर्मिनल में।

चरण 4

index.html angular2-example फ़ोल्डर के अंदर index.html बनाएँ।

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app></my-app>
  </body>
</html>

आपका एप्लिकेशन my-app टैग के बीच प्रदान किया जाएगा।

हालांकि, कोणीय अभी भी नहीं जानता है कि क्या प्रस्तुत करना है। यह बताने के लिए कि, हम AppComponent को परिभाषित AppComponent ।

चरण 5

app नामक एक सबफ़ोल्डर बनाएं जहां हम उन घटकों और सेवाओं को परिभाषित कर सकते हैं जो हमारे ऐप को बनाते हैं। (इस मामले में, इसमें केवल AppComponent कोड और main.ts शामिल main.ts ।)

mkdir app

चरण 6

फाइल app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}

क्या हो रहा है? सबसे पहले, हम @Component डेकोरेटर का आयात कर रहे हैं जिसका उपयोग हम Angular को HTML टैग और इस घटक के लिए टेम्पलेट देने के लिए करते हैं। फिर, हम title और messages चर के साथ वर्ग AppComponent बना रहे हैं जिसे हम टेम्पलेट में उपयोग कर सकते हैं।

अब आइए उस टेम्पलेट को देखें:

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>

हम h1 टैग में title चर प्रदर्शित कर रहे हैं और फिर *ngFor निर्देश का उपयोग करके messages प्रत्येक तत्व को दर्शाने वाली एक सूची बना रहे हैं। सरणी में प्रत्येक तत्व के लिए, *ngFor एक message चर बनाता है, *ngFor उपयोग हम li तत्व के भीतर करते हैं। परिणाम होगा:

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>

चरण 7

अब हम एक main.ts फ़ाइल बनाते हैं, जो पहली फ़ाइल होगी जो कोणीय देखती है।

फ़ाइल app/main.ts बनाएँ।

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

हम bootstrap फ़ंक्शन और AppComponent क्लास का आयात कर रहे हैं, फिर bootstrap का उपयोग करके कोणीय को बताएं कि रूट के रूप में किस घटक का उपयोग करना है।

चरण 8

यह आपके पहले ऐप को आग लगाने का समय है। प्रकार

npm start

आपके कंसोल / टर्मिनल में। इस से एक तैयार स्क्रिप्ट चलेंगे package.json कि शुरू होता है लाइट-सर्वर, एक ब्राउज़र विंडो में अपने अनुप्रयोग खोलता है, और घड़ी मोड में टाइपप्रति transpiler चलाता है (ताकि .ts फ़ाइलों transpiled किया जाएगा और ब्राउज़र परिवर्तनों को सहेजें ताज़ा होगी जब आप) ।

अब क्या?

आधिकारिक एंगुलर 2 गाइड और स्टैकऑवरफ्लो के प्रलेखन पर अन्य विषयों की जाँच करें ।

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

NPM और NODE अपडेट के साथ विजुअल स्टूडियो को सिंक में रखना

चरण 1: Node.js के अपने डाउनलोड का पता लगाएँ, आम तौर पर यह C: / प्रोग्राम फ़ाइलों / नोडज के अंतर्गत स्थापित किया जाता है

चरण 2: विज़ुअल स्टूडियो खोलें और "टूल> विकल्प" पर नेविगेट करें

चरण 3: विकल्प विंडो में "प्रोजेक्ट और समाधान> बाहरी वेब उपकरण" पर जाएं

चरण 4: आपके साथ नई प्रविष्टि जोड़ें Node.js फ़ाइल स्थान (C: / प्रोग्राम फ़ाइलें / नोडज), सूची के शीर्ष पर अपना संदर्भ स्थानांतरित करने के लिए मेनू पर तीर बटन का उपयोग करें।

चरण 5: विज़ुअल स्टूडियोज़ को पुनः आरंभ करें और npm कमांड विंडो से, अपने प्रोजेक्ट के विरुद्ध एक npm इंस्टॉल रन करें

उस pesky कंपनी प्रॉक्सी के माध्यम से हो रही है

यदि आप XYZ MegaCorp पर अपने Windows वर्क कंप्यूटर पर Angular2 साइट चलाने का प्रयास कर रहे हैं, तो संभावना है कि आपको कंपनी प्रॉक्सी के माध्यम से समस्याएँ हो रही हैं।

कम से कम दो पैकेज प्रबंधक हैं जिन्हें प्रॉक्सी के माध्यम से प्राप्त करने की आवश्यकता है:

1. NPM
2. Typings

NPM के लिए आपको .npmrc फ़ाइल में निम्न पंक्तियाँ जोड़ने की आवश्यकता है:

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/

टाइपिंग के लिए आपको .typingsrc फ़ाइल में निम्न पंक्तियों को जोड़ना होगा:

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
rejectUnauthorized=false

ये फ़ाइलें शायद अभी तक मौजूद नहीं हैं, इसलिए आप इन्हें रिक्त पाठ फ़ाइलों के रूप में बना सकते हैं। उन्हें प्रोजेक्ट रूट में जोड़ा जा सकता है ( package.json समान स्थान) या आप उन्हें %HOMEPATH% में रख सकते हैं और वे आपकी सभी परियोजनाओं के लिए उपलब्ध होंगे।

बिट जो स्पष्ट नहीं है और मुख्य कारण है कि लोगों को लगता है कि प्रॉक्सी सेटिंग्स काम नहीं कर रही हैं %5C जो कि डोमेन और उपयोगकर्ता नामों को अलग करने के लिए \ _ का URL एनकोड है। उस एक के लिए स्टीव रॉबर्ट्स को धन्यवाद: कॉर्पोरेट प्रॉक्सी के पीछे npm का उपयोग करना ।pac

नोड्यूलर / एक्सप्रेसजेज बैकएंड (http उदाहरण सहित) के साथ कोणीय 2 के साथ आरंभ करना

हम एक सरल "हैलो वर्ल्ड!" Angular2 2.4.1 ( @NgModule परिवर्तन) के साथ एक नोड के साथ एप्लिकेशन। js (एक्सप्रेस) बैकएंड।

आवश्यक शर्तें

• Node.js v4.xx या उच्चतर
• NPM v3.xx या उच्च या धागा

फिर विश्व स्तर पर टाइपस्क्रिप्ट स्थापित करने के लिए npm install -g typescript या yarn global add typescript चलाएँ

रोडमैप

चरण 1

हमारे ऐप के लिए एक नया फ़ोल्डर (और हमारे बैक-एंड का रूट डायर) बनाएं। चलो इसे Angular2-express ।

कमांड लाइन :

mkdir Angular2-express
cd Angular2-express

चरण 2

हमारे node.js ऐप के लिए package.json (निर्भरता के लिए) और app.js (बूटस्ट्रैपिंग के लिए) node.js ।

package.json:

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  }
}

app.js:

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

server.listen(process.env.PORT || 9999, function(){
    console.log("Server connected. Listening on port: " + (process.env.PORT || 9999));
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/front' ) );

app.get('/test', function(req,res){ //example http request receiver
  return res.send(myTestVar);
});

//send the index.html on every page refresh and let angular handle the routing
app.get('/*',  function(req, res, next) {
    console.log("Reloading");
    res.sendFile('index.html', { root: __dirname }); 
});

फिर निर्भरता स्थापित करने के लिए एक npm install या yarn चलाएं।

अब हमारा बैक-एंड स्ट्रक्चर पूरा हो गया है। चलिए आगे-आगे चलते हैं।

चरण 3

हमारा फ्रंट-एंड हमारे Angular2-express फ़ोल्डर के front फ़ोल्डर में होना चाहिए।

कमांड लाइन:

mkdir front
cd front

जैसे हमने अपने बैक-एंड के साथ किया वैसे ही हमारे फ्रंट-एंड को भी डिपेंडेंसी फाइलों की जरूरत है। चलो आगे बढ़ते हैं और निम्नलिखित फाइलें बनाते हैं: package.json , systemjs.config.js , tsconfig.json

package.json :

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "typescript": "2.0.2"
  }
}

systemjs.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    defaultJSExtensions:true,
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ]
}

फिर निर्भरता स्थापित करने के लिए एक npm install या yarn चलाएं।

अब जब हमारी निर्भरता की फाइलें पूरी हो गई हैं। चलिए अपने index.html पर चलते हैं:

index.html:

<html>
  <head>
    <base href="/">
    <title>Angular2-express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

अब हम अपना पहला घटक बनाने के लिए तैयार हैं। हमारे front फोल्डर के अंदर एक app नाम का फोल्डर बनाएं।

कमांड लाइन:

mkdir app
cd app

चलिए main.ts , app.module.ts , app.component.ts नाम की निम्न फाइलें app.component.ts

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule    
  ],
  declarations: [ 
    AppComponent
  ],
  providers:[ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

app.component.ts:

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: 'Hello World!',
  providers: []
})
export class AppComponent { 
  constructor(private http: Http){
    //http get example
    this.http.get('/test')
     .subscribe((res)=>{
       console.log(res);
     });
  }
}

इसके बाद, टाइपस्क्रिप्ट फ़ाइलों को जावास्क्रिप्ट फ़ाइलों के लिए संकलित करें। वर्तमान dir (Angular2- एक्सप्रेस फ़ोल्डर के अंदर) से 2 स्तर ऊपर जाएं और नीचे कमांड चलाएं।

कमांड लाइन:

cd ..
cd ..
tsc -p front

हमारी फ़ोल्डर संरचना इस प्रकार दिखनी चाहिए:

Angular2-express
├── app.js
├── node_modules
├── package.json
├── front
│   ├── package.json
│   ├── index.html
│   ├── node_modules
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.component.js.map
│   │   ├── app.component.js
│   │   ├── app.module.ts
│   │   ├── app.module.js.map
│   │   ├── app.module.js
│   │   ├── main.ts
│   │   ├── main.js.map
│   │   ├── main.js

अंत में, Angular2- एक्सप्रेस फ़ोल्डर के अंदर, कमांड लाइन में node app.js कमांड node app.js । अपना पसंदीदा ब्राउज़र खोलें और अपने ऐप को देखने के लिए localhost:9999 देखें।

चलो कोणीय 4 में गोता लगाओ!

कोणीय 4 अब उपलब्ध है! दरअसल एंगुलर 2 के बाद से एंगुलर सेमर का उपयोग करता है, जिसके लिए ब्रेकिंग चेंजेज शुरू होने पर बड़ी संख्या में वृद्धि की आवश्यकता होती है। कोणीय टीम ने उन विशेषताओं को स्थगित कर दिया है जो ब्रेकिंग परिवर्तन का कारण बनती हैं, जो कोणीय 4 के साथ जारी किया जाएगा। कोणीय 3 को मुख्य मॉड्यूल के संस्करण संख्याओं को संरेखित करने में सक्षम होने के लिए छोड़ दिया गया था, क्योंकि राउटर में पहले से ही संस्करण 3 था।

कोणीय टीम के अनुसार, कोणीय 4 अनुप्रयोग पहले की तुलना में कम जगह लेने वाले और तेज़ होने वाले हैं। उन्होंने एनीमेशन पैकेज को @ कोणीय / कोर पैकेज से अलग कर दिया है। यदि कोई एनीमेशन पैकेज का उपयोग नहीं कर रहा है, तो कोड का अतिरिक्त स्थान उत्पादन में समाप्त नहीं होगा। टेम्पलेट बाइंडिंग सिंटैक्स अब समर्थन करता है यदि / अन्यथा स्टाइल सिंटैक्स। कोणीय 4 अब टाइपस्क्रिप्ट 2.1 और 2.2 के सबसे हाल के संस्करण के साथ संगत है। तो, एंगुलर 4 अधिक रोमांचक होने जा रहा है।

अब मैं आपको दिखाता हूँ कि अपने प्रोजेक्ट में Angular 4 का सेटअप कैसे करें।

आइए तीन अलग-अलग तरीकों से कोणीय सेटअप शुरू करें:

आप Angular-CLI (कमांड लाइन इंटरफेस) का उपयोग कर सकते हैं, यह आपके लिए सभी निर्भरताएं स्थापित करेगा।

• आप Angular 2 से Angular 4 में माइग्रेट कर सकते हैं।

• आप गितुब का उपयोग कर सकते हैं और Angular4-boilerplate क्लोन कर सकते हैं। (यह सबसे आसान है। एक)

• कोणीय-सीएलआई (कमांड लाइन इंटरफ़ेस) का उपयोग कर कोणीय सेटअप।

इससे पहले कि आप कोणीय-सीएलआई का उपयोग शुरू करें, सुनिश्चित करें कि आपने अपने मशीन में नोड स्थापित किया है। यहां, मैं नोड v7.8.0 का उपयोग कर रहा हूं। अब, अपना टर्मिनल खोलें और कोणीय-सीएलआई के लिए निम्न कमांड टाइप करें।

npm install -g @angular/cli

या

yarn global add @angular/cli

आपके द्वारा उपयोग किए जाने वाले पैकेज मैनेजर के आधार पर।

चलो कोणीय-सीएलआई का उपयोग करके कोणीय 4 स्थापित करें।

ng new Angular4-boilerplate

सीडी Angular4-boilerplate हम सभी कोणीय 4 के लिए सेट कर रहे हैं। इसकी बहुत आसान और सरल विधि ।😌

कोणीय 2 से कोणीय 4 में स्थानांतरित करके कोणीय सेटअप

अब दूसरा दृष्टिकोण देखते हैं। मैं आपको दिखाता हूँ कि कोणीय 2 को कोणीय 4 में कैसे स्थानांतरित किया जाए। इसके लिए आपको किसी भी कोणीय 2 परियोजना को क्लोन करने की आवश्यकता है और अपने पैकेज में कोणीय 4 निर्भरता के साथ कोणीय 2 निर्भरता को अपडेट करें। निम्नानुसार:

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "^4.0.1",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "typescript": "2.2.2"
   }

ये कोणीय 4 के लिए मुख्य निर्भरताएं हैं। अब आप एनपीएम स्थापित कर सकते हैं और फिर एनपीएम एप्लिकेशन को चलाना शुरू कर सकते हैं। मेरे पैकेज के संदर्भ में।

गिटब प्रोजेक्ट से कोणीय सेटअप

इस चरण को शुरू करने से पहले सुनिश्चित करें कि आपने अपनी मशीन में स्थापित किया है। अपना टर्मिनल खोलें और नीचे कमांड का उपयोग करके कोणीय 4-बॉयलरप्लेट क्लोन करें:

[email protected]:CypherTree/angular4-boilerplate.git

फिर सभी निर्भरताएं स्थापित करें और इसे चलाएं।

npm install

npm start

और आपको कोणीय 4 सेटअप के साथ किया जाता है। सभी चरण बहुत सीधे हैं ताकि आप उनमें से किसी को भी चुन सकें।

निर्देशिका संरचना कोणीय 4-बॉयलरप्लेट

Angular4-boilerplate
-karma
-node_modules
-src
   -mocks
   -models
      -loginform.ts
      -index.ts
   -modules
      -app
        -app.component.ts
     -app.component.html
      -login
    -login.component.ts
    -login.component.html
    -login.component.css
      -widget
     -widget.component.ts
     -widget.component.html
     -widget.component.css
    ........    
   -services
       -login.service.ts
    -rest.service.ts
   -app.routing.module.ts
   -app.module.ts
   -bootstrap.ts
   -index.html
   -vendor.ts
-typings
-webpack
-package.json
-tsconfig.json
-tslint.json
-typings.json 

निर्देशिका संरचना के लिए बुनियादी समझ:

सभी कोड src फ़ोल्डर में रहता है।

मॉक फोल्डर मॉक डेटा के लिए है जिसका उपयोग परीक्षण उद्देश्य में किया जाता है।

मॉडल फ़ोल्डर में क्लास और इंटरफ़ेस होता है जिसका उपयोग घटक में किया जाता है।

मॉड्यूल फ़ोल्डर में ऐप, लॉगिन, विजेट आदि जैसे घटकों की सूची होती है। सभी घटकों में टाइपस्क्रिप्ट, HTML और सीएसएस फ़ाइल होती है। index.ts सभी वर्ग के निर्यात के लिए है।

सेवाओं के फ़ोल्डर में एप्लिकेशन में उपयोग की जाने वाली सेवाओं की सूची है। मैंने बाकी सेवा और अलग घटक सेवा को अलग कर दिया है। बाकी सेवा में अलग-अलग http तरीके होते हैं। लॉगिन कंपोनेंट और रेस्ट सर्विस के बीच लॉगिन सेवा मध्यस्थ की तरह काम करती है।

app.rout.ts फ़ाइल अनुप्रयोग के लिए सभी संभावित मार्गों का वर्णन करती है।

app.module.ts रूट घटक के रूप में ऐप मॉड्यूल का वर्णन करता है।

bootstrap.ts संपूर्ण अनुप्रयोग चलाएगा।

वेबपैक फ़ोल्डर में वेबपैक कॉन्फ़िगरेशन फ़ाइल है।

package.json फ़ाइल निर्भरता की सभी सूची के लिए है।

कर्म में इकाई परीक्षण के लिए कर्म विन्यास होता है।

नोड_मॉड्यूल में पैकेज बंडलों की सूची होती है।

लॉगिन घटक के साथ शुरू करते हैं। Login.component.html में

<form>Dreamfactory - Addressbook 2.0 
 <label>Email</label> <input id="email" form="" name="email" type="email" /> 
 <label>Password</label> <input id="password" form="" name="password" 
 type="password" /> 
 <button form="">Login</button>
</form>

Login.component.ts में

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Form, FormGroup } from '@angular/forms';
import { LoginForm } from '../../models';
import { LoginService } from '../../services/login.service';

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {

    constructor(private loginService: LoginService, private router: Router, form: LoginForm) { }

    getLogin(form: LoginForm): void {
      let username = form.email;
      let password = form.password;
      this.loginService.getAuthenticate(form).subscribe(() => {
          this.router.navigate(['/calender']);
      });
    }
}

हमें इस घटक को index.ts में निर्यात करने की आवश्यकता है।

export * from './login/login.component';

हमें app.routes.ts में लॉगिन के लिए मार्ग निर्धारित करने की आवश्यकता है

const appRoutes: Routes = [
   {
       path: 'login',
       component: LoginComponent
   },
   ........
   {
       path: '',
       pathMatch: 'full',
       redirectTo: '/login'
   }
];

रूट कंपोनेंट में, app.module.ts फाइल को आपको उस कंपोनेंट को इम्पोर्ट करने की जरूरत है।

.....
import { LoginComponent } from './modules';
......
@NgModule({
    bootstrap: [AppComponent],
    declarations: [
       LoginComponent
       .....
       .....
       ]
      ..... 
  })
  export class AppModule { }

और उसके बाद npm इंस्टॉल और npm स्टार्ट। हेयर यू गो! आप अपने स्थानीयहोस्ट में लॉगिन स्क्रीन की जांच कर सकते हैं। किसी भी कठिनाई के मामले में, आप कोणीय 4-बॉयलरप्लेट का उल्लेख कर सकते हैं।

मूल रूप से मैं कम बिल्डिंग पैकेज और अधिक तेजी से एंगुलर 4 एप्लिकेशन के साथ प्रतिक्रिया महसूस कर सकता हूं और हालांकि मुझे कोडिंग में एंगुलर 2 के समान सटीक रूप से मिला।