Angular 2 Samouczek
Rozpoczęcie pracy z Angular 2

Uwagi

Wersje

Zainstaluj angular2 z angular-cli

Ten przykład to szybka konfiguracja Angulara 2 i jak wygenerować szybki przykładowy projekt.

Wymagania wstępne:

• Node.js v4 lub nowszy.
• npm v3 lub wyższa lub przędza .

Otwórz terminal i uruchom kolejno polecenia:

npm install -g @angular/cli

lub

yarn global add @angular/cli

w zależności od wyboru menedżera pakietów.

Poprzednie polecenie instaluje @ angular / cli globalnie, dodając plik wykonywalny ng do PATH.

Aby skonfigurować nowy projekt

Za pomocą terminalu przejdź do folderu, w którym chcesz skonfigurować nowy projekt.

Uruchom polecenia:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

To znaczy, masz teraz prosty przykładowy projekt wykonany w Angular 2. Możesz teraz przejść do łącza wyświetlanego w terminalu i zobaczyć, co jest uruchomione.

Aby dodać do istniejącego projektu

Przejdź do katalogu głównego bieżącego projektu.

Uruchom polecenie:

ng init

To doda niezbędne rusztowanie do twojego projektu. Pliki zostaną utworzone w bieżącym katalogu, więc pamiętaj, aby uruchomić go w pustym katalogu.

Lokalne uruchomienie projektu

Aby zobaczyć i współpracować z aplikacją, gdy jest ona uruchomiona w przeglądarce, musisz uruchomić lokalny serwer programistyczny obsługujący pliki twojego projektu.

ng serve

Jeśli serwer uruchomił się pomyślnie, powinien wyświetlić adres, pod którym działa serwer. Zwykle jest to:

http://localhost:4200

Po instalacji ten lokalny serwer programistyczny jest podłączony do funkcji Hot Module Reloading, więc wszelkie zmiany w html, maszynopisie lub css spowodują automatyczne ponowne załadowanie przeglądarki (ale można ją wyłączyć w razie potrzeby).

Generowanie komponentów, dyrektyw, rur i usług

Polecenie ng generate <scaffold-type> <name> (lub po prostu ng g <scaffold-type> <name> ) pozwala automatycznie generować komponenty Angular:

# 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

Istnieje kilka możliwych typów rusztowań, które może generować kąt-cli:

Możesz także zastąpić nazwę typu pierwszą literą. Na przykład:

ng gm my-new-module aby wygenerować nowy moduł lub ng gc my-new-component moduł, aby utworzyć komponent.

Budynek / sprzedaż wiązana

Po zakończeniu tworzenia aplikacji internetowej Angular 2 i chęci jej zainstalowania na serwerze internetowym, takim jak Apache Tomcat, wystarczy uruchomić polecenie kompilacji z ustawioną flagą produkcyjną lub bez niej. Produkcja zminimalizuje kod i zoptymalizuje ustawienia produkcyjne.

ng build

lub

ng build --prod

Następnie poszukaj w katalogu głównym projektów folderu /dist , który zawiera kompilację.

Jeśli chcesz skorzystać z mniejszego pakietu produkcyjnego, możesz także skorzystać z kompilacji szablonów Ahead-of-Time, która usuwa kompilator szablonów z ostatecznej wersji:

ng build --prod --aot

Testów jednostkowych

Angular 2 zapewnia wbudowane testowanie jednostkowe, a każdy element utworzony przez angular-cli generuje podstawowy test jednostkowy, który można rozszerzyć. Testy jednostkowe są pisane przy użyciu jaśminu i wykonywane przez Karmę. Aby rozpocząć testowanie, wykonaj następujące polecenie:

ng test

To polecenie wykona wszystkie testy w projekcie i uruchomi je ponownie przy każdej zmianie pliku źródłowego, niezależnie od tego, czy jest to test, czy kod z aplikacji.

Aby uzyskać więcej informacji, odwiedź również stronę: angular-cli github

Rozpoczęcie pracy z Angular 2 bez angular-cli.

Kątowy 2.0.0-rc.4

W tym przykładzie utworzymy „Hello World!” aplikacja z tylko jednym składnikiem głównym ( AppComponent ) dla uproszczenia.

Wymagania wstępne:

• Node.js v5 lub nowszy
• npm v3 lub nowszy

Uwaga: Możesz sprawdzić wersje, uruchamiając node -v i npm -v w konsoli / terminalu.

Krok 1

Utwórz i wprowadź nowy folder dla swojego projektu. Nazwijmy to angular2-example .

mkdir angular2-example
cd angular2-example

Krok 2

Zanim zaczniemy pisać nasz kod aplikacji, dodamy 4 poniższe pliki: package.json , tsconfig.json , typings.json i systemjs.config.js .

Oświadczenie: Te same pliki można znaleźć w oficjalnym 5-minutowym Szybki start .

package.json - pozwala nam pobrać wszystkie zależności za pomocą npm i zapewnia proste wykonanie skryptu, aby ułatwić życie prostym projektom. (Powinieneś rozważyć użycie czegoś takiego jak Gulp w przyszłości do automatyzacji zadań).

{
  "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 - Konfiguruje transpiler TypeScript.

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

typings.json - Sprawia, że TypeScript rozpoznaje biblioteki, których używamy.

{
  "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 - Konfiguruje SystemJS (można również użyć 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);

Krok 3

Zainstalujmy zależności, pisząc

npm install

w konsoli / terminalu.

Krok 4

Utwórz index.html w folderze angular2-example .

<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>

Twoja aplikacja będzie renderowana między tagami my-app .

Jednak Angular wciąż nie wie, co renderować. Aby to powiedzieć, zdefiniujemy AppComponent .

Krok 5

Utwórz podfolder o nazwie app którym możemy zdefiniować komponenty i usługi, które składają się na naszą aplikację. (W tym przypadku, będzie to po prostu zawierać AppComponent kod i main.ts ).

mkdir app

Krok 6

Utwórz plik 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"
    ];
}

Co się dzieje? Najpierw importujemy dekorator @Component którego używamy do nadania @Component tagu HTML i szablonu dla tego komponentu. Następnie tworzymy klasę AppComponent ze AppComponent title i messages , które możemy wykorzystać w szablonie.

Teraz spójrzmy na ten szablon:

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

Wyświetlamy zmienną title w znaczniku h1 a następnie *ngFor listę pokazującą każdy element tablicy messages za pomocą dyrektywy *ngFor . Dla każdego elementu w tablicy *ngFor tworzy zmienną message , której używamy w elemencie li . Wynik będzie:

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

Krok 7

Teraz tworzymy plik main.ts , który będzie pierwszym plikiem, który przegląda Angular.

Utwórz plik app/main.ts

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

bootstrap(AppComponent);

Importujemy funkcję bootstrap i klasę AppComponent , a następnie używamy bootstrap aby powiedzieć AppComponent , którego komponentu użyć jako root.

Krok 8

Czas uruchomić swoją pierwszą aplikację. Rodzaj

npm start

w konsoli / terminalu. Spowoduje to uruchomienie przygotowanego skryptu z package.json który uruchomi serwer lite, otworzy twoją aplikację w oknie przeglądarki i uruchomi transpiler TypeScript w trybie zegarka (więc pliki .ts zostaną przetransponowane, a przeglądarka odświeży się po zapisaniu zmian) .

Co teraz?

Sprawdź oficjalny przewodnik Angular 2 i inne tematy w dokumentacji StackOverflow .

Możesz także edytować AppComponent aby używać zewnętrznych szablonów, stylów lub dodawać / edytować zmienne komponentu. Powinieneś zobaczyć swoje zmiany natychmiast po zapisaniu plików.

Utrzymywanie synchronizacji Visual Studios z aktualizacjami NPM i NODE

Krok 1: Zlokalizuj pobrany plik Node.js, zazwyczaj jest on instalowany pod C: / program files / nodejs

Krok 2: Otwórz Visual Studios i przejdź do „Narzędzia> Opcje”

Krok 3: W oknie opcji przejdź do „Projekty i rozwiązania> Zewnętrzne narzędzia internetowe”

Krok 4: Dodaj nowy wpis wraz z lokalizacją pliku Node.js (C: / program files / nodejs), WAŻNE użyj przycisków strzałek w menu, aby przenieść odniesienie na górę listy.

Krok 5: Uruchom ponownie program Visual Studios i uruchom instalację npm dla swojego projektu z okna poleceń npm

Dostać się przez tego nieznośnego proxy firmy

Jeśli próbujesz uruchomić witrynę Angular2 na komputerze roboczym z systemem Windows w XYZ MegaCorp, istnieje prawdopodobieństwo, że masz problemy z dostępem przez serwer proxy firmy.

Istnieją (co najmniej) dwa menedżery pakietów, które muszą przejść przez serwer proxy:

1. NPM
2. Wpisy

W przypadku NPM musisz dodać następujące wiersze do pliku .npmrc :

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

W przypadku typów musisz dodać następujące wiersze do pliku .typingsrc :

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

Te pliki prawdopodobnie jeszcze nie istnieją, więc możesz je utworzyć jako puste pliki tekstowe. Można je dodać do katalogu głównego projektu (to samo miejsce co package.json lub można umieścić je w %HOMEPATH% i będą one dostępne dla wszystkich twoich projektów.

Bit, który nie jest oczywisty i jest głównym powodem, dla którego ludzie myślą, że ustawienia proxy nie działają, to %5C który jest kodem URL \ oddzielającym domenę i nazwy użytkowników. Podziękowania dla Steve'a Robertsa za to: Używanie npm za korporacyjnym proxy .pac

Rozpoczęcie pracy z Angular 2 z backendem node.js / expressjs (dołączony przykład http)

Stworzymy prosty „Hello World!” aplikacja z Angular2 2.4.1 (zmiana @NgModule ) z backendem node.js (expressjs).

Wymagania wstępne

• Node.js v4.xx lub nowszy
• npm v3.xx lub wyższy lub przędza

Następnie uruchom npm install -g typescript lub yarn global add typescript aby zainstalować maszynę globalnie

Mapa drogowa

Krok 1

Utwórz nowy folder (i katalog główny naszego zaplecza) dla naszej aplikacji. Nazwijmy to Angular2-express .

wiersz poleceń :

mkdir Angular2-express
cd Angular2-express

Krok 2

Utwórz package.json (dla zależności) i app.js (do ładowania początkowego) dla naszej aplikacji 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 }); 
});

Następnie uruchom npm install lub yarn aby zainstalować zależności.

Teraz nasza struktura zaplecza jest kompletna. Przejdźmy do interfejsu.

Krok 3

Nasz interfejs powinien znajdować się w folderze o nazwie front w folderze Angular2-express .

wiersz poleceń:

mkdir front
cd front

Podobnie jak w przypadku naszego zaplecza, nasz front potrzebuje również plików zależności. Przejdźmy dalej i utwórz następujące pliki: 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/*"
  ]
}

Następnie uruchom npm install lub yarn aby zainstalować zależności.

Teraz, gdy nasze pliki zależności są gotowe. Przejdźmy do naszego 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>

Teraz jesteśmy gotowi do stworzenia naszego pierwszego komponentu. Utwórz folder o nazwie app w naszym folderze front .

wiersz poleceń:

mkdir app
cd app

Zróbmy następujące pliki o nazwach main.ts , app.module.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);
     });
  }
}

Następnie skompiluj pliki maszynopisu do plików javascript. Przejdź o 2 poziomy w górę od bieżącego katalogu (w folderze Angular2-express) i uruchom poniższe polecenie.

wiersz poleceń:

cd ..
cd ..
tsc -p front

Nasza struktura folderów powinna wyglądać następująco:

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

Na koniec w folderze Angular2-express uruchom w node app.js komend polecenie node app.js Otwórz swoją ulubioną przeglądarkę i sprawdź localhost:9999 aby zobaczyć swoją aplikację.

Zanurzmy się w Angular 4!

Angular 4 jest już dostępny! W rzeczywistości Angular używa semver od Angulara 2, co wymaga zwiększenia liczby głównej po wprowadzeniu przełomowych zmian. Zespół Angular przełożył funkcje powodujące przełomowe zmiany, które zostaną wydane w Angular 4. Angular 3 został pominięty, aby móc wyrównać numery wersji podstawowych modułów, ponieważ router miał już wersję 3.

Według zespołu Angular aplikacje Angular 4 będą zajmować mniej miejsca i będą szybsze niż wcześniej. Wydzielili pakiet animacji z pakietu @ angular / core. Jeśli ktoś nie korzysta z pakietu animacji, dodatkowe miejsce w kodzie nie znajdzie się w produkcji. Składnia wiązania szablonów obsługuje teraz składnię stylu if / else. Angular 4 jest teraz kompatybilny z najnowszą wersją Typescript 2.1 i 2.2. Angular 4 będzie więc bardziej ekscytujący.

Teraz pokażę ci, jak skonfigurować Angular 4 w swoim projekcie.

Zacznijmy konfigurację Angular na trzy różne sposoby:

Możesz użyć Angular-CLI (interfejs wiersza poleceń), zainstaluje on wszystkie zależności dla Ciebie.

• Możesz migrować z Angular 2 do Angular 4.

• Możesz użyć github i sklonować płytę kotłową Angular4. (To najłatwiejszy.)

• Konfiguracja kątowa za pomocą Angular-CLI (interfejs wiersza poleceń).

Przed rozpoczęciem korzystania z Angular-CLI, upewnij się, że masz zainstalowany węzeł na swoim komputerze. Tutaj używam węzła v7.8.0. Teraz otwórz terminal i wpisz następujące polecenie dla Angular-CLI.

npm install -g @angular/cli

lub

yarn global add @angular/cli

w zależności od używanego menedżera pakietów.

Zainstalujmy Angular 4 za pomocą Angular-CLI.

ng new Angular4-boilerplate

cd Angular4 -ilerplate Wszyscy jesteśmy gotowi na Angular 4. Jest to dość łatwa i prosta metoda

Konfiguracja kątowa poprzez migrację z Angular 2 do Angular 4

Zobaczmy teraz drugie podejście. Pokażę, jak przeprowadzić migrację Angular 2 do Angular 4. W tym celu musisz sklonować dowolny projekt Angular 2 i zaktualizować zależności Angular 2 za pomocą zależności Angular 4 w pliku package.json w następujący sposób:

"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"
   }

Są to główne zależności dla Angulara 4. Teraz możesz npm zainstalować, a następnie npm rozpocząć uruchomienie aplikacji. W celach informacyjnych mój pakiet.json.

Konfiguracja kątowa z projektu github

Przed rozpoczęciem tego kroku upewnij się, że masz zainstalowany git na swoim komputerze. Otwórz terminal i sklonuj kątowy 4-kocioł za pomocą poniższego polecenia:

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

Następnie zainstaluj wszystkie zależności i uruchom je.

npm install

npm start

I skończyłeś z konfiguracją Angular 4. Wszystkie kroki są bardzo proste, więc możesz wybrać dowolny z nich.

Struktura katalogowa kątowej płyty 4-kotłowej

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 

Podstawowe zrozumienie struktury katalogów:

Cały kod znajduje się w folderze src.

Folder próbny służy do pozorowanych danych używanych do celów testowych.

folder modelu zawiera klasę i interfejs używany w komponencie.

folder modułów zawiera listę komponentów, takich jak aplikacja, login, widżet itp. Wszystkie komponenty zawierają maszynopis, plik HTML i plik CSS. index.ts służy do eksportowania całej klasy.

folder services zawiera listę usług używanych w aplikacji. Oddzieliłem usługę odpoczynku i inną usługę komponentu. W spoczynku usługa zawiera różne metody http. Usługa logowania działa jako mediator między komponentem logowania a usługą odpoczynku.

Plik app.routing.ts opisuje wszystkie możliwe trasy dla aplikacji.

app.module.ts opisuje moduł aplikacji jako składnik root.

bootstrap.ts uruchomi całą aplikację.

folder webpack zawiera plik konfiguracyjny webpack.

Plik package.json dotyczy wszystkich list zależności.

karma zawiera konfigurację karmy dla testu jednostkowego.

node_modules zawiera listę pakietów pakietów.

Zacznijmy od komponentu logowania. W 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>

W 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']);
      });
    }
}

Musimy wyeksportować ten komponent do pliku index.ts.

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

musimy ustawić trasy logowania w app.routes.ts

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

W pliku głównym pliku app.module.ts wystarczy zaimportować ten składnik.

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

a potem instalacja npm i uruchomienie npm. Proszę bardzo! Możesz sprawdzić ekran logowania na swoim lokalnym hoście. W przypadku jakichkolwiek trudności można skierować płytę kątową 4-kotłową.

Zasadniczo czuję mniej budowania pakietu i szybszą reakcję dzięki aplikacji Angular 4 i chociaż znalazłem dokładnie podobny do Angular 2 w kodowaniu.