品优购 Angular学习 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo-1 差值表达式</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7 </head>
 8 <body ng-app>
 9     {{1+2}}
10     {{1 > 2}}
11 </body>
12 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo2 双向绑定</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7 </head>
 8 <body ng-app>
 9     <input ng-model="name"><br>
10     <input ng-model="name"><br>
11     {{name}}
12 </body>
13 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo3 初始化指令</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7 </head>
 8 <body ng-app  ng-init="name='黑马程序员'">
 9     <input ng-model="name">{{name}}
10 </body>
11 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo4 控制器和$scope 控制层通过$scope来控制数据</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope) {
12            //定义操作
13             $scope.add = function () {
14                 // return $scope.x + $scope.y;
15                 return parseInt($scope.x) + parseInt($scope.y);
16             }
17         });
18     </script>
19 </head>
20 <body ng-app="demoModule" ng-controller="demoController">
21     x:<input ng-model="x"><br>
22     y:<input ng-model="y"><br>
23     结果：{{add()}}
24 </body>
25 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo5 事件</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope) {
12             $scope.add = function () {
13                 // $scope.result = $scope.x + $scope.y;
14                 $scope.result = parseInt($scope.x) + parseInt($scope.y);
15             }
16         });
17     </script>
18 </head>
19 <body ng-app="demoModule" ng-controller="demoController">
20     x:<input ng-model="x"><br>
21     y:<input ng-model="y"><br>
22     <button ng-click="add()">运算</button>
23     结果：{{result}}
24 </body>
25 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo6 循环</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope) {
12             $scope.names = ["刘备", "孙权", "曹操"];
13         });
14     </script>
15 </head>
16 <body ng-app="demoModule" ng-controller="demoController">
17 <table>
18     <tr ng-repeat="name in names">
19         <td>{{$index}}</td>
20         <td>{{name}}</td>
21     </tr>
22 </table>
23 </body>
24 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo7 循环对象数组</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope) {
12             $scope.userList = [
13                 {"name": "刘备", "country": "蜀", age: 28},
14                 {"name": "曹操", "country": "魏", age: 30},
15                 {"name": "孙权", "country": "吴", age: 25}
16             ];
17         });
18     </script>
19 </head>
20 <body ng-app="demoModule" ng-controller="demoController">
21     <table>
22         <tr ng-repeat="user in userList">
23             <td>{{$index + 1}}</td>
24             <td>{{user.name}}</td>
25             <td>{{user.country}}</td>
26             <td>{{user.age}}</td>
27         </tr>
28     </table>
29 </body>
30 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>angular demo8 内置服务$http</title>
 6     <script src="../plugins/angularjs/angular.min.js"></script>
 7     <script>
 8         //定义模块
 9         var demo = angular.module("demoModule", []);
10         //定义控制器
11         demo.controller("demoController", function ($scope, $http) {
12             $scope.findAll = function () {
13                 //获取用户列表
14                 $http.get("data.json").success(function (data) {
15                    $scope.userList = data;
16                 });
17             }
18         });
19     </script>
20 </head>
21 <body ng-app="demoModule" ng-controller="demoController" ng-init="findAll()">
22 <table>
23     <tr ng-repeat="user in userList">
24         <td>{{$index + 1}}</td>
25         <td>{{user.name}}</td>
26         <td>{{user.country}}</td>
27         <td>{{user.age}}</td>
28     </tr>
29 </table>
30 </body>
31 </html>
1 [
2   {"name": "刘备", "country": "蜀", "age": 28},
3   {"name": "曹操", "country": "魏", "age": 30},
4   {"name": "孙权", "country": "吴", "age": 25}
5 ]

 

posted @ 2019-06-27 19:52  没有理由不会呀  阅读(184)  评论(0)    收藏  举报