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 内置服务$httptitle> 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 ]