快速用angular+ng-zorro创建项目

作者: 倪坚强
来源: 51数据库
2021-07-05

创建项目

ng new abc --style css --routing
cd abc
ng add ng-zorro-antd

创建完项目,创建两个组件

ng g c cmp1
ng g c cmp2

在appcomponent中添加 <router-outlet></router-outlet>
在app-routing.module.ts中添加路由

const routes: Routes = [
  { path: '', redirectTo: 'cmp1', pathMatch: 'full' },
  { path: 'cmp1', component: Cmp1Component},
  { path: '**', redirectTo: 'cmp1' }
];

运行项目npm start

引进zorro样式

在组件所在的module中引入NgZorroAntdModule,
在style.css中引用@import "~ng-zorro-antd/ng-zorro-antd.min.css";

参考：https://ng.ant.design/docs/getting-started/zh

部署

用mac OS 自带的web服务器SimpleHTTPServer部署静态网站

$ cd abc/dist/Abc
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

打开http://localhost:8000

推荐阅读

热点文章

Angular中响应式表单的三种更新值方法详析

7 2021-09-05

Angularjs实现下拉框联动的示例代码

7 2021-09-05

详解AngularJS跨页面传值（ui-router）

2 2021-09-05

详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用

3 2021-09-03

angular2路由切换改变页面title的示例代码

4 2021-09-02

Angular2 组件间通过@Input @Output通讯示例

5 2021-09-02

Angularjs中ng-repeat的简单实例

3 2021-09-01

AngularJS 中ui-view传参的实例详解

4 2021-09-01

浅谈Angular路由守卫

4 2021-08-31

详解基于Angular4+ server render(服务端渲染)开发教程

4 2021-08-31