Angular 2
Angular-cli

Invoering

Maak een lege Angular2-applicatie met angular-cli

Voorwaarden:

• NodeJS: downloadpagina
• npm of garen

Voer de volgende opdrachten uit met cmd vanuit de nieuwe mapmap:

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

Open uw browser op localhost: 4200

Componenten, richtlijnen, leidingen en services genereren

gebruik gewoon uw cmd: u kunt de opdracht ng genereren (of gewoon ng g) gebruiken om hoekige componenten te genereren:

• Component: ng g component my-new-component
• Richtlijn: ng g directive my-new-directive
• Pijp: ng g pipe my-new-pipe
• Service: ng g service my-new-service
• Klasse: ng g class my-new-classt
• Interface: ng g interface my-new-interface
• Enum: ng g enum my-new-enum
• Module: ng g module my-module

Libs van derden toevoegen

In angular-cli.json kunt u de app-configuratie wijzigen.

Als u bijvoorbeeld ng2-bootstrap wilt toevoegen:

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

2. Voeg in angular-cli.json het pad van de bootstrap toe bij node-modules.

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

gebouwd met angular-cli

In angular-cli.json bij outDir key kunt u uw build-directory definiëren;

deze zijn gelijkwaardig

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

en zo zijn deze

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

Tijdens het bouwen kunt u basistag () in uw index.html wijzigen met de optie --base-href your-url.

Stelt basistag href in op / myUrl / in uw index.html

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

Nieuw project met scss / sass als stylesheet

De standaardstijlbestanden die worden gegenereerd en gecompileerd door @angular/cli zijn css .

Als u in plaats daarvan scss wilt gebruiken, genereert u uw project met:

ng new project_name --style=scss

Als je sass wilt gebruiken, genereer je project met:

ng new project_name --style=sass

Stel garen in als standaard pakketbeheerder voor @ angular / cli

Garen is een alternatief voor npm, de standaard pakketbeheerder op @ angular / cli. Als u garen wilt gebruiken als pakketmanager voor @ angular / cli, volgt u deze stappen:

Voorwaarden

• garen ( npm install --global yarn of zie de installatiepagina )
• @ angular / cli ( npm install -g @angular/cli of yarn global add @angular/cli )

Om garen in te stellen als @ angular / cli package manager:

ng set --global packageManager=yarn

Om npm terug te zetten als @ angular / cli package manager:

ng set --global packageManager=npm