好久没写点东西了,毕业刚刚回到上海,就马上出差去了杭州去做app h5的webview开发,用的是ionic3,ionic现在学习还没学完,现在就把自己学到的angular的笔记整理一下。
1. angular 的 nodejs安装
npm install -g angular
npm -g install @angular/cli angular命令行工具安装
用typescript来写node需要引入一个包
npm i @types/node --save
2. angular cli常用的command
ng new 项目名称 新建angular项目
ng g component xxx 生成组件
ng g service xxx 生成服务
3. jquery的使用
其实angular4里可以使用jquery了,不用像angular1里面使用类似jq的元素选择器,不过其中需要一点配置。
- npm安装jq
npm install jquery --save
2.在angular-cli.json 里的app 配置文件里面 的styles、scripts里面添加js或者css的相对路径,就放在app的script里面,里面还有一个框的是bootstrap
- 由于typescript 不认识js的东西,还需要一个 类型描述文件
npm install @types/jquery --save
4. 指令的简单运用
像下面这样一段代码基本即看懂,*ngFor循环数组 ,js的class样式控制用这种[class.xxxx]="xx" 这种方式,普通的变量绑定用{{}}即可
html
<p >
<span *ngFor="let star of stars" class="glyphicon glyphicon-star"
[class.glyphicon-star-empty]="star"></span>
{{rating}}
</p>
ts
@Component({
selector: 'app-stars',
templateUrl: './stars.component.html',
styleUrls: ['./stars.component.css']
})
export class StarsComponent{
private rating: number = 0;
private stars: boolean[];
constructor() { }
}
5. 父组件向子组件传递数据
子组件代码就是上面一段代码,它需要父组件输入一个rating属性,父组件调用子组件,只需在html里面调用子组件的html标签,输入属性用[]扩起来
<app-stars [rating]="product.rating"></app-stars>
输入属性:这种属性绑定 是输入数据的绑定方式
然后子组件里面的代码也需要改一下,将rating设置为输入属性
export class StarsComponent implements OnInit {
@Input() 通过这个input输入标注 声明rating会被父组件输入的属性覆盖
private rating: number = 0;//默认
}