angular2路由及笔记（转载）

一、router.navigate的使用
navigate是Router类的一个方法，主要用来跳转路由。
1.this.router.navigate([‘user’, 1]);
以根路由为起点跳转
2.this.router.navigate([‘user’, 1],{relativeTo: route});
默认值为根路由，设置后相对当前路由跳转，route是ActivatedRoute的实例，使用需要导入ActivatedRoute
3.this.router.navigate([‘user’, 1],{ queryParams: { id: 1 } });
路由中传参数 /user/1?id=1
4.this.router.navigate([‘view’, 1], { preserveQueryParams: true });
默认值为false，设为true，保留之前路由中的查询参数/user?id=1 to /view?id=1
5.this.router.navigate([‘user’, 1],{ fragment: ‘top’ });
路由中锚点跳转 /user/1#top
6.this.router.navigate([’/view’], { preserveFragment: true });
默认值为false，设为true，保留之前路由中的锚点/user/1#top to /view#top
7.this.router.navigate([’/user’,1], { skipLocationChange: true });
默认值为false，设为true路由跳转时浏览器中的url会保持不变，但是传入的参数依然有效
8.this.router.navigate([’/user’,1], { replaceUrl: true });
未设置时默认为true，设置为false路由不会进行跳转
二、router.navigate刷新页面问题
造成这个问题一般是因为我们在表单中使用时忘记添加type属性，在表单中，如果忘记给按钮添加属性，会默认为submit
<button (click)=“toDetail()”>detail
toDetail() {
this._router.navigate([’/detail’]);
}
解决方法：
1.添加type
<button type=“button” (click)=“toDetail()”>detail
2.click添加false
<button (click)=“toDetail();false”>detail

修改angular-cli端口号:
1,找到node_modules/angular-cli/lib/config/schema.json
default值就是默认的端口
2,也可以通过命令行方式修改，如：
ng serve --port 4201

Git Bash: userName: 895311883@qq.com password:akb484848
1,cd E:/WebStormWorkSpace/user-demo/user-demo //跳转至目标目录
2,git status //查看文件改动
3, //添加或者更新文件:
git add E:/WebStormWorkSpace/user-demo/user-demo/src/app/user/user-register/user-register.service.ts
git add E:/WebStormWorkSpace/user-demo/user-demo/src/app/user/user-register/user-register.component.ts
git add E:/WebStormWorkSpace/user-demo/user-demo/src/app/user/user-register/user-register.component.html
git add E:/WebStormWorkSpace/user-demo/user-demo/src/app/user/user-login/user-login.service.ts
git add E:/WebStormWorkSpace/user-demo/user-demo/src/app/user/user-login/user-login.component.ts
git add E:/WebStormWorkSpace/user-demo/user-demo/src/app/user/user-login/user-login.component.html
git add E:/WebStormWorkSpace/user-demo/user-demo/src/app/user/forget-pwd/forget-pwd.service.ts
git add E:/WebStormWorkSpace/user-demo/user-demo/src/app/user/forget-pwd/forget-pwd.component.ts
git add E:/WebStormWorkSpace/user-demo/user-demo/src/app/user/forget-pwd/forget-pwd.component.html
4,git commit -m ‘修改初稿’ //提交注释
5,git push origin //远程分支或者master

一. angular-cli.json常见配置

{
“project”: {
“name”: “ng-admin”, //项目名称
“ejected”: false // 标记该应用是否已经执行过eject命令把webpack配置释放出来
},
“apps”: [
{
“root”: “src”, // 源码根目录
“outDir”: “dist”, // 编译后的输出目录，默认是dist/
“assets”: [ // 记录资源文件夹，构建时复制到outDir指定的目录
“assets”,
“favicon.ico”
],
“index”: “index.html”, // 指定首页文件，默认值是"index.html"
“main”: “main.ts”, // 指定应用的入门文件
“polyfills”: “polyfills.ts”, // 指定polyfill文件
“test”: “test.ts”, // 指定测试入门文件
“tsconfig”: “tsconfig.app.json”, // 指定tsconfig文件
“testTsconfig”: “tsconfig.spec.json”, // 指定TypeScript单测脚本的tsconfig文件
“tsconfig”:“tsconfig.app.json”,
“prefix”: “app”, // 使用ng generate命令时，自动为selector元数据的值添加的前缀名
“deployUrl”: “//cdn.com.cn”, // 指定站点的部署地址，该值最终会赋给webpack的output.publicPath，常用于CDN部署
“styles”: [ // 引入全局样式，构建时会打包进来，常用于第三方库引入的样式
“styles.css”
],
“scripts”: [ // 引入全局脚本，构建时会打包进来，常用语第三方库引入的脚本
],
“environmentSource”: “environments/environment.ts”, // 基础环境配置
“environments”: { // 子环境配置文件
“dev”: “environments/environment.ts”,
“prod”: “environments/environment.prod.ts”
}
}
],
“e2e”: {
“protractor”: {
“config”: “./protractor.conf.js”
}
},
“lint”: [
{
“project”: “src/tsconfig.app.json”
},
{
“project”: “src/tsconfig.spec.json”
},
{
“project”: “e2e/tsconfig.e2e.json”
}
],
“test”: {
“karma”: {
“config”: “./karma.conf.js”
}
},
“defaults”: { // 执行ng generate命令时的一些默认值
“styleExt”: “scss”, // 默认生成的样式文件后缀名
“component”: {
“flat”: false, // 生成组件时是否新建文件夹包装组件文件，默认为false（即新建文件夹）
“spec”: true, // 是否生成spec文件，默认为true
“inlineStyle”: false, // 新建时是否使用内联样式，默认为false
“inlineTemplate”: false, // 新建时是否使用内联模板，默认为false
“viewEncapsulation”: “Emulated”, // 指定生成的组件的元数据viewEncapsulation的默认值
“changeDetection”: “OnPush”, // 指定生成的组件的元数据changeDetection的默认值
}
}
}

ng-bootstrap:
1,npm install bootstrap@4.0.0-alpha.2 --save
2,npm install @ng-bootstrap/ng-bootstrap --save
3"styles": [
“…/node_modules/bootstrap/dist/css/bootstrap.min.css”,
“styles.scss”
]
4,修改index.html 文件，关联bootstrap

5,修改 app.component.ts,导入 ng-bootstrap 的指令
//moduleId: module.id,
selector: ‘app’,
providers: [ HTTP_PROVIDERS ],
templateUrl: ‘dist/app.component.html’,
styleUrls: [‘dist/app.component.css’],
// ng-bootstrap required precompile directives
precompile: [NGB_PRECOMPILE],
// add ng-bootstrap directives to app
directives: [
ROUTER_DIRECTIVES, NGB_DIRECTIVES
],
pipes: []
6,NgbAlert 的 selector 是 ngb-alert ， 支持的 Input 有 dismissible 和 type ， Output 有 close
7,在对应的 html 文件中添加 *ngFor 指令， 绑定 alerts 数组：
<p *ngFor=“let alert of alerts”>
<ngb-alert
[type]=“alert.type”
(close)=“closeAlert(alert)”>{{ alert.message }}

① 写一个常量function 将token放在http header的authorization 中
② 依赖注入
③ 引入 angular 的http 服务
④ 封装各类动词的方法在每种请求中都加入 token

之后的所有请求后端都只需要使用自己封装号的这个MyHttp 服务就可以了。

当然登录时需要将token放在localStorage中，注销的时候需要将token移除

教程:
1,npm install -g @angular/cli
2,ng --version
3,ng help
4,ng new 工程名字
5,cd 工程名字
6,ng serve
D3模块：
npm install -g d3 --save
npm install -g @types/d3 --save-dev

npm安装模块

【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；
【npm install -g xxx】利用npm安装全局模块xxx；
本地安装时将模块写入package.json中：

【npm install xxx】安装但不写入package.json；
【npm install xxx –save】 安装并写入package.json的”dependencies”中；
【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中。
npm 删除模块

【npm uninstall xxx】删除xxx模块；
【npm uninstall -g xxx】删除全局模块xxx；

创建相应文件：
ng generate 文件类型 文件名字
文件类型：
cl:class
c:component
d:directive
e:enum
m:module
p:pipe
s:service
命令简化版本：
如：ng g c User

启动预编译,最小化编译:
ng serve --prod --aot

编译命令：
ng build --prod --aot

UI 组件库：
ng2-bootstrap
PrimeNG
Angular_Material2
Ionic

组件库类

PrimeNG：这是我目前看到市面上做得最好的一款，免费的。https://github.com/primefaces/primeng ，内部有在线演示链接。

来自于VmWare的Angular组件库：https://vmware.github.io/clarity/documentation/modals

ng2-bootstrap：bootstrap那一套外观看起来还行，但是组件代码写得可不咋滴，参考一下吧。https://ng-bootstrap.github.io/

Jigsaw：来自ZTE中兴通讯的一款Angular开源组件库，ZTE内部很多大项目都用的，目前外观比较丑一点，组件齐全。https://github.com/rdkmaster/jigsaw

【阿里云的Zorro很快就要出来，Ant Design风格的，期待一下吧。】

开源项目类

ng2-admin:一个非常完整的Angular新版本模板项目，https://github.com/akveo/ng2-admin ，项目里面有在线演示链接

NiceFish（美人鱼）：这是一个系列项目，全面演示了Angular最新版本的各种用法，从桌面端到移动端都有demo，http://git.oschina.net/mumu-osc/NiceFish

一款基于Ionic3的医院挂号系统：https://github.com/stewchicken/hospital-booking

JHipster：一个集成了SpringMVC的开源项目，从前端到后端都集成好的，Java开发者应该会喜欢它，https://jhipster.github.io/

github上面有大量的Angular开源项目，自己要学会搜索哦！

视频教程类

我自己发布的视频教程：https://damoqiongqiu.github.io/videos/index.html

实际上油管上每天都有大量的Angular视频教程出来，你们要学会爬墙才行。

技术文章类

Victor的Blog一定要看的，有很多优质内容：https://vsavkin.com/

关于双向数据绑定原理的一些文章：

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c

到Medium上搜Angular，非常多的技术文章，这也是Angular项目组发布官方文章的地方。https://medium.com

---

此文转载，时间久远，出处无法考证