*IT angular:足跡第六十六步:angular構建前端項目總結

1)安裝angular框架

1.1)安裝node.js

這個跟安裝其它window軟件一樣,從nodejs官方下載最新版,然後雙擊安裝就可以了。
https://nodejs.org/en/

1.2)安裝angular6.0

npm  install  -g  @angular/cli

這樣會全局安裝命令行工具angular cli。

1.3)檢查兩者版本

npm -v
ng -v

2)使用angular6創建自己的新項目

2.1)創建一個帶路由的項目

ng new angularDev -si --routing

-si:就是–skip-install。就是跳過依賴包的安裝過程。
在這裏插入圖片描述

3)運行項目

3.1)安裝項目依賴包

npm install

3.2)啓動項目

ng serve
或
npm start

3.3)訪問localhost:4200

在這裏插入圖片描述

4)路由佈局

4.1)編輯app.component.html

<body>
<a [routerLink]="['/login']">跳轉到login頁</a>
<a [routerLink]="['/home']">跳轉到home頁</a>
// 關鍵
<router-outlet></router-outlet>
</body>

4.1)編輯app-routing.module.ts

// app-routing.module.ts
const routes: Routes = [
  // 默認首頁爲login
  {path: '', redirectTo : '/login', pathMatch : 'full'},
  {path: 'login', component : LoginComponent },
  {path: 'home', component : HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

4.3)編輯app.module.ts

@NgModule({
  // declarations是重點,每個組件都需要declarations自幾
  declarations: [
    AppComponent,
  ],
  // 引入分模塊
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    //新添加組件
    LoginComponent,
    HomeComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4.4)編輯home.component.ts

@Component({
  selector: 'app-homo',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
@NgModule({
  declarations: [ HomeComponent]
})
export class HomeComponent {

}

5)打包

ng build

生成一個dist文件夾,將dist放在服務器上。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章