Angular 2 Handledning
Komma igång med Angular 2

Anmärkningar

versioner

Installera angular2 med angular-cli

Detta exempel är en snabb installation av Angular 2 och hur man skapar ett snabbt exempelprojekt.

förutsättningar:

• Node.js v4 eller högre.
• npm v3 eller högre eller garn .

Öppna en terminal och kör kommandona en efter en:

npm install -g @angular/cli

eller

yarn global add @angular/cli

beroende på ditt val av paketansvarig.

Det föregående kommandot installerar @ angular / cli globalt och lägger till den körbara ng till PATH.

För att ställa in ett nytt projekt

Navigera med terminalen till en mapp där du vill ställa in det nya projektet.

Kör kommandona:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Det är det, du har nu ett enkelt exempelprojekt med Angular 2. Nu kan du navigera till länken som visas i terminalen och se vad den kör.

Lägga till i ett befintligt projekt

Navigera till roten till ditt nuvarande projekt.

Kör kommandot:

ng init

Detta kommer att lägga till nödvändigt byggnadsställning till ditt projekt. Filerna skapas i den aktuella katalogen så se till att köra detta i en tom katalog.

Kör projektet lokalt

För att se och interagera med din applikation medan den körs i webbläsaren måste du starta en lokal utvecklingsserver som är värd för filerna för ditt projekt.

ng serve

Om servern startade framgångsrikt bör den visa en adress där servern körs. Vanligtvis är detta:

http://localhost:4200

Utanför detta är denna lokala utvecklingsserver ansluten till Hot Module Reloading, så eventuella ändringar i html, typscript eller css kommer att göra att webbläsaren laddas om automatiskt (men kan avaktiveras om så önskas).

Generera komponenter, direktiv, rör och tjänster

Med ng generate <scaffold-type> <name> (eller helt enkelt ng g <scaffold-type> <name> ) kan du automatiskt generera vinkelkomponenter:

# 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

Det finns flera möjliga typer av byggnadsställningar vinkel-cli kan generera:

Du kan också ersätta typnamnet med dess första bokstav. Till exempel:

ng gm my-new-module att generera en ny modul eller ng gc my-new-component att skapa en komponent.

Bygg / Bundling

När du är klar med att bygga din Angular 2-webbapp och du vill installera den på en webbserver som Apache Tomcat, behöver du bara köra build-kommandot antingen med eller utan produktionsflaggan. Produktion kommer att minimera koden och optimera för en produktionsinställning.

ng build

eller

ng build --prod

Titta sedan i projektkatalogen för en /dist mapp, som innehåller build.

Om du vill ha fördelarna med ett mindre produktionspaket kan du också använda Ahead-of-Time-mallen sammanställning, som tar bort mallkompilatorn från slutbyggnaden:

ng build --prod --aot

Enhetstestning

Angular 2 tillhandahåller inbyggd enhetstestning, och varje objekt skapat av angular-cli genererar ett grundläggande enhetstest som kan utökas. Enhetstesterna skrivs med jasmine och körs genom Karma. Utför följande kommando för att börja testa:

ng test

Detta kommando kör alla tester i projektet och kommer att köra dem varje gång en källfil ändras, oavsett om det är ett test eller kod från applikationen.

Mer information finns också på: vinkel-cli github-sida

Komma igång med Angular 2 utan vinkel-cli.

Vinkel 2.0.0-rc.4

I det här exemplet skapar vi en "Hej värld!" app med bara en AppComponent ( AppComponent ) för enkelhetens skull.

förutsättningar:

• Node.js v5 eller senare
• npm v3 eller senare

Obs! Du kan kontrollera versioner genom att köra node -v och npm -v i konsolen / terminalen.

Steg 1

Skapa och ange en ny mapp för ditt projekt. Låt oss kalla det angular2-example .

mkdir angular2-example
cd angular2-example

Steg 2

Innan vi börjar skriva vår appkod lägger vi till de fyra filerna som finns nedan: package.json , tsconfig.json , typings.json och systemjs.config.js .

Friskrivningsklausul: Samma filer kan hittas i den officiella 5-minuters snabbstart .

package.json - Tillåter oss att ladda ner alla beroenden med npm och tillhandahåller enkel skriptkörning för att underlätta livet för enkla projekt. (Du bör överväga att använda något som Gulp i framtiden för att automatisera uppgifter).

{
  "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 - Konfigurerar TypeScript-transpileraren.

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

typings.json - Gör att TypeScript känner igen bibliotek som vi använder.

{
  "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 - Konfigurerar SystemJS (du kan också använda 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);

Steg 3

Låt oss installera beroenden genom att skriva

npm install

i konsolen / terminalen.

Steg 4

Skapa index.html inuti 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>

Din ansökan återges mellan my-app taggar.

Men Angular vet fortfarande inte vad jag ska göra. För att berätta det, definierar vi AppComponent .

Steg 5

Skapa en undermapp som heter app där vi kan definiera komponenter och tjänster som utgör vår app. (I det här fallet innehåller den bara AppComponent koden och main.ts )

mkdir app

Steg 6

Skapa 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"
    ];
}

Vad händer? Först importerar vi @Component dekoratören som vi använder för att ge Angular HTML-taggen och mallen för denna komponent. Sedan skapar vi klassen AppComponent med title och messages som vi kan använda i mallen.

Låt oss nu titta på den mallen:

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

Vi visar title variabel i en h1 tagg och sedan göra en lista med varje element i messages arrayen genom att använda *ngFor direktivet. För varje element i arrayen skapar *ngFor en message som vi använder inom li elementet. Resultatet blir:

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

Steg 7

Nu skapar vi en main.ts fil, som kommer att vara den första filen som Angular tittar på.

Skapa app/main.ts

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

bootstrap(AppComponent);

Vi importerar bootstrap funktionen och AppComponent klassen och använder sedan bootstrap att säga Angular vilken komponent som ska användas som root.

Steg 8

Det är dags att avfyra din första app. Typ

npm start

i din konsol / terminal. Detta kör ett förberett skript från package.json som startar lite-server, öppnar din app i ett webbläsarfönster och kör TypeScript-transpileraren i klockläge (så .ts filer transpileras och webbläsaren uppdateras när du sparar ändringar) .

Och nu då?

Kolla in den officiella Angular 2-guiden och de andra ämnena i StackOverflows dokumentation .

Du kan också redigera AppComponent att använda externa mallar, stilar eller lägga till / redigera komponentvariabler. Du bör se dina ändringar omedelbart efter att du har sparat filer.

Håller Visual Studios synkroniserade med NPM- och NODE-uppdateringar

Steg 1: Leta reda på din nedladdning av Node.js, vanligtvis installeras den under C: / programfiler / nodejs

Steg 2: Öppna Visual Studios och navigera till "Verktyg> Alternativ"

Steg 3: I alternativfönstret navigerar du till "Projekt och lösningar> Externa webbverktyg"

Steg 4: Lägg till en ny post med dig Node.js-filplats (C: / programfiler / nodejs). VIKTIGT använd pilknapparna på menyn för att flytta din referens till toppen av listan.

Steg 5: Starta om Visual Studios och kör en npm-installation, mot ditt projekt, från kommandofönstret npm

Komma igenom den irriterande företagsproxy

Om du försöker få en Angular2-webbplats som körs på din Windows-arbetsdator på XYZ MegaCorp är chansen stor att du har problem med att komma igenom företagets proxy.

Det finns (åtminstone) två pakethanterare som behöver komma via proxy:

1. NPM
2. typningar

För NPM måste du lägga till följande rader i .npmrc filen:

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

För typiseringar måste du lägga till följande rader i .typingsrc filen:

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

Dessa filer finns antagligen inte ännu, så du kan skapa dem som tomma textfiler. De kan läggas till projektroten (samma plats som package.json eller så kan du lägga dem i %HOMEPATH% och de kommer att vara tillgängliga för alla dina projekt.

Den bit som inte är uppenbar och är den främsta anledningen till att människor tror att proxyinställningarna inte fungerar är %5C som är URL-kod för \ att separera domänen och användarnamnen. Tack till Steve Roberts för den: Använd npm bakom företagets proxy .pac

Komma igång med Angular 2 med node.js / expressjs backend (http-exemplet ingår)

Vi skapar en enkel "Hello World!" app med Angular2 2.4.1 ( @NgModule ändring) med en node.js (expressjs) backend.

förutsättningar

• Node.js v4.xx eller högre
• npm v3.xx eller högre eller garn

npm install -g typescript eller yarn global add typescript att installera typscript globalt

färdplan

Steg 1

Skapa en ny mapp (och root-backen för vår back-end) för vår app. Låt oss kalla det Angular2-express .

kommandorad :

mkdir Angular2-express
cd Angular2-express

Steg 2

Skapa package.json (för beroenden) och app.js (för bootstrapping) för vår node.js app.

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 en npm install eller yarn att installera beroenden.

Nu är vår bakre struktur slutförd. Låt oss gå vidare till front-enden.

Steg 3

Vår front-end bör vara i en mapp med namnet front i vår Angular2-express mapp.

kommandorad:

mkdir front
cd front

Precis som vi gjorde med vår back-end behöver vår frontend beroendefiler också. Låt oss gå vidare och skapa följande filer: 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 en npm install eller yarn att installera beroenden.

Nu när våra beroendefiler är färdiga. Låt oss gå vidare till vårt 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>

Nu är vi redo att skapa vår första komponent. Skapa en mapp med namnet app i vår front mapp.

kommandorad:

mkdir app
cd app

Låt oss skapa följande filer med namnet 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);
     });
  }
}

Efter detta ska du kompilera typskriptfilerna till javascriptfiler. Gå 2 nivåer upp från den nuvarande dir (inuti Angular2-express-mappen) och kör kommandot nedan.

kommandorad:

cd ..
cd ..
tsc -p front

Vår mappstruktur ska se ut:

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

Slutligen, i Angular2-express-mappen, kör node app.js kommandot i kommandoraden. Öppna din favorit webbläsare och kolla localhost:9999 att se din app.

Låt oss dyka in i Angular 4!

Angular 4 är nu tillgänglig! Faktiskt använder Angular semver sedan Angular 2, vilket kräver att det stora antalet ökas när brytande ändringar infördes. Angular-teamet skjutit upp funktioner som orsakar brytande förändringar, som kommer att släppas med Angular 4. Angular 3 hoppades över för att kunna anpassa versionnumren för kärnmodulerna, eftersom routern redan hade version 3.

Enligt Angular-teamet kommer Angular 4-applikationer att bli mindre utrymmeskrävande och snabbare än tidigare. De har separerat animeringspaketet från @ angular / core-paketet. Om någon inte använder animeringspaket så kommer inte extra kodutrymme att hamna i produktionen. Mallen bindande syntax stöder nu om / annars stil syntax. Angular 4 är nu kompatibel med den senaste versionen av Typescript 2.1 och 2.2. Så kommer Angular 4 att bli mer spännande.

Nu ska jag visa dig hur du gör installationen av Angular 4 i ditt projekt.

Låt oss starta vinkeluppsättningen på tre olika sätt:

Du kan använda Angular-CLI (Command Line Interface), det kommer att installera alla beroenden för dig.

• Du kan migrera från Angular 2 till Angular 4.

• Du kan använda github och klona Angular4-pannplattan. (Det är den enklaste.😉)

• Vinkelinställning med Angular-CLI (kommandoradgränssnitt).

Innan du börjar använda Angular-CLI, se till att du har installerat noden i din maskin. Här använder jag noden v7.8.0. Nu, öppna din terminal och skriv följande kommando för Angular-CLI.

npm install -g @angular/cli

eller

yarn global add @angular/cli

beroende på vilken paketansvarig du använder.

Låt oss installera Angular 4 med hjälp av Angular-CLI.

ng new Angular4-boilerplate

cd Angular4-boilerplate Vi är alla inställda på Angular 4. Dess ganska enkla och okomplicerade metod.😌

Angular Setup genom att migrera från Angular 2 till Angular 4

Nu ska vi se det andra tillvägagångssättet. Jag ska visa dig hur du migrerar Angular 2 till Angular 4. För det måste du klona alla Angular 2-projekt och uppdatera Angular 2-beroenden med Angular 4 Dependency i ditt paket.json enligt följande:

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

Det här är de viktigaste beroenden för Angular 4. Nu kan du installera npm och sedan börja köra applikationen npm. Som referens mitt paket.json.

Vinkeluppsättning från github-projekt

Innan du börjar detta steg måste du se till att du har installerat git i din maskin. Öppna din terminal och klona angular4-pannplattan med kommandot nedan:

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

Installera sedan alla beroenden och kör det.

npm install

npm start

Och du är klar med Angular 4-installationen. Alla steg är mycket okomplicerade så att du kan välja vilken som helst av dem.

Katalogstruktur för den angular4-panna plattan

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 

Grundläggande förståelse för katalogstruktur:

All kod finns i mappen src.

mappen majs är för håldata som används i teständamål.

modellmapp innehåller klassen och gränssnittet som används i komponenten.

modulmapp innehåller en lista över komponenter som app, inloggning, widget etc. Alla komponenter innehåller typscript, html och css-fil. index.ts är för att exportera hela klassen.

servicemapp innehåller en lista över tjänster som används i applikationen. Jag har separerat vilotjänster och olika komponenter. I vilotjänsten innehåller olika http-metoder. Inloggningstjänst fungerar som medlare mellan inloggningskomponent och vilotjänst.

app.routing.ts-filen beskriver alla möjliga rutter för applikationen.

app.module.ts beskriver appmodul som rotkomponent.

bootstrap.ts kör hela applikationen.

webpack-mappen innehåller webbpakke-konfigurationsfilen.

package.json-filen är för alla lista över beroenden.

karma innehåller karma-konfiguration för enhetstest.

node_modules innehåller en lista över paketpaket.

Kan börja med inloggningskomponent. I 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>

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

Vi måste exportera den här komponenten till index.ts.

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

vi måste ställa in rutter för inloggning i app.routes.ts

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

I rotkomponenten, app.module.ts-filen behöver du bara importera den komponenten.

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

och efter det npm installera och npm start. Här har du! Du kan kontrollera inloggningsskärmen i din localhost. I händelse av svårigheter kan du hänvisa till angular4-pannplattan.

I grund och botten kan jag känna mindre byggnadspaket och snabbare respons med Angular 4-applikationen och även om jag tyckte att det var exakt likt Angular 2 i kodning.