[TOC] - 这是2017年学习angular的记录, 学了两天之后后面就没有继续进行学习,项目也没有使用到 ## 1,配置环境和应用构建 - @安装nodejs 下载 .msi的安装包 http://www.runoob.com/nodejs/nodejs-install-setup.html - @npm安装 http://www.runoob.com/nodejs/nodejs-npm.html - cnpm淘宝的包管理工具安装 $ npm install -g cnpm --registry=https://registry.npm.taobao.org - //安装cli的管理工具 cnpm install -g @angular/cli 安装angular管理工具 - 设置angular的默认的 ng set --global packageManager=cnpm ``` 创建项目 ng new my-app 进入项目目录启动项目 cd my-app ng serve --open ``` - 访问localhost:4200 就看见程序了哦 - 发布应用: ng build --prod --aot  需要配置路由 ## 2,[日记]使用中遇到的错误 * [ ] 1.2017年11月18日22:43:51 使用cnpm创建新项目失败 ``` Installing packages for tooling via cnpm. × Install fail! Error: UNKNOWN: unknown error, symlink 'e:\work\angular\myng\no de_modules\_tslib@1.8.0@tslib' -> 'e:\work\angular\myng\node_modules\_@angular_h ttp@5.0.2@@angular\http\node_modules\tslib' Error: UNKNOWN: unknown error, symlink 'e:\work\angular\myng\node_modules\_tslib @1.8.0@tslib' -> 'e:\work\angular\myng\node_modules\_@angular_http@5.0.2@@angula r\http\node_modules\tslib' npminstall version: 3.2.1 npminstall args: D:\soft\nodejs\node.exe C:\Users\Administrator\AppData\Roaming\ npm\node_modules\cnpm\node_modules\npminstall\bin\install.js --china --userconfi g=C:\Users\Administrator\.cnpmrc --disturl=https://npm.taobao.org/mirrors/node - -registry=http://registry.npm.taobao.org Package install failed, see above. Package install failed, see above. e:\work\angular> ng set --global packageManager=npm ``` - 解决:  查看npm版本 官方的是5.5 淘宝镜像是5.1 于是器换成原来的npm 就创建成功了.. ## 3,angular的基础使用 ### 使用插值表达式显示组件属性 {{goods.name}} - angular typescript 常量数组对象 const HEROES: Hero[ ] ### 双向绑定 ``` <input [(ngModel)]="goods.name" placeholder="name"> 需要在 module.ts导入表单处理插件 import { FormsModule } from '@angular/forms'; 然后高度angular它正在使用的插件列表 imports: [ BrowserModule, FormsModule ], ``` ### 基础的模板 ``` //遍历数组 , i语句 //循环 把heroes数组中的值 存入hero中 遍历出来 <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> //if语句 <div *ngIf="selectedHero"> 看到我了 </div> ``` ### 父组件和子组件的值传递 `<hero-detail [hero]="selectedHero"></hero-detail>` - 子组件导入输入组件 `import { Component, Input } from '@angular/core'; ` @Input() hero: Hero; //类里面接收参数的属性 表明这是一个输入属性 - 在appmodule中声明新定义的组件 `import { HeroDetailComponent } from './hero-detail.component'; ` declarations: [ AppComponent, HeroDetailComponent ], - 然后添加子组件的选择器的容器 ` <goods-detail [goods]="selectedGood"></goods-detail>` ## 4,开发规范 * 组件的类名应该是大驼峰形式，并且以Component结尾。 因此英雄详情组件的类名是HeroDetailComponent。 * 组件的文件名应该是小写中线形式，每个单词之间用中线分隔，并且以.component.ts结尾。 因此HeroDetailComponent类应该放在hero-detail.component.ts文件中。 我们遵循的文件命名约定是：服务名称的小写形式（基本名），加上.service后缀。 如果服务名称包含多个单词，我们就把基本名部分写成中线形式 (dash-case)。 例如，SpecialSuperHeroService服务应该被定义在special-super-hero.service.ts文件中。 ## 5,服务 主要讲数据源单独封装到方法里面 1.把数据源写入了一个对象中 加入export修饰符 ``` export const GOODSLIST:Goods[]=[{id:3,name:'衣服'}, {id:4,name:'裤子'},{id:5,name:'头发'},{id:6,name:'袜子'} ]; ``` - 告诉系统 这个是数据源 这么创建 - providers: [HeroService] - 构造函数不应该包含复杂的逻辑， - 只要我们实现了 Angular 的 ngOnInit 生命周期钩子，Angular 就会主动调用这个钩子 - 异步获取服务器数据 this.heroService.getHeroes().then(heroes => this.heroes = heroes); ## 6,路由 在app的component的 app.module.ts中 导入程序需要的组件 就可以引入其他组件 Angular 路由器是一个可选的外部 Angular NgModule，名叫[RouterModule](https://angular.cn/api/router/RouterModule)。 路由器包含了多种服务([RouterModule](https://angular.cn/api/router/RouterModule))、多种指令([RouterOutlet](https://angular.cn/api/router/RouterOutlet)、[RouterLink](https://angular.cn/api/router/RouterLink)、[RouterLinkActive](https://angular.cn/api/router/RouterLinkActive))、 和一套配置([Routes](https://angular.cn/api/router/Routes))。我们将先配置路由。 打开index.html，确保它的区顶部有一个元素（或动态生成该元素的脚本）。