Angular基礎學習一

創建項目

第一種：ng new 項目名

第二種：ng new 項目名 --skip-install

進入到項目目錄：cnpm install

這種方式要比第一種速度快很多，用cnpm的方式安裝。

---

運行項目

ng serve  正常啓動，http://localhost:4200/

ng serve --open 啓動並在瀏覽器裏打開項目

ng serve --port 4201 指定端口運行項目

---

組件

創建組件：ng g component components/header

使用組件：<header></header>，引入selector中對應的名字

---

服務

創建服務：ng g service services/storage

使用服務
            app.module.ts 裏面引入創建的服務
                import { StorageService } from './services/storage.service';
            NgModule 裏面的 providers 裏面依賴注入服務
                providers: [StorageService],
            構造方法中聲明
            constructor(public firstService:FirstServiceService) { }

    通過firstService就可以使用服務了   

---

 

 

路由

在routing文件中進行配置，一個路由對應了一個組件

Routes = [{ path:"",component: TestComponent ];

html文件中使用routerLink應用路由

---

模塊

ng g module modules/user --routing    
加載模塊：
    1.現在app-routing.module根組件中 加入路由
        Routes = [
            { path : "user",loadChildren: "./module/user/user.module#UserModule" } ]  ，這樣就完成了模塊的添加。

    2.配置加入模塊的 module文件

模塊會有兩個文件，一個是module.ts文件，在這裏引入要用到的組件，declarations: [TestComponent]

一個是routing文件，在這裏配置該模塊的路由。