Angular 2
Angular-cli
Szukaj…
Wprowadzenie
Tutaj dowiesz się, jak zacząć od angular-cli, generowania nowego komponentu / usługi / potoku / modułu z angular-cli, dodawania 3 party jak bootstrap, budowania projektu angular.
Utwórz pustą aplikację Angular2 za pomocą angular-cli
Wymagania:
- NodeJS: Strona pobierania
- npm lub przędza
Uruchom następujące polecenia z cmd z nowego folderu katalogu:
-
npm install -g @angular/cli
lubyarn global add @angular/cli
-
ng new PROJECT_NAME
-
cd PROJECT_NAME
-
ng serve
Otwórz przeglądarkę na localhost: 4200
Generowanie komponentów, dyrektyw, rur i usług
po prostu użyj polecenia cmd: Możesz użyć polecenia ng generuj (lub tylko ng), aby wygenerować komponenty kątowe:
- Składnik:
ng g component my-new-component
- Dyrektywa:
ng g directive my-new-directive
- Pipe:
ng g pipe my-new-pipe
- Usługa:
ng g service my-new-service
- Class:
ng g class my-new-classt
- Interfejs:
ng g interface my-new-interface
- Enum:
ng g enum my-new-enum
- Module:
ng g module my-module
Dodawanie bibliotek stron trzecich
W angular-cli.json możesz zmienić konfigurację aplikacji.
Jeśli chcesz dodać na przykład ng2-bootstrap:
npm install ng2-bootstrap --save
lubyarn add ng2-bootstrap
W angular-cli.json wystarczy dodać ścieżkę bootstrap w modułach węzłów.
"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ]
buduj z angular-cli
W angular-cli.json na kluczu outDir możesz zdefiniować katalog kompilacji;
są równoważne
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
i takie też są
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build
Podczas budowania możesz zmodyfikować base tag () w pliku index.html za pomocą opcji --base-href your-url.
Ustawia tag podstawowy href na / myUrl / w pliku index.html
ng build --base-href /myUrl/
ng build --bh /myUrl/
Nowy projekt z scss / sass jako arkuszem stylów
Domyślne pliki stylów generowane i kompilowane przez @angular/cli
to css .
Jeśli zamiast tego chcesz użyć scss , wygeneruj swój projekt za pomocą:
ng new project_name --style=scss
Jeśli chcesz użyć sass , wygeneruj swój projekt za pomocą:
ng new project_name --style=sass
Ustaw przędzę jako domyślny menedżer pakietów dla @ angular / cli
Przędza jest alternatywą dla npm, domyślnego menedżera pakietów na @ angular / cli. Jeśli chcesz użyć przędzy jako menedżera pakietów dla @ angular / cli, wykonaj następujące kroki:
Wymagania
- przędza (
npm install --global yarn
lub zobacz stronę instalacyjną ) - @ angular / cli (
npm install -g @angular/cli
lubyarn global add @angular/cli
)
Aby ustawić przędzę jako menedżera pakietów @ angular / cli:
ng set --global packageManager=yarn
Aby cofnąć npm jako menedżera pakietów angular / cli:
ng set --global packageManager=npm