前端，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 {
}
4.5)ngif
<div *ngIf="mRes.get('username').errors.required">
必填项，请填写
</div>
5)打包
ng build
生成一个dist文件夹，将dist放在服务器上。
扫一扫
6654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
