angularjs

一、由于最近项目需要使用图表，奇葩的是想用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>

 

 效果：

 

posted @ 2018-11-19 15:32  evil_liu  阅读(195)  评论(0)  编辑  收藏  举报