angularjs入门
*******************************重要*********************************
angularJS是通过操作json对象，来操作页面元素的前端框架
$event:使用
自定义服务
|
|
angularJS的继承
|
先定义父类controller——————>baseController
|
一、四大特性
|
MVC |
双向数据绑定 |
依赖注入 |
模块化开发 |
|
M: Model:数据,其实就是angular变量($scope.XX); 1.ng-model:绑定变量到$scope 2.获取：$scope.变量名 3.{{变量名}} 上面三个任何一个改变， 其他两个都将改变
V: View:数据的现, Html+Directive(指令); ng-bind/{{}}，{{}}是ng-bind的简写
C: Controller:操作数据,就是function,数据的增删改查;
|
|
function($http,$scope){ //注入$http,$scope } |
1)官方提供的模块 ng、ngRoute、ngAnimate 2)用户自定义的模块 angular.module('模块名',[ ]) |
二、angularJS使用步骤：
|
1.声明
2.初始化：
|
|
分层使用（企业常用）
|
三、angularJS的demo
|
1.angular表达式 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/angular.min.js"></script> </head> <!--必须添加ng-app指令，angular引擎才能生效 表达式的写法是{{表达式 }} 表达式可以是变量或是运算式 ng-app 指令定义了 AngularJS 应用程序的 根元素。 --> <body ng-app> <h3>angular表达式</h3> {{200+100}} </body> </html>
|
|
2.angular双向绑定 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> </head> <!-- ng-model指令用于绑定变量，这样用户在文本内框输入的内容会绑定到变量上 表达式可以实时输出变量 --> <body ng-app> 请输入姓名：<input ng-model="name"/> {{name}} </body> </html>
|
|
03 angular初始化指令 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> </head> <!--ng-init 页面加载时，初始化变量/或者函数 --> <body ng-app="" ng-init="name = '吴特刚'"> 请输入<input ng-model="name" /> {{name}}
</body> </html>
|
|
04 angular控制器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script> /* * 定义模块 * 参数一：模块名(myApp) * 参数二：[]数组，引用其他模块 */ var app = angular.module('myApp',[]); /** * 创建控制器 * 参数一：控制器名(myController) * 参数二：function,里面定义控制器的方法 * $scope:控制层与视图层交换数据的桥梁 */ app.controller('myController',function($scope){ $scope.add = function(){ return parseInt($scope.x)+parseInt($scope.y); }
})
</script> </head> <body ng-app="myApp" ng-controller="myController"> 第一个数：<input ng-model="x" /> 第二个数：<input ng-model="y"/> {{add()}} </body> </html>
|
|
05 angular事件指令 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script> /* * 定义模块 * 参数一：模块名(myApp) * 参数二：[]数组，引用其他模块 */ var app = angular.module('myApp',[]); /** * 创建控制器 * 参数一：控制器名(myController) * 参数二：function,里面定义控制器的方法 * $scope:控制层与视图层交换数据的桥梁 * z：在控制层和视图层都可以使用 */ app.controller('myController',function($scope){ $scope.add = function(){ $scope.z = parseInt($scope.x)+parseInt($scope.y); }
})
</script> </head> <body ng-app="myApp" ng-controller="myController" ng-init="z = '0'"> 第一个数：<input ng-model="x" /> 第二个数：<input ng-model="y"/> 第三个数Z：{{z}} <!--绑定单击事件--> <button ng-click="add()">相加</button> </body> </html>
|
|
06 angular循环普通数组 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script> //定义模块 var app = angular.module('myApp', []); //定义控制器 app.controller('myController', function($scope) { $scope.list = [100, 101, 102, 103, 104, 105]; }) </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <!--循环遍历数组(和jsp中的foreach类似) x：循环的元素 in：固定写法 list:需要遍历的数组 ng-repeat：循环tr就把ng-repeat指令添加到tr上 --> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body> </html>
|
|
07 angular循环对象数组 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script> //定义模块 var app = angular.module('myApp', []); //定义控制器 app.controller('myController', function($scope) { //循环遍历对象数组 $scope.list = [ {name:"张三",shuxue:100,yuwen:80}, {name:"李四",shuxue:50,yuwen:40}, {name:"王五",shuxue:5,yuwen:10}, ]; }) </script> </head> <body ng-app="myApp" ng-controller="myController"> <table border="1px"> <tr> <td>编号</td> <th>姓名</th> <th>数学</th> <th>语文</th> </tr> <!--类似增强for 循环tr，就把ng-repeat指令添加到tr标签上 $index:索引，从0开始 --> <tr ng-repeat="x in list"> <td>{{$index}}</td> <td>{{x.name}}</td> <td>{{x.shuxue}}</td> <td>{{x.yuwen}}</td> </tr> </table> </body> </html>
|
|
08 angular内置服务（$http）（发送请求，相当于ajax请求) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script> //定义模块 var app = angular.module("myApp", []); //定义控制器 app.controller("myController", function ($scope, $http) { //定义一个函数 $scope.findList = function () { /** * 发送请求（相当于发送ajax请求） get(url?参数)/post(url,参数一般是json格式) * success：相当于ajax请求回调函数 * response（不一定是response，也可以是其他变量aa,bb,cc）： 响应的数据，（相当于ajax请求回调函数中的data） */ $http.get("data.json").success( function (response) { $scope.list = response; } ); } }); </script> </head> <body ng-app="myApp" ng-controller="myController" ng-init="findList()"> <table border="1px"> <tr> <th>姓名</th> <th>数学</th> <th>语文</th> </tr> <!--类似增强for--> <tr ng-repeat="x in list"> <td>{{x.name}}</td> <td>{{x.shuxue}}</td> <td>{{x.yuwen}}</td> </tr> </table> </body> </html>
|