一、快速搭建环境
1.通过angular-cli快速搭建
2.通过npm install 安装依赖的模块node-module
3.通过npm start 启动项目
二、页面操作
1.变量类型
name:string;
name:string[];
name:Array<string>;
2.父页面向子页面传值(input)
<app-child *ngFor = "left name of names" [name]="name"></app-child>
"name"不是字符串,是变量,将变量的值即for循环中name的值传入到[name]
3.子页面向父页面传参:自定义事件(output)
<products-list (onProductSelected)="productWasSelected($event)"></product-list>
(onProductSelected),即=号左边是我们要监听的输出的名称
"productWasSelected",即=号右边是当有新的输入时我们想要调用的方法;
$event在这里是一个特殊的变量,用来表示输出的内容
4.<input #input1 type="text:">
#input1为对象,表示input的DOM元素,#input1.value表示input输入值
5.在属性值中使用模板字符串,比如在a标签的href属性中:href="{{ link }}"
三、引入第三方组件
primeNg我个人觉得是一款很齐全的UI组件,首先安装组件 npm install primeng --save
1.在组件中导入需要的模块:
import { CalendarModule } from 'primeng/primeng';
2.在组件中引入组件样式:
styles: [
require('primeng/resources/primeng.css'),
require('primeng/resources/primeng.min.css')]
四、angular.js、angular2和angular4的区别
(1)auglar.js属于MVC框架,基于js,而angular2和angular4是MVVM框架,基于ts。
(2)anguar.js只适用于PC端,而angular2有移动端和PC端。
(3)在速度上:anuglar.js < angular2 < angular4
(4)在angular.js中有$rootScope和$scope,在angular2中去除
(5)angular.js采用双向数据流,为了使得数据最终趋向稳定不得不多次检查错综复杂的数据流,angular2数据流是自顶向下,从父 组件向子组件的的单向流动,变化监测树与之相呼应,单项数据量保证变化监测的高效性和可预测性。