前端，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放在服務器上。