angular.js 、angular2和angular4的区别，以及angular4后台管理系统搭建过程总结

一、快速搭建环境

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数据流是自顶向下，从父      组件向子组件的的单向流动，变化监测树与之相呼应，单项数据量保证变化监测的高效性和可预测性。