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

一、快速搭建环境

1.通过angular-cli快速搭建

2.通过npm  install 安装依赖的模块node-module

3.通过npm start 启动项目

二、页面操作

1.变量类型

  name:string;

  name:string[];

  name:Array;

2.父页面向子页面传值(input)

  "name"不是字符串&＃xff0c;是变量&＃xff0c;将变量的值即for循环中name的值传入到[name]

3.子页面向父页面传参:自定义事件(output)

   (onProductSelected)&＃xff0c;即&＃61;号左边是我们要监听的输出的名称

   "productWasSelected"&＃xff0c;即&＃61;号右边是当有新的输入时我们想要调用的方法&＃xff1b;

   $event在这里是一个特殊的变量&＃xff0c;用来表示输出的内容

4.

  #input1为对象&＃xff0c;表示input的DOM元素&＃xff0c;#input1.value表示input输入值

5.在属性值中使用模板字符串&＃xff0c;比如在a标签的href属性中&＃xff1a;href&＃61;"{{ link }}"

三、引入第三方组件

primeNg我个人觉得是一款很齐全的UI组件,首先安装组件  npm install primeng --save

1.在组件中导入需要的模块&＃xff1a;

import { CalendarModule } from &＃39;primeng/primeng&＃39;;

2.在组件中引入组件样式&＃xff1a;

styles: [require(&＃39;primeng/resources/primeng.css&＃39;),require(&＃39;primeng/resources/primeng.min.css&＃39;)]

四、angular.js、angular2和angular4的区别

(1)auglar.js属于MVC框架&＃xff0c;基于js,而angular2和angular4是MVVM框架&＃xff0c;基于ts。

(2)anguar.js只适用于PC端&＃xff0c;而angular2有移动端和PC端。

(3)在速度上&＃xff1a;anuglar.js

(4)在angular.js中有$rootScope和$scope,在angular2中去除

(5)angular.js采用双向数据流&＃xff0c;为了使得数据最终趋向稳定不得不多次检查错综复杂的数据流,angular2数据流是自顶向下&＃xff0c;从父      组件向子组件的的单向流动&＃xff0c;变化监测树与之相呼应&＃xff0c;单项数据量保证变化监测的高效性和可预测性。