Angular 2 Zelfstudie
Aan de slag met Angular 2

Opmerkingen

versies

Installeer angular2 met angular-cli

Dit voorbeeld is een snelle installatie van Angular 2 en hoe u een snel voorbeeldproject kunt genereren.

Vereisten:

• Node.js v4 of hoger.
• npm v3 of hoger of garen .

Open een terminal en voer de opdrachten een voor een uit:

npm install -g @angular/cli

of

yarn global add @angular/cli

afhankelijk van uw keuze van pakketbeheerder.

Met de vorige opdracht wordt @ angular / cli wereldwijd geïnstalleerd en wordt het uitvoerbare bestand ng aan PATH.

Om een nieuw project op te zetten

Navigeer met de terminal naar een map waarin u het nieuwe project wilt instellen.

Voer de opdrachten uit:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Dat is alles, u hebt nu een eenvoudig voorbeeldproject gemaakt met Angular 2. U kunt nu naar de koppeling navigeren die wordt weergegeven in de terminal en zien wat er wordt uitgevoerd.

Toevoegen aan een bestaand project

Navigeer naar de hoofdmap van uw huidige project.

Voer de opdracht uit:

ng init

Hiermee voegt u de nodige steigers aan uw project toe. De bestanden worden in de huidige map gemaakt, dus zorg ervoor dat u deze in een lege map uitvoert.

Het project lokaal uitvoeren

Om uw applicatie te zien en ermee te werken terwijl deze in de browser draait, moet u een lokale ontwikkelingsserver starten die de bestanden voor uw project host.

ng serve

Als de server met succes is gestart, moet deze een adres weergeven waarop de server wordt uitgevoerd. Meestal is dit:

http://localhost:4200

Standaard wordt deze lokale ontwikkelingsserver aangesloten met Hot Module Reloading, dus wijzigingen in de html, typescript of css zorgen ervoor dat de browser automatisch opnieuw wordt geladen (maar kan desgewenst worden uitgeschakeld).

Componenten, richtlijnen, leidingen en services genereren

Met de opdracht ng generate <scaffold-type> <name> (of eenvoudigweg ng g <scaffold-type> <name> ) kunt u automatisch hoekcomponenten genereren:

# 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

Er zijn verschillende mogelijke soorten steigers die angular-cli kan genereren:

U kunt de typenaam ook vervangen door de eerste letter. Bijvoorbeeld:

ng gm my-new-module om een nieuwe ng gm my-new-module te genereren of ng gc my-new-component om een component te maken.

Bouw / Bundeling

Wanneer u klaar bent met het bouwen van uw Angular 2-webapp en u deze wilt installeren op een webserver zoals Apache Tomcat, hoeft u alleen de build-opdracht uit te voeren met of zonder de productievlag ingesteld. Productie zal de code minimaliseren en optimaliseren voor een productie-instelling.

ng build

of

ng build --prod

Zoek vervolgens in de hoofdmap van het project naar een map /dist , die de build bevat.

Als u de voordelen van een kleinere productiebundel wilt, kunt u ook Ahead-of-Time sjablooncompilatie gebruiken, waardoor de sjablooncompiler uit de definitieve build wordt verwijderd:

ng build --prod --aot

Testen van een eenheid

Angular 2 biedt ingebouwde eenheidstests en elk item gemaakt door angular-cli genereert een basiseenheidstest, die kan worden uitgebreid. De eenheidstests zijn geschreven met behulp van jasmijn en uitgevoerd via Karma. Voer de volgende opdracht uit om te beginnen met testen:

ng test

Met deze opdracht worden alle tests in het project uitgevoerd en worden ze opnieuw uitgevoerd telkens wanneer een bronbestand verandert, ongeacht of dit een test of code van de toepassing is.

Voor meer info, bezoek ook: angular-cli github pagina

Aan de slag met Angular 2 zonder angular-cli.

Hoekig 2.0.0-rc.4

In dit voorbeeld maken we een "Hallo wereld!" app met slechts één AppComponent ( AppComponent ) omwille van de eenvoud.

Vereisten:

• Node.js v5 of hoger
• npm v3 of hoger

Opmerking: u kunt versies controleren door node -v en npm -v in de console / terminal.

Stap 1

Maak en voer een nieuwe map in voor uw project. Laten we het angular2-example noemen.

mkdir angular2-example
cd angular2-example

Stap 2

Voordat we beginnen met het schrijven van onze app-code, voegen we de 4 onderstaande bestanden toe: package.json , tsconfig.json , typings.json en systemjs.config.js .

Disclaimer: dezelfde bestanden zijn te vinden in de officiële 5 minuten Quickstart .

package.json - Hiermee kunnen we alle afhankelijkheden downloaden met npm en biedt eenvoudige scriptuitvoering om het leven van eenvoudige projecten gemakkelijker te maken. (U zou in de toekomst moeten overwegen om iets als Gulp te gebruiken om taken te automatiseren).

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

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

typings.json - Zorgt ervoor dat TypeScript de bibliotheken herkent die we gebruiken.

{
  "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 - Configureert SystemJS (u kunt ook webpack gebruiken ).

/**
 * 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);

Stap 3

Laten we de afhankelijkheden installeren door te typen

npm install

in de console / terminal.

Stap 4

Maak index.html in de map 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>

Uw app wordt weergegeven tussen de my-app tags.

Angular weet echter nog steeds niet wat hij moet weergeven. Om dat te vertellen, zullen we AppComponent definiëren.

Stap 5

Maak een submap genaamd app waar we de componenten en services kunnen definiëren waaruit onze app bestaat. (In dit geval bevat het alleen de AppComponent code en main.ts )

mkdir app

Stap 6

Maak het bestand 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"
    ];
}

Wat is er gaande? Eerst importeren we de @Component decorator die we gebruiken om Angular de HTML-tag en sjabloon voor deze component te geven. Dan zijn we het creëren van de klasse AppComponent met title en messages variabelen die we kunnen gebruiken in de sjabloon.

Laten we nu eens kijken naar die sjabloon:

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

We zijn het weergeven van de title variabele in een h1 -tag en dan het maken van een lijst met elk element van de messages -array met behulp van de *ngFor richtlijn. Voor elk element in de array maakt *ngFor een message die we binnen het li element gebruiken. Het resultaat zal zijn:

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

Stap 7

Nu maken we een main.ts bestand, dat het eerste bestand is dat Angular bekijkt.

Maak het bestand app/main.ts

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

bootstrap(AppComponent);

We importeren de bootstrap functie en de AppComponent klasse en gebruiken vervolgens bootstrap om Angular te vertellen welk onderdeel als root moet worden gebruikt.

Stap 8

Het is tijd om je eerste app te starten. Type

npm start

in uw console / terminal. Dit voert een voorbereid script uit package.json dat lite-server start, uw app in een browservenster opent en de TypeScript-transpiler in horlogemodus .ts (zodat .ts bestanden worden weergegeven en de browser wordt vernieuwd wanneer u wijzigingen opslaat) .

Wat nu?

Bekijk de officiële Angular 2-gids en de andere onderwerpen in de documentatie van StackOverflow .

U kunt AppComponent ook bewerken om externe sjablonen, stijlen te gebruiken of componentvariabelen toevoegen / bewerken. U zou uw wijzigingen onmiddellijk moeten zien na het opslaan van bestanden.

Visual Studios synchroon houden met NPM- en NODE-updates

Stap 1: Zoek uw download van Node.js, meestal wordt deze geïnstalleerd onder C: / program files / nodejs

Stap 2: Open Visual Studios en ga naar "Extra> Opties"

Stap 3: Navigeer in het optievenster naar "Projecten en oplossingen> Externe webhulpmiddelen"

Stap 4: voeg een nieuw item toe met uw Node.js-bestandslocatie (C: / programmabestanden / nodejs), BELANGRIJK gebruik de pijlknoppen in het menu om uw verwijzing naar de bovenkant van de lijst te verplaatsen.

Stap 5: Start Visual Studios opnieuw en voer een npm-installatie uit, tegen uw project, vanuit het npm-opdrachtvenster

Door die vervelende bedrijfsproxy komen

Als u probeert een Angular2-site op uw Windows-werkcomputer op XYZ MegaCorp te laten werken, is de kans groot dat u problemen ondervindt om door de proxy van het bedrijf te komen.

Er zijn (minstens) twee pakketbeheerders die door de proxy moeten komen:

1. NPM
2. typeringen

Voor NPM moet u de volgende regels toevoegen aan het .npmrc bestand:

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

Voor typen moet u de volgende regels toevoegen aan het .typingsrc bestand:

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

Deze bestanden bestaan waarschijnlijk nog niet, dus u kunt ze als lege tekstbestanden maken. Ze kunnen worden toegevoegd aan de project root (dezelfde plaats als package.json of u kunt ze in %HOMEPATH% en ze zullen beschikbaar zijn voor al uw projecten.

Het bit dat niet voor de hand ligt en is de belangrijkste reden waarom mensen denken dat de proxy-instellingen niet werken, is de %5C , de URL-codering van de \ om het domein en de gebruikersnamen te scheiden. Dank aan Steve Roberts voor die: npm gebruiken achter zakelijke proxy .pac

Aan de slag met Angular 2 met back-end van node.js / expressjs (inclusief http-voorbeeld)

We maken een eenvoudige "Hallo wereld!" app met Angular2 2.4.1 ( @NgModule wijziging) met een node.js (expressjs) backend.

voorwaarden

• Node.js v4.xx of hoger
• npm v3.xx of hoger of garen

Voer vervolgens npm install -g typescript of yarn global add typescript uit om typescript wereldwijd te installeren

roadmap

Stap 1

Maak een nieuwe map (en de rootmap van onze back-end) voor onze app. Laten we het Angular2-express noemen.

opdrachtregel :

mkdir Angular2-express
cd Angular2-express

Stap 2

Maak de package.json (voor afhankelijkheden) en app.js (voor bootstrapping) voor onze 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 }); 
});

Voer vervolgens een npm install of yarn uit om de afhankelijkheden te installeren.

Nu is onze back-endstructuur voltooid. Laten we doorgaan naar de front-end.

Stap 3

Onze front-end moet zich in een map met de naam front in onze Angular2-express map bevinden.

opdrachtregel:

mkdir front
cd front

Net zoals bij onze back-end heeft onze front-end ook de afhankelijkheidsbestanden nodig. Laten we doorgaan en de volgende bestanden maken: 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/*"
  ]
}

Voer vervolgens een npm install of yarn uit om de afhankelijkheden te installeren.

Nu onze afhankelijkheidsbestanden zijn voltooid. Laten we verder gaan naar onze 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 zijn we klaar om onze eerste component te maken. Maak een map met de naam app in onze front folder.

opdrachtregel:

mkdir app
cd app

Laten we de volgende bestanden maken met de naam 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);
     });
  }
}

Hierna compileert u de typescript-bestanden naar javascript-bestanden. Ga 2 niveaus hoger dan de huidige map (in de map Angular2-express) en voer de onderstaande opdracht uit.

opdrachtregel:

cd ..
cd ..
tsc -p front

Onze mappenstructuur moet er als volgt uitzien:

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

Voer ten slotte in de map Angular2-express de opdracht node app.js uit op de opdrachtregel. Open uw favoriete browser en vink localhost:9999 aan om uw app te zien.

Laten we duiken in Angular 4!

Angular 4 is nu beschikbaar! Eigenlijk maakt Angular gebruik van semver sinds Angular 2, waarvoor het grootste aantal moet worden verhoogd bij het doorvoeren van wijzigingen. Het Angular-team heeft functies die brekende wijzigingen veroorzaken, die met Angular 4 worden uitgegeven, uitgesteld. Angular 3 is overgeslagen om de versienummers van de kernmodules te kunnen afstemmen, omdat de router al versie 3 had.

Volgens het Angular-team zullen Angular 4-applicaties minder ruimte in beslag nemen en sneller zijn dan voorheen. Ze hebben het animatiepakket gescheiden van het @ angular / core-pakket. Als iemand geen animatiepakket gebruikt, komt er dus geen extra coderuimte in de productie terecht. De syntaxis van de sjabloonbinding ondersteunt nu de syntaxis van de stijl if / else. Angular 4 is nu compatibel met de meest recente versie van Typescript 2.1 en 2.2. Dus Angular 4 wordt nog spannender.

Nu zal ik je laten zien hoe je Angular 4 in je project kunt instellen.

Laten we Angular Setup op drie verschillende manieren starten:

U kunt Angular-CLI (opdrachtregelinterface) gebruiken. Hiermee worden alle afhankelijkheden voor u geïnstalleerd.

• U kunt migreren van Angular 2 naar Angular 4.

• Je kunt github gebruiken en de Angular4-boilerplate klonen. (Het is de gemakkelijkste. 😉)

• Hoekinstelling met behulp van Angular-CLI (opdrachtregelinterface).

Voordat u Angular-CLI gaat gebruiken, moet u ervoor zorgen dat u een knooppunt op uw machine hebt geïnstalleerd. Hier gebruik ik node v7.8.0. Open nu uw terminal en typ de volgende opdracht voor Angular-CLI.

npm install -g @angular/cli

of

yarn global add @angular/cli

afhankelijk van de pakketbeheerder die u gebruikt.

Laten we Angular 4 installeren met Angular-CLI.

ng new Angular4-boilerplate

cd Angular4-boilerplate We zijn helemaal klaar voor Angular 4. Het is een vrij gemakkelijke en eenvoudige methode

Hoekinstelling door te migreren van hoek 2 naar hoek 4

Laten we nu de tweede benadering bekijken. Ik zal je laten zien hoe je Angular 2 naar Angular 4 migreert. Daarvoor moet je een Angular 2-project klonen en Angular 2-afhankelijkheden bijwerken met de Angular 4-afhankelijkheid in je package.json als volgt:

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

Dit zijn de belangrijkste afhankelijkheden voor Angular 4. Nu kunt u npm installeren en vervolgens begint npm de toepassing uit te voeren. Ter referentie mijn package.json.

Hoekige opstelling van github-project

Voordat je aan deze stap begint, moet je ervoor zorgen dat git op je machine is geïnstalleerd. Open uw terminal en kloon de angular4-boilerplate met behulp van onderstaande opdracht:

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

Installeer vervolgens alle afhankelijkheden en voer het uit.

npm install

npm start

En u bent klaar met de installatie van Angular 4. Alle stappen zijn heel eenvoudig, dus u kunt ze kiezen.

Directorystructuur van de angular4-boilerplate

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 

Basiskennis voor Directory-structuur:

Alle code bevindt zich in de map src.

mocks map is voor nepgegevens die worden gebruikt voor testdoeleinden.

modelmap bevat de klasse en interface die in de component zijn gebruikt.

modules map bevat een lijst met componenten zoals app, login, widget etc. Alle componenten bevatten typescript, html en css-bestand. index.ts is voor het exporteren van alle klassen.

map services bevat een lijst met services die in de applicatie worden gebruikt. Ik heb een rustservice en een andere componentenservice gescheiden. In rust bevat de service verschillende http-methoden. De inlogservice werkt als bemiddelaar tussen de inlogcomponent en de rustservice.

Het bestand app.routing.ts beschrijft alle mogelijke routes voor de toepassing.

app.module.ts beschrijft app-module als rootcomponent.

bootstrap.ts zal de hele applicatie uitvoeren.

webpack map bevat webpack configuratiebestand.

pakket.json-bestand is voor alle lijst met afhankelijkheden.

karma bevat karma-configuratie voor eenheidstest.

node_modules bevat een lijst met pakketbundels.

Laten we beginnen met login component. In 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>

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

We moeten dit component exporteren naar in index.ts.

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

we moeten routes instellen voor inloggen in app.routes.ts

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

In het root-component, app.module.ts-bestand, hoeft u alleen dat component te importeren.

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

en daarna installeert npm en start npm. Alsjeblieft! U kunt het inlogscherm in uw localhost controleren. In geval van problemen kunt u verwijzen naar de angular4-boilerplate.

Kortom, ik voel me minder bouwpakket en een snellere respons met Angular 4-toepassing en hoewel ik in codering exact vergelijkbaar was met Angular 2.