一、由于最近项目需要使用图表，奇葩的是想用grafana的监控图表，而grafana的前端框架用的是angularjs，被逼无奈学习angularjs。
介绍、angularjs和vue 个人感觉很多共同点，比如数据双向绑定、监听数据变化等等，当然angularjs有自己的东西比如说依赖注入服务、MVC等。大体的思想差不多。
简单做个购物车例子：
1）要求：
1、商品单价
2、数量
3、运费
4、购物总额
5、大于100 免运费。
2）实现
首先导入angularjs。
1 <script src="./angular.min.js"></script> 2 <script src="./angular-route.min.js"></script>
html代码：注意js压缩问题
1 <!DOCTYPE html> 2 <html lang="en" ng-app='testapp'> 3 <!-- 4 ng-app:定义该网页是由angularjs 解析，需要声明；不声明该网页不会被angularjs解析。 5 该属性位置可以在html标签 也可以在其他标签中，看你作用域在哪，哪段代码需要angularjs解析。 6 在angularjs1.3.x之后，需要ng-app声明一个名字。 7 --> 8 <head> 9 <meta charset="UTF-8"> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 11 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 12 <title>test</title> 13 </head> 14 <body> 15 <div ng-controller='shoppingMoney'> 16 <!-- 17 查找器：ng-controller=‘函数名字’ 18 作用域：该标签下调用的属性都将从函数shoppingMoney中查找。 19 --> 20 <h3>{{inpone.title}}</h3> 21 <!-- 22 调用属性：双大括号，属性.属性进行调用，需要注意属性会在函数shoppingMoney进行查找。 23 --> 24 <p>商品单价：<input type="text" ng-model='inpone.money'></p> 25 <!-- 26 数据绑定：ng-model 27 注意后面跟的属性值是属性.属性。 28 --> 29 <p>商品数量：<input type="text" ng-model='inpone.count'></p> 30 <p>商品运费：<input type="text" ng-model='inpone.free'></p> 31 <!-- <p>购物总额：<input type="text" ng-model="sum()"></p> --> 32 <!-- 注意ng-model不能绑定函数。 --> 33 <p>购物总额：{{sum()|currency:'￥'}}</p> 34 <!-- 35 过滤器： 36 1、写法：属性|过滤器。 37 2、作用帮我们进行一些辅助运算。 38 cunrrency:参数 默认是$ 39 传入￥标识RMB。 40 --> 41 </div> 42 <script src="./angular.min.js"></script> 43 <!-- 导入anglularjs --> 44 <script src="./angular-route.min.js"></script> 45 <!-- 导入模块js --> 46 <script> 47 // angular module的写法： 48 // 其中testapp----ng-app的值 49 // shoppingMoney 控制器的绑定的名字 ng-controller 50 // modlue()第二个参数含义是：依赖的模块。 51 // controller：第二参数 主要注意：当我们在压缩js的时候，$scope会被压缩成$s导致我们的注入失败。 52 // 解决方法：第二参数传入数组[] 第一个元素传入字符串$scope,第二个为匿名函数。angular.module( 'testapp',[]).controller( 'shoppingMoney' ,function ($scope)正确写法： 53 angular.module( 'testapp',[]).controller( 'shoppingMoney' ,['$scope',function ($scope) { 54 // 依赖注入:$scope 局部注入；$rootscope全局注入 类似于全局变量。查找顺序和原生js的查找顺序一致。 55 // 注意：angular js 依赖注入，已经规定好了形参的名字，需要写对应的名字才能进行注入对应的属性（属性和函数等。） 56 $scope.inpone={ 57 money:25, 58 count:1, 59 free:5, 60 title:'购物车' 61 }; 62 $scope.sum=function(){ 63 return Number($scope.inpone.money*$scope.inpone.count)+Number($scope.inpone.free); 64 }; 65 //其中$watch： 66 // 参数为三个：args0：监听的值，args1：匿名函数，函数默认有2个参数，参数名字随意如下例子；第一个是newVal：变化之后的值，oldVal。 67 // 如果监听一个对象需要传入一个boolean值：true,表示监听的深度。 68 // 监听某个数据的变化，默认监听一个数据的变化。 69 // 如果是对象的话.返回的整个对象的集合{money: 25, count: "1", free: 5, title: "购物车"} {money: 25, count: "1", free: 0, title: "购物车"} 70 $scope.$watch('inpone',function(newVal,oldVal){ 71 console.log(newVal,oldVal); 72 $scope.inpone.free=Number($scope.inpone.money*$scope.inpone.count)>=100?0:5 73 },true) 74 }]); 75 </script> 76 77 </body> 78 </html>
效果：
