---恢复内容开始---

这里我会把学习过程中碰到的demo与大家分享，由浅入深，逐个分析。

Eg1:入门必备

 1 
 2 
 3     
 4     
 5     
 6     
 7     
24 
25 
26 
27     
28         

29             {{todo.user}}'s To Do List
30             {{todo.items.length}}
31         
32     
33     
34         
35             
36             
37                 Add
38             
39         
40         41            42                43                    44                    45                46            47            48                ng-repeat="item in todo.items"> //常见指令
49                          //实现双向数据绑定
50                    51                52            53        

 

 

 
Description
 
Done
 
 
 

 
 
{{item.action}}
ng-model="item.done" />
 
{{item.done}}
 
 
 
54     
55 
56 
57 
58 

我们可以看到angularJs很适合和bootstrap一起运用,他并不依赖其他类库。

Eg2：稍微有些复杂，对于刚学的同学

 1   
 2 
 3 
 4     
 5     
 6     
 7     
 8     
41 
42 
43     
44         

45             {{todo.user}}'s To Do List
46             ng-class="warningLevel()"  //angularJs指令  用于确定该元素class
47                   ng-hide="incompleteCount() == 0">  //如果为0 则hide
48                 {{incompleteCount()}}
49             
50         
51     
52     
53         
54              ng-model="actionText" />
55             
56                 57                         ng-click="addNewItem(actionText)">Add  //add触发添加事件  参数为actionText
58             
59         
60         61            62                63                    64                    65                66            67            68                69                    70                    71                72            73        

 

 

 
Description
 
Done
 
 
 

 

 
{{item.action}}
 

 
 
 
74     
75 
76 

Eg3：经过上面学习，应该摸清门路了，那么下面就很简单了

  1 
  2 
  3 
  4     
  5     
  6     
  7     
  8    
  9     
 56    
 57    
 58 
 59 
 60     
 61         

 62             {{todo.user}}'s To Do List
 63              64                   ng-hide="incompleteCount() == 0">
 65                 {{incompleteCount()}}
 66             
 67         
 68     
 69     
 70         
 71             
 72             
 73                  74                         ng-click="addNewItem(actionText)">Add
 75             
 76         
 77 
 78          79             80                 81                     82                     83                 84             85             86                 87                         "item in todo.items | checkedItems:showComplete | orderBy:'action'">
 88                     89                     90                 91             92        

 

 

 
Description
 
Done
 
 
 

 
 
{{item.action}}
 

 
 
 
 93 
 94         
 95             ng_model="showComplete"> Show Complete //这里checkbox控制showcomplete的值
 96         
 97     
 98 
 99 
100 

Eg4:发现js写在html里面不太好，有没有。。。

  1 //productController.js  单独的定义module的js文件
  2 angular.module("sportsStore")
  3     .constant("productListActiveClass", "btn-primary")
  4     .constant("productListPageCount", 3)
  5     .controller("productListCtrl", function ($scope, $filter,
  6         productListActiveClass, productListPageCount) {
  7 
  8         var selectedCategory = null;
  9 
 10         $scope.selectedPage = 1;
 11         $scope.pageSize = productListPageCount;
 12 
 13         $scope.selectCategory = function (newCategory) {
 14             selectedCategory = newCategory;
 15             $scope.selectedPage = 1;
 16         }
 17 
 18         $scope.selectPage = function (newPage) {
 19             $scope.selectedPage = newPage;
 20         }
 21 
 22         $scope.categoryFilterFn = function (product) {
 23             return selectedCategory == null ||
 24                 product.category == selectedCategory;
 25         }
 26 
 27         $scope.getCategoryClass = function (category) {
 28             return selectedCategory == category ? productListActiveClass : "";
 29         }
 30 
 31         $scope.getPageClass = function (page) {
 32             return $scope.selectedPage == page ? productListActiveClass : "";
 33         }
 34     });  ---end 
 35 
 36 //sportsStore.js  注意与上面一样module是sportsStore  controller名字不一样而已
 37 angular.module("sportsStore")
 38 .controller("sportsStoreCtrl", function ($scope) {
 39 
 40     $scope.data = {
 41         products: [
 42             {
 43                 name: "Product #1", description: "A product",
 44                 category: "Category #1", price: 100
 45             },
 46             {
 47                 name: "Product #2", description: "A product",
 48                 category: "Category #1", price: 110
 49             },
 50             {
 51                 name: "Product #3", description: "A product",
 52                 category: "Category #2", price: 210
 53             },
 54             {
 55                 name: "Product #4", description: "A product",
 56                 category: "Category #3", price: 202
 57             }]
 58     };
 59 }); --end
 60 
 61 //这里定义了一个过滤功能的模块 customerFilters  共有3个过滤实现
 62 angular.module("customFilters", [])
 63 .filter("unique", function () {   //这里实现过滤重复属性值的功能
 64     return function (data, propertyName) {
 65         if (angular.isArray(data) && angular.isString(propertyName)) {
 66             var results = [];
 67             var keys = {};
 68             for (var i = 0; i < data.length; i++) {
 69                 var val = data[i][propertyName];
 70                 if (angular.isUndefined(keys[val])) {
 71                     keys[val] = true;
 72                     results.push(val);
 73                 }
 74             }
 75             return results;
 76         } else {
 77             return data;
 78         }
 79     }
 80 })
 81 .filter("range", function ($filter) {  //实现了选择页数功能
 82     return function (data, page, size) {
 83         if (angular.isArray(data) && angular.isNumber(page) && angular.isNumber(size)) {
 84             var start_index = (page - 1) * size;
 85             if (data.length < start_index) {
 86                 return [];
 87             } else {
 88                 return $filter("limitTo")(data.splice(start_index), size);
 89             }
 90         } else {
 91             return data;
 92         }
 93     }
 94 })
 95 .filter("pageCount", function () {  //统计页数
 96     return function (data, size) {
 97         if (angular.isArray(data)) {
 98             var result = [];
 99             for (var i = 0; i < Math.ceil(data.length / size) ; i++) { //这样总能取到真是页数
100                 result.push(i);
101             }
102             return result;
103         } else {
104             return data;
105         }
106     }
107 });  -- end
108 
109 
110 
111     
112     
115     
116     
117     
118 
119 
120     
121         SPORTS STORE
122     
123     ng-controller="productListCtrl">
124         
125             126                class="btn btn-block btn-default btn-lg">Home
127             
128                ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg"
129                ng-class="getCategoryClass(item)">
130                 {{item}}
131             
132         
133         
134             135                  ng-repeat="item in data.products | filter:categoryFilterFn | range:selectedPage:pageSize"> //这里比较难理解的是自定义filter和默认filter的区别
136                 

137                     {{item.name}}
138                     
139                         {{item.price | currency}}  //currency是angular自带美元过滤器
140                     
141                 
142                 {{item.description}}
143             
144             
145                 146                    ng-click="selectPage($index + 1)" class="btn btn-default"
147                    ng-class="getPageClass($index + 1)">  //默认的selectedPage==1  所以看是的时候1高亮显示
148                     {{$index + 1}}
149                 
150             
151         
152 
153 

Eg5：怎么样，看过瘾没？好像这里东西挺多的呀，继续搞起。。。

 1 //cart.js  购物车的js文件
 2 angular.module("cart", [])
 3 .factory("cart", function () {
 4 
 5     var cartData = [];
 6 
 7     return {
 8         //添加物品  要判断是否添加的是相同id的物品
 9         addProduct: function (id, name, price) {
10             var addedToExistingItem = false;
11             for (var i = 0; i < cartData.length; i++) {
12                 if (cartData[i].id == id) {
13                     cartData[i].count++;
14                     addedToExistingItem = true;
15                     break;
16                 }
17             }
18             if (!addedToExistingItem) {
19                 cartData.push({
20                     count: 1, id: id, price: price, name: name
21                 });
22             }
23         },
24         //移除产品
25         removeProduct: function (id) {
26             for (var i = 0; i < cartData.length; i++) {
27                 if (cartData[i].id == id) {
28                     cartData.splice(i, 1);
29                     break;
30                 }
31             }
32         },
33 
34         getProducts: function () {
35             return cartData;
36         }
37     }
38 })
39 .directive("cartSummary", function (cart) {  //这是指令 大家可以看我之前的博客
40     return {
41         restrict: "E",
42         templateUrl: "components/cart/cartSummary.html",  //该网页可用controller下的函数
43         controller: function ($scope) {
44 
45             var cartData = cart.getProducts(); //调用服务
46             //计算总价
47             $scope.total = function () {
48                 var total = 0;
49                 for (var i = 0; i < cartData.length; i++) {
50                     total += (cartData[i].price * cartData[i].count);
51                 }
52                 return total;
53             }
54 
55             $scope.itemCount = function () {
56                 var total = 0;
57                 for (var i = 0; i < cartData.length; i++) {
58                     total += cartData[i].count;
59                 }
60                 return total;
61             }
62         }
63     };
64 });

 1 //cartSummary.html  
 2 
 6 
 7 
 8     
 9         Your cart:
10         {{itemCount()}} item(s),
11         {{total() | currency}}
12     
13     Checkout
14 
15 
16 //checkoutController.js
17 angular.module("sportsStore")
18 .controller("cartSummaryController", function ($scope, cart) {
19 
20     $scope.cartData = cart.getProducts();
21 
22     $scope.total = function () {
23         var total = 0;
24         for (var i = 0; i < $scope.cartData.length; i++) {
25             total += ($scope.cartData[i].price * $scope.cartData[i].count);
26         }
27         return total;
28     }
29 
30     $scope.remove = function (id) {
31         cart.removeProduct(id);
32     }
33 });

看到这里是不是觉得angularJs有点不可思议。。。下面可以看下由路由控制的单页面应用是如何实现的。

  1 //app.html
  2 
  3 
  4 
  5     
  6      
 31     
 32     
 33     
 34     
 35     
 36     
 37 
 38 ng-controller="sportsStoreCtrl">
 39     
 40         SPORTS STORE
 41         
 42     
 43     
 44         Error ({{data.error.status}}). The product data was not loaded.
 45         Click here to try again
 46     
 47     
 48 
 49 
 50 
 51 //checkoutSummary.html
 52 
Your cart
 53 
 54 ng-controller="cartSummaryController">
 55 
 56     
 57         There are no products in your shopping cart.
 58         Click here to return to the catalogue //前往productList页面
 59     
 60 
 61     
 62          63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 83 84 85 86 87 88 91 92 93

             

                 

                     
Quantity
                     
Item
                     
Price
                     
Subtotal
                 
             
             

                 

                     
{{item.count}}
                     
{{item.name}}
                     
{{item.price | currency}}
                     
{{ (item.price * item.count) | currency}}
                     

 78                          79                                 class="btn btn-sm btn-warning">
 80                             Remove
 81                         
 82                     
                 
             
             

                 

                     
Total:
                     

 89                         {{total() | currency}}
 90                     
                 
             
         
 94 
 95         
 96             Continue shopping
 97             >Place order now
 98         
 99     
100 
101 
102 //productList.html
103 104      ng-hide="data.error">
105     
106         107            class="btn btn-block btn-default btn-lg">Home
108         109            ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg"
110            ng-class="getCategoryClass(item)">
111             {{item}}
112         
113     
114     
115         116              ng-repeat="item in data.products | filter:categoryFilterFn | range:selectedPage:pageSize">
117             

118                 {{item.name}}
119                 
120                     {{item.price | currency}}
121                 
122             
123             124                     class="btn btn-success pull-right">
125                 Add to cart
126             
127             {{item.description}}
128         
129         
130             131                ng-click="selectPage($index + 1)" class="btn btn-default"
132                ng-class="getPageClass($index + 1)">
133                 {{$index + 1}}
134             
135         
136     
137 

这上面主要是把service，directive和路由结合在一起了，如果搞懂了可以自己做一个页面。

还想看吗  最后再来一个登陆验证的吧！！

  1 //adminController.js  控制用户登录
  2 angular.module("sportsStoreAdmin")
  3 .constant("authUrl", "http://localhost:5500/users/login")
  4 .constant("ordersUrl", "http://localhost:5500/orders")
  5 .controller("authCtrl", function ($scope, $http, $location, authUrl) {
  6 
  7     $scope.authenticate = function (user, pass) {  //验证用户名和密码
  8         $http.post(authUrl, {  //发送请求
  9             username: user,
 10             password: pass
 11         }, {
 12             withCredentials: true
 13         }).success(function (data) {
 14             $location.path("/main");
 15         }).error(function (error) {
 16             $scope.authenticationError = error;
 17         });
 18     }
 19 })
 20 .controller("mainCtrl", function ($scope) {
 21 
 22     $scope.screens = ["Products", "Orders"];
 23     $scope.current = $scope.screens[0];
 24 
 25     $scope.setScreen = function (index) {
 26         $scope.current = $scope.screens[index];
 27     };
 28 
 29     $scope.getScreen = function () {
 30         return $scope.current == "Products"
 31             ? "/views/adminProducts.html" : "/views/adminOrders.html";
 32     };
 33 })
 34 .controller("ordersCtrl", function ($scope, $http, ordersUrl) {
 35 
 36     $http.get(ordersUrl, { withCredentials: true })
 37         .success(function (data) {
 38             $scope.orders = data;
 39         })
 40         .error(function (error) {
 41             $scope.error = error;
 42         });
 43 
 44     $scope.selectedOrder;
 45 
 46     $scope.selectOrder = function (order) {
 47         $scope.selectedOrder = order;
 48     };
 49 
 50     $scope.calcTotal = function (order) {
 51         var total = 0;
 52         for (var i = 0; i < order.products.length; i++) {
 53             total +=
 54                 order.products[i].count * order.products[i].price;
 55         }
 56         return total;
 57     }
 58 });
 59 //admin.login.html  登录页面
 60 
 61 
 62     
 63         Enter your username and password and click Log In to authenticate
 64     
 65 
 66     
 67         Authentication Failed ({{authenticationError.status}}). Try again.
 68     
 69 
 70     

 71         
 72             Username
 73             
 74         
 75         
 76             Password
 77              78                    ng-model="password" required />
 79         
 80         
 81             ng-click="authenticate(username, password)"
 82                     ng-disabled="authForm.$invalid"
 83                     class="btn btn-primary">
 84                 Log In
 85             
 86         
 87     
 88 
 89 
 90 
 91 
 92     
 93     
 94     
 95     
 96     
 97     
 98     
115     
116     
117 
118 
119     
120 
121 

好了，今天就这么多大家好好消化，我也要多看下子。。。

---恢复内容结束---

转载于:https://www.cnblogs.com/yoissee/p/5936426.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！