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 ]
