Angular 2
Angular-cli

Einführung

Erstellen Sie eine leere Angular2-Anwendung mit angle-cli

Bedarf:

• NodeJS: Download-Seite
• npm oder garn

Führen Sie die folgenden Befehle mit cmd aus dem neuen Ordner aus:

1. npm install -g @angular/cli oder yarn global add @angular/cli
2. ng new PROJECT_NAME
3. cd PROJECT_NAME
4. ng serve

Öffnen Sie Ihren Browser unter localhost: 4200

Komponenten, Richtlinien, Pipes und Services generieren

Verwenden Sie einfach Ihren Befehl: Sie können den Befehl ng generate (oder einfach ng g) verwenden, um Angular-Komponenten zu generieren:

• Komponente: ng g component my-new-component
• Direktive: ng g directive my-new-directive
• Pipe: ng g pipe my-new-pipe
• Service: ng g service my-new-service
• Klasse: ng g class my-new-classt
• Schnittstelle: ng g interface my-new-interface
• ng g enum my-new-enum : ng g enum my-new-enum
• Modul: ng g module my-module

Hinzufügen von Drittanbieter-Bibliotheken

In angle-cli.json können Sie die App-Konfiguration ändern.

Wenn Sie beispielsweise ng2-bootstrap hinzufügen möchten:

1. npm install ng2-bootstrap --save oder npm install ng2-bootstrap --save yarn add ng2-bootstrap

2. Fügen Sie in angle-cli.json einfach den Pfad des Bootstraps bei node-modules hinzu.

   "scripts": [
       "../node_modules/jquery/dist/jquery.js",
       "../node_modules/bootstrap/dist/js/bootstrap.js"
    ]
   

bauen mit eckig-cli

In angle-cli.json unter outDir key können Sie Ihr Build-Verzeichnis definieren.

diese sind gleichwertig

ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

und so sind diese

ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

Beim Erstellen können Sie das Basis-Tag () in Ihrer index.html mit der Option --base-href your-url ändern.

Setzt das Basis-Tag href in Ihrer index.html auf / myUrl /

ng build --base-href /myUrl/
ng build --bh /myUrl/

Neues Projekt mit scss / sass als Stylesheet

Die von @angular/cli generierten und kompilierten @angular/cli sind css .

Wenn Sie stattdessen scss verwenden möchten , generieren Sie Ihr Projekt mit:

ng new project_name --style=scss

Wenn Sie sass verwenden möchten , generieren Sie Ihr Projekt mit:

ng new project_name --style=sass

Legen Sie das Garn als Standardpaketmanager für @ angle / cli fest

Yarn ist eine Alternative für npm, den Standardpaketmanager für @ angle / cli. Wenn Sie Garne als Paketmanager für @ angle / cli verwenden möchten, gehen Sie folgendermaßen vor:

Bedarf

• Garn ( npm install --global yarn oder siehe Installationsseite )
• @ eckig / cli ( npm install -g @angular/cli oder yarn global add @angular/cli )

Garn als @ angle / cli Paketmanager einstellen:

ng set --global packageManager=yarn

Um npm als @ angle / cli-Paketmanager zurückzusetzen:

ng set --global packageManager=npm