码迷，mamicode.com
首页 > 其他好文 > 详细

Angular 入门教程系列 24 Angular 6 + NG-Zorro

时间：2019-01-20 15:05:25      阅读：430      评论：0      收藏：0      [点我收藏+]

标签：manage   ima   index   sdn   manager   ber   yarn   lock   upd   

NG-Zorro发行到1.0版本后，理论上说兼容性考虑地会好一些，可以考虑引入了。因为其需要Angular 6的版本，而Angular 6在本年度5月份左右刚刚发布，而且考虑到rxjs等相关的变化，低版本的要升上来还是有一点点修改和测试的量的，但是早晚要升，从这篇文章开始使用Angular 6 和 Ng-zorro的新版做demo。

准备

软件版本
node v8.11.3
npm v5.6.0
Angular CLI 6.0.8
Package Manager Yarn
rxjs 6.2.1
typescript 2.7.2
ng-zorro 1.2.0

构建demo

构建demo本身非常简单，只需要ng new之后，进行ng add ng-zorro-antd即可

创建demo应用框架

使用cli 创建一个名为ng6demo的框架

liumiaocn:WebstormProjects liumiao$ ng new ng6demo --skip-install
CREATE ng6demo/README.md (1024 bytes)
CREATE ng6demo/angular.json (3557 bytes)
CREATE ng6demo/package.json (1311 bytes)
CREATE ng6demo/tsconfig.json (384 bytes)
CREATE ng6demo/tslint.json (2805 bytes)
CREATE ng6demo/.editorconfig (245 bytes)
CREATE ng6demo/.gitignore (503 bytes)
CREATE ng6demo/src/environments/environment.prod.ts (51 bytes)
CREATE ng6demo/src/environments/environment.ts (631 bytes)
CREATE ng6demo/src/favicon.ico (5430 bytes)
CREATE ng6demo/src/index.html (294 bytes)
CREATE ng6demo/src/main.ts (370 bytes)
CREATE ng6demo/src/polyfills.ts (3194 bytes)
CREATE ng6demo/src/test.ts (642 bytes)
CREATE ng6demo/src/assets/.gitkeep (0 bytes)
CREATE ng6demo/src/styles.css (80 bytes)
CREATE ng6demo/src/browserslist (375 bytes)
CREATE ng6demo/src/karma.conf.js (964 bytes)
CREATE ng6demo/src/tsconfig.app.json (194 bytes)
CREATE ng6demo/src/tsconfig.spec.json (282 bytes)
CREATE ng6demo/src/tslint.json (314 bytes)
CREATE ng6demo/src/app/app.module.ts (314 bytes)
CREATE ng6demo/src/app/app.component.css (0 bytes)
CREATE ng6demo/src/app/app.component.html (1141 bytes)
CREATE ng6demo/src/app/app.component.spec.ts (990 bytes)
CREATE ng6demo/src/app/app.component.ts (207 bytes)
CREATE ng6demo/e2e/protractor.conf.js (752 bytes)
CREATE ng6demo/e2e/src/app.e2e-spec.ts (303 bytes)
CREATE ng6demo/e2e/src/app.po.ts (208 bytes)
CREATE ng6demo/e2e/tsconfig.e2e.json (213 bytes)
    Successfully initialized git.
liumiaocn:WebstormProjects liumiao$
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

使用yarn安装各种依赖, 速度比npm确实是快一些，即使这样，依然需要4分钟

liumiaocn:ng6demo liumiao$ yarn
yarn install v1.7.0
info No lockfile found.
[1/4] ?  Resolving packages...
warning karma-coverage-istanbul-reporter > istanbul-api > istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
[4/4] ?  Building fresh packages...
success Saved lockfile.
?  Done in 244.16s.
liumiaocn:ng6demo liumiao$
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

然后执行ng add ng-zorro-antd，ng add是Angular 6配套出来添加的一个新的命令，其实就是主要就是代替了以前使用package manager进行install并保存到pacakge.json中的动作。

liumiaocn:ng6demo liumiao$ cp package.json package.json.org
liumiaocn:ng6demo liumiao$ ng add ng-zorro-antd
Installing packages for tooling via yarn.
yarn add v1.7.0
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
[3/4] ?  Linking dependencies...
warning " > ng-zorro-antd@1.2.0" has unmet peer dependency "@angular/cdk@^6.0.0".
[4/4] ?  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ ng-zorro-antd@1.2.0
info All dependencies
├─ @angular/cdk@6.4.2
├─ date-fns@1.29.0
└─ ng-zorro-antd@1.2.0
?  Done in 11.77s.
Installed packages for tooling via yarn.
UPDATE package.json (1342 bytes)
UPDATE src/app/app.component.html (276 bytes)
UPDATE angular.json (3697 bytes)
UPDATE src/app/app.module.ts (816 bytes)
liumiaocn:ng6demo liumiao$
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

package.json的区别

liumiaocn:ng6demo liumiao$ diff package.json package.json.org
24d23
<     "ng-zorro-antd": "^1.2.0",
28a28
>     "@angular/compiler-cli": "^6.0.3",
29a30
>     "typescript": "~2.7.2",
31d31
<     "@angular/compiler-cli": "^6.0.3",
46,47c46
<     "tslint": "~5.9.1",
<     "typescript": "~2.7.2"
---
>     "tslint": "~5.9.1"
liumiaocn:ng6demo liumiao$
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

其实只有添加了ng-zorro-antd的1.2.0版本的设定

angular.json

angular.json也是angular 6开始稍微改头换面转为地上的一个文件，ng add之后，zorro将其css加入到了设定的style中

            "styles": [
              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
              "src/styles.css"
            ],
  • 1
  • 2
  • 3
  • 4

app.module.ts文件

与早期的zorro相比这里主要的变化是国际化，其实只是名称和使用方式有了一些变化而已。

liumiaocn:app liumiao$ cat app.module.ts 
import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;

import { AppComponent } from ‘./app.component‘;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations‘;
import { FormsModule } from ‘@angular/forms‘;
import { HttpClientModule } from ‘@angular/common/http‘;
import { NgZorroAntdModule, NZ_I18N, zh_CN } from ‘ng-zorro-antd‘;
import { registerLocaleData } from ‘@angular/common‘;
import zh from ‘@angular/common/locales/zh‘;

registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    NgZorroAntdModule
  ],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
})
export class AppModule { }
liumiaocn:app liumiao$
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

app.component.html

zorro的显示页面变成只是使用一下alicdn上的图片

liumiaocn:app liumiao$ cat app.component.html 
<!-- NG-ZORRO -->
<a href="https://github.com/NG-ZORRO/ng-zorro-antd" target="_blank" style="display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;">
  <img height="300" src="https://img.alicdn.com/tfs/TB1NvvIwTtYBeNjy1XdXXXXyVXa-89-131.svg">
</a>liumiaocn:app liumiao$
  • 1
  • 2
  • 3
  • 4
  • 5

运行

liumiaocn:ng6demo liumiao$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-07-31T22:50:10.882Z
Hash: 1101cbc06dcbc1c73768
Time: 23493ms
chunk {main} main.js, main.js.map (main) 11.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 414 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.67 MB [initial] [rendered]
? ?wdm?: Compiled successfully.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

技术分享图片

参考文章

http://ng.ant.design/docs/introduce/zh#%E7%89%B9%E6%80%A7

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

Angular 入门教程系列 24 Angular 6 + NG-Zorro

标签：manage   ima   index   sdn   manager   ber   yarn   lock   upd   

原文地址：https://www.cnblogs.com/firsttry/p/10294672.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！