angularJs案例汇总
2016-10-07 18:31
267 查看
---恢复内容开始---
这里我会把学习过程中碰到的demo与大家分享，由浅入深，逐个分析。
Eg1:入门必备
我们可以看到angularJs很适合和bootstrap一起运用,他并不依赖其他类库。
Eg2：稍微有些复杂，对于刚学的同学
Eg3：经过上面学习，应该摸清门路了，那么下面就很简单了
Eg4:发现js写在html里面不太好，有没有。。。
Eg5：怎么样，看过瘾没？好像这里东西挺多的呀，继续搞起。。。
看到这里是不是觉得angularJs有点不可思议。。。下面可以看下由路由控制的单页面应用是如何实现的。
这上面主要是把service，directive和路由结合在一起了，如果搞懂了可以自己做一个页面。
还想看吗 最后再来一个登陆验证的吧！！
好了，今天就这么多大家好好消化，我也要多看下子。。。
---恢复内容结束---
这里我会把学习过程中碰到的demo与大家分享，由浅入深，逐个分析。
Eg1:入门必备
1 <html ng-app="todoApp">
2 <head>
3 <title>TO DO List</title>
4 <link href="bootstrap.css" rel="stylesheet" />
5 <link href="bootstrap-theme.css" rel="stylesheet" />
6 <script src="angular.js"></script>
7 <script>
8 //数据模型
9 var model = {
10 user: "Adam",
11 items: [{ action: "Buy Flowers", done: false },
12 { action: "Get Shoes", done: false },
13 { action: "Collect Tickets", done: true },
14 { action: "Call Joe", done: false }]
15 };
16 //定义全局的module []表示不引用其他module
17 var todoApp = angular.module("todoApp", []);
18 //module里面可以定义多个controller 拥有各自的$scope
19 todoApp.controller("ToDoCtrl", function ($scope) {
20 $scope.todo = model;
21 });
22
23 </script>
24 </head>
25
26 <body ng-controller="ToDoCtrl">
27 <div class="page-header">
28 <h1>
29 {{todo.user}}'s To Do List
30 <span class="label label-default">{{todo.items.length}}</span>
31 </h1>
32 </div>
33 <div class="panel">
34 <div class="input-group">
35 <input class="form-control" />
36 <span class="input-group-btn">
37 <button class="btn btn-default">Add</button>
38 </span>
39 </div>
40 <table class="table table-striped">
41 <thead>
42 <tr>
43 <th>Description</th>
44 <th>Done</th>
45 </tr>
46 </thead>
47 <tbody>
48 <tr ng-repeat="item in todo.items"> //常见指令
49 <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done" /></td> //实现双向数据绑定
50 <td>{{item.done}}</td>
51 </tr>
52 </tbody>
53 </table>
54 </div>
55 </body>
56
57
58 </html>我们可以看到angularJs很适合和bootstrap一起运用,他并不依赖其他类库。
Eg2：稍微有些复杂，对于刚学的同学
1 <!DOCTYPE html>
2 <html ng-app="todoApp">
3 <head>
4 <title>TO DO List</title>
5 <link href="bootstrap.css" rel="stylesheet" />
6 <link href="bootstrap-theme.css" rel="stylesheet" />
7 <script src="angular.js"></script>
8 <script>
9
10 var model = {
11 user: "Adam",
12 items: [{ action: "Buy Flowers", done: false },
13 { action: "Get Shoes", done: false },
14 { action: "Collect Tickets", done: true },
15 { action: "Call Joe", done: false }]
16 };
17
18 var todoApp = angular.module("todoApp", []);
19
20 todoApp.controller("ToDoCtrl", function ($scope) {
21 $scope.todo = model;
22 //在该scope下定义函数 计算未完成的count
23 $scope.incompleteCount = function () {
24 var count = 0;
25 angular.forEach($scope.todo.items, function (item) {
26 if (!item.done) { count++ }
27 });
28 return count;
29 }
30
31 $scope.warningLevel = function () {
32 return $scope.incompleteCount() < 3 ? "label-success" : "label-warning"; //count<3 className="label-success"
33 }
34 //该函数用于添加新事项
35 $scope.addNewItem = function (actionText) {
36 $scope.todo.items.push({ action: actionText, done: false });
37 }
38 });
39
40 </script>
41 </head>
42 <body ng-controller="ToDoCtrl">
43 <div class="page-header">
44 <h1>
45 {{todo.user}}'s To Do List
46 <span class="label label-default" ng-class="warningLevel()" //angularJs指令 用于确定该元素class
47 ng-hide="incompleteCount() == 0"> //如果为0 则hide
48 {{incompleteCount()}}
49 </span>
50 </h1>
51 </div>
52 <div class="panel">
53 <div class="input-group">
54 <input class="form-control" ng-model="actionText" />
55 <span class="input-group-btn">
56 <button class="btn btn-default"
57 ng-click="addNewItem(actionText)">Add</button> //add触发添加事件 参数为actionText
58 </span>
59 </div>
60 <table class="table table-striped">
61 <thead>
62 <tr>
63 <th>Description</th>
64 <th>Done</th>
65 </tr>
66 </thead>
67 <tbody>
68 <tr ng-repeat="item in todo.items">
69 <td>{{item.action}}</td>
70 <td><input type="checkbox" ng-model="item.done" /></td>
71 </tr>
72 </tbody>
73 </table>
74 </div>
75 </body>
76 </html>Eg3：经过上面学习，应该摸清门路了，那么下面就很简单了
1 <!DOCTYPE html>
2 <html ng-app="todoApp">
3 <head>
4 <title>TO DO List</title>
5 <link href="bootstrap.css" rel="stylesheet" />
6 <link href="bootstrap-theme.css" rel="stylesheet" />
7 <script src="angular.js"></script>
8
9 <script>
10 var model = {
11 user: "Adam"
12 };
13
14 var todoApp = angular.module("todoApp", []);
15 //这里的$http相当于ajax服务 调用时用run
16 todoApp.run(function ($http) {
17 $http.get("todo.json").success(function (data) {
18 model.items = data; //从json文件中接收数据到model
19 });
20 });
21
22 todoApp.filter("checkedItems", function () { //这里定义了一个过滤器checkedItems
23 return function (items, showComplete) {
24 var resultArr = [];
25 angular.forEach(items, function (item) {
26
27 if (item.done == false || showComplete == true) {
28 resultArr.push(item); //item是未完成事项 或 showComplete == true时放入
29 }
30 });
31 return resultArr;
32 }
33 });
34
35 todoApp.controller("ToDoCtrl", function ($scope) {
36 $scope.todo = model;
37
38 $scope.incompleteCount = function () {
39 var count = 0;
40 angular.forEach($scope.todo.items, function (item) {
41 if (!item.done) { count++ }
42 });
43 return count;
44 }
45
46 $scope.warningLevel = function () {
47 return $scope.incompleteCount() < 3 ? "label-success" : "label-warning";
48 }
49
50 $scope.addNewItem = function(actionText) {
51 $scope.todo.items.push({ action: actionText, done: false});
52 }
53
54 });
55 </script>
56
57
58 </head>
59 <body ng-controller="ToDoCtrl">
60 <div class="page-header">
61 <h1>
62 {{todo.user}}'s To Do List
63 <span class="label label-default" ng-class="warningLevel()"
64 ng-hide="incompleteCount() == 0">
65 {{incompleteCount()}}
66 </span>
67 </h1>
68 </div>
69 <div class="panel">
70 <div class="input-group">
71 <input class="form-control" ng-model="actionText" />
72 <span class="input-group-btn">
73 <button class="btn btn-default"
74 ng-click="addNewItem(actionText)">Add</button>
75 </span>
76 </div>
77
78 <table class="table table-striped">
79 <thead>
80 <tr>
81 <th>Description</th>
82 <th>Done</th>
83 </tr>
84 </thead>
85 <tbody>
86 <tr ng-repeat=
87 "item in todo.items | checkedItems:showComplete | orderBy:'action'">
88 <td>{{item.action}}</td>
89 <td><input type="checkbox" ng-model="item.done" /></td>
90 </tr>
91 </tbody>
92 </table>
93
94 <div class="checkbox-inline">
95 <label><input type="checkbox" ng_model="showComplete"> Show Complete</label> //这里checkbox控制showcomplete的值
96 </div>
97 </div>
98
99 </body>
100 </html>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 <html ng-app="sportsStore">
110 <head>
111 <title>SportsStore</title>
112 <script>
113 angular.module("sportsStore", ["customFilters"]); //customFilters是依赖模块
114 </script>
115 <script src="controllers/sportsStore.js"></script>
116 <script src="filters/customFilters.js"></script>
117 <script src="controllers/productListControllers.js"></script>
118 </head>
119 <body ng-controller="sportsStoreCtrl">
120 <div class="navbar navbar-inverse">
121 <a class="navbar-brand" href="#">SPORTS STORE</a>
122 </div>
123 <div class="panel panel-default row" ng-controller="productListCtrl">
124 <div class="col-xs-3">
125 <a ng-click="selectCategory()"
126 class="btn btn-block btn-default btn-lg">Home</a>
127 <a ng-repeat="item in data.products | orderBy:'category' | unique:'category'" //种类不允许重复
128 ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg"
129 ng-class="getCategoryClass(item)">
130 {{item}}
131 </a>
132 </div>
133 <div class="col-xs-8">
134 <div class="well"
135 ng-repeat="item in data.products | filter:categoryFilterFn | range:selectedPage:pageSize"> //这里比较难理解的是自定义filter和默认filter的区别
136 <h3>
137 <strong>{{item.name}}</strong>
138 <span class="pull-right label label-primary">
139 {{item.price | currency}} //currency是angular自带美元过滤器
140 </span>
141 </h3>
142 <span class="lead">{{item.description}}</span>
143 </div>
144 <div class="pull-right btn-group">
145 <a ng-repeat="page in data.products | filter:categoryFilterFn | pageCount:pageSize" //分页的显示
146 ng-click="selectPage($index + 1)" class="btn btn-default"
147 ng-class="getPageClass($index + 1)"> //默认的selectedPage==1 所以看是的时候1高亮显示
148 {{$index + 1}}
149 </a>
150 </div>
151 </div>
152 </body>
153 </html>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 <style>
3 .navbar-right { float: right !important; margin-right: 5px; }
4 .navbar-text { margin-right: 10px; }
5 </style>
6
7 <div class="navbar-right">
8 <div class="navbar-text">
9 <b>Your cart:</b>
10 {{itemCount()}} item(s),
11 {{total() | currency}}
12 </div>
13 <a href="#/checkout" class="btn btn-default navbar-btn">Checkout</a>
14 </div>
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 <!DOCTYPE html>
3 <html ng-app="sportsStore">
4 <head>
5 <title>SportsStore</title>
6 <script>
7 angular.module("sportsStore", ["customFilters", "cart", "ngRoute"]) //引进所依赖的模块 ngRoute是路由
8 .config(function ($routeProvider) {
9
10 $routeProvider.when("/complete", {
11 templateUrl: "/views/thankYou.html"
12 });
13
14 $routeProvider.when("/placeorder", {
15 templateUrl: "/views/placeOrder.html"
16 });
17
18 $routeProvider.when("/checkout", {
19 templateUrl: "/views/checkoutSummary.html"
20 });
21
22 $routeProvider.when("/products", {
23 templateUrl: "/views/productList.html"
24 });
25
26 $routeProvider.otherwise({ //默认失去产品详细页面
27 templateUrl: "/views/productList.html"
28 });
29 });
30 </script>
31 <script src="controllers/sportsStore.js"></script>
32 <script src="filters/customFilters.js"></script>
33 <script src="controllers/productListControllers.js"></script>
34 <script src="components/cart/cart.js"></script>
35 <script src="ngmodules/angular-route.js"></script>
36 <script src="controllers/checkoutControllers.js"></script>
37 </head>
38 <body ng-controller="sportsStoreCtrl">
39 <div class="navbar navbar-inverse">
40 <a class="navbar-brand" href="#">SPORTS STORE</a>
41 <cart-summary />
42 </div>
43 <div class="alert alert-danger" ng-show="data.error">
44 Error ({{data.error.status}}). The product data was not loaded.
45 <a href="/app.html" class="alert-link">Click here to try again</a>
46 </div>
47 <ng-view />
48 </body>
49 </html>
50
51 //checkoutSummary.html
52 <h2>Your cart</h2>
53
54 <div ng-controller="cartSummaryController">
55
56 <div class="alert alert-warning" ng-show="cartData.length == 0">
57 There are no products in your shopping cart.
58 <a href="#/products" class="alert-link">Click here to return to the catalogue</a> //前往productList页面
59 </div>
60
61 <div ng-hide="cartData.length == 0">
62 <table class="table">
63 <thead>
64 <tr>
65 <th>Quantity</th>
66 <th>Item</th>
67 <th class="text-right">Price</th>
68 <th class="text-right">Subtotal</th>
69 </tr>
70 </thead>
71 <tbody>
72 <tr ng-repeat="item in cartData">
73 <td class="text-center">{{item.count}}</td>
74 <td class="text-left">{{item.name}}</td>
75 <td class="text-right">{{item.price | currency}}</td>
76 <td class="text-right">{{ (item.price * item.count) | currency}}</td>
77 <td>
78 <button ng-click="remove(item.id)"
79 class="btn btn-sm btn-warning">
80 Remove
81 </button>
82 </td>
83 </tr>
84 </tbody>
85 <tfoot>
86 <tr>
87 <td colspan="3" class="text-right">Total:</td>
88 <td class="text-right">
89 {{total() | currency}}
90 </td>
91 </tr>
92 </tfoot>
93 </table>
94
95 <div class="text-center">
96 <a class="btn btn-primary" href="#/products">Continue shopping</a>
97 <a class="btn btn-primary" href="#/placeorder">Place order now</a>
98 </div>
99 </div>
100 </div>
101
102 //productList.html
103 <div class="panel panel-default row" ng-controller="productListCtrl"
104 ng-hide="data.error">
105 <div class="col-xs-3">
106 <a ng-click="selectCategory()"
107 class="btn btn-block btn-default btn-lg">Home</a>
108 <a ng-repeat="item in data.products | orderBy:'category' | unique:'category'"
109 ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg"
110 ng-class="getCategoryClass(item)">
111 {{item}}
112 </a>
113 </div>
114 <div class="col-xs-8">
115 <div class="well"
116 ng-repeat="item in data.products | filter:categoryFilterFn | range:selectedPage:pageSize">
117 <h3>
118 <strong>{{item.name}}</strong>
119 <span class="pull-right label label-primary">
120 {{item.price | currency}}
121 </span>
122 </h3>
123 <button ng-click="addProductToCart(item)"
124 class="btn btn-success pull-right">
125 Add to cart
126 </button>
127 <span class="lead">{{item.description}}</span>
128 </div>
129 <div class="pull-right btn-group">
130 <a ng-repeat="page in data.products | filter:categoryFilterFn | pageCount:pageSize"
131 ng-click="selectPage($index + 1)" class="btn btn-default"
132 ng-class="getPageClass($index + 1)">
133 {{$index + 1}}
134 </a>
135 </div>
136 </div>
137 </div>这上面主要是把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 <div class="well" ng-controller="authCtrl">
61
62 <div class="alert alert-info" ng-hide="authenticationError">
63 Enter your username and password and click Log In to authenticate
64 </div>
65
66 <div class="alert alert-danger" ng-show="authenticationError">
67 Authentication Failed ({{authenticationError.status}}). Try again.
68 </div>
69
70 <form name="authForm" novalidate>
71 <div class="form-group">
72 <label>Username</label>
73 <input name="username" class="form-control" ng-model="username" required />
74 </div>
75 <div class="form-group">
76 <label>Password</label>
77 <input name="password" type="password" class="form-control"
78 ng-model="password" required />
79 </div>
80 <div class="text-center">
81 <button ng-click="authenticate(username, password)"
82 ng-disabled="authForm.$invalid"
83 class="btn btn-primary">
84 Log In
85 </button>
86 </div>
87 </form>
88 </div>
89
90 <html ng-app="sportsStoreAdmin">
91 <head>
92 <title>Administration</title>
93 <script src="angular.js"></script>
94 <script src="ngmodules/angular-route.js"></script>
95 <script src="ngmodules/angular-resource.js"></script>
96 <link href="bootstrap.css" rel="stylesheet" />
97 <link href="bootstrap-theme.css" rel="stylesheet" />
98 <script>
99 angular.module("sportsStoreAdmin", ["ngRoute", "ngResource"])
100 .config(function ($routeProvider) {
101
102 $routeProvider.when("/login", {
103 templateUrl: "/views/adminLogin.html"
104 });
105
106 $routeProvider.when("/main", {
107 templateUrl: "/views/adminMain.html"
108 });
109
110 $routeProvider.otherwise({
111 redirectTo: "/login"
112 });
113 });
114 </script>
115 <script src="controllers/adminControllers.js"></script>
116 <script src="controllers/adminProductController.js"></script>
117 </head>
118 <body>
119 <ng-view />
120 </body>
121 </html>好了，今天就这么多大家好好消化，我也要多看下子。。。
---恢复内容结束---
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于angularJs各种知识点的汇总，及小案例
- AngularJS路由代码案例
- AngularJS表单验证开发案例
- angularjs入门案例 新玩具-中午吃神马
- angularjs经典小案例
- 各种STM32连接机智云案例汇总（不定期更新，欢迎补充）
- Jquery和angularjs获取check框选中的值的方法汇总
- AngularJS数据源的多种获取方式汇总
- 订单案例—angularjs
- 对一个前端AngularJS,后端OData,ASP.NET Web API案例的理解
- Angularjs基础知识及示例汇总
- AngularJS案例：简单计算
- ES业界优秀实践案例汇总
- AngularJS实现元素显示和隐藏的几个案例
- AngularJS 中 CheckBox的简单案例
- AngularJs解决跨域问题案例详解(简单方法)
- AngularJs实现商品购物车综合案例完整
- AngularJS框架知识点汇总
- 使用Protractor进行AngularJS e2e测试案例
- angularJS学习资源最全汇总