标签：作用域 更新 开始 params animate 请求方式 建立 操作 post请求
AngularJS简介
AngularJS目前为Google所收购，有着诸多的特性，其中最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等
MVC模式
Model：数据，就是angular变量（$scope.XX）
View：数据的呈现，Html + Directive（指令）
Controller：数据操作，就是function，数据的增删改查
双向绑定
AngularJS愿景：声明式编程应该用于构建用户界面及编写软件构建，而指令式编程适合来表示业务逻辑。AngularJS采用并扩展了传统的HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此AngularJS使得对DOM的操作不再重要，并提升了可测试性
依赖注入
依赖注入（Dependency Injection），一种设计模式，某个对象依赖的其他对象无需手工创建，只需要作“约定的操作”，那么这个对象在创建时，其依赖的对象由框架来自动创建并注入进来，其实这就是最少知识法则，模块中的service和provider两类对象，都可以根据形参名来实现DI
模块化设计
根据高内聚、低耦合的原则：
AngularJS使用
1 <body ng-app> 2 {{100 + 100}} 3 </body> 4 <!-- 页面将输出 200 -->
<head> <script type="text/script" src="js/angular.min.js"></script> </head> <body ng-app> <!-- 一方绑定 --> 姓名：<input type="text" ng-model="name"/><br/> 性别：<input type="text" ng-model="user.sex"/><br/> 年龄：<input type="text" ng-model="user.age"/><br/> <!-- 二方绑定 --> {{name}}，您好！{{user.sex}},{{user.age}} </body>
<script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript"> // 定义模块 var myapp = angular.module("myapp", []); // 为模块添加控制器 myapp.controller("myController", function($scope) { // 定义add方法 $.scope.add = function() { return parseInt($scope.x) + parseInt($scope.y) } }) </script> <body ng-app="myapp" ng-controller="myController"> x:<input type="text" ng-model="x"/><br/> y:<input type="text" ng-model="y"/><br/> 加法结果：{{add()}} </body>
| ng-click | 单击事件 |
| ng-dblclick | 双击事件 |
| ng-blur | 失去焦点事件 |
| ng-focus | 获取焦点事件 |
| ng-change | 值改变事件 |
| ng-keydown | 键盘按下事件 |
| ng-keyup | 键盘弹起事件 |
| ng-keypress | 键盘按下后松开事件 |
| ng-mousedown | 鼠标按下事件 |
| ng-mouseup | 鼠标弹起事件 |
| ng-mouseenter | 鼠标进入事件 |
| ng-mouseleave | 鼠标离开事件 |
| ng-mousemove | 鼠标移动事件 |
| ng-mouseover | 鼠标进入事件 |
<scipt type="text/javascript" src="js/angular.js"></script> <script type="text/javascript"> var myapp = angular.module("myapp", []); myapp.controller("myController", function($scope) { $scope.a = function() { $scope.hello = "hello word"; }; }); </scipt> <body ng-app="myapp" ng-controller="myController"> <input type="button" value="点击" ng-click="a()"/> {{hello}} </body>
<script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript"> var myapp = angular.module("myapp", []); myapp.controller("myController", function($scope) { $scope.list = [100, 200, 300, 400, 500]; $scope.objList = [ {name:"大名", sex:"男", age:30}, {name:"忠明", sex:"女", age:25}, {name:"小明", sex:"男", age:20} ]; }; }); </script> <body ng-app="myapp" ng-controller="myController"> <h2>遍历普通变量集合</h2> <ul> <li ng-repeat="item in list"> {{item}} </li> </ul> <h2>遍历对象集合</h2> <table> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr ng-repeat="obj in objList"> <td>序号：{{$index+1}}</td> <td>姓名：{{obj.name}}</td> <td>性别：{{obj.sex}}</td> <td>年龄：{{obj.age}}</td> </tr> </table> </body>
<script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript"> var myapp = angular.module("myapp", []); myapp.controller("myController", function($scope) { $scope.user = {name:‘吴填锐‘, age: 20}; }); </script> <body ng-app="myapp" ng-controller="myController"> <label ng-if="user.age >= 20">{{user.name}}</label> </body>
<script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript"> var myapp = angular.module("myapp", []); myapp.controller("myController", function($scope) { $scope.cities = [ {id:1, name:"广州市", explain:"hello"}, {id:2, name:"深圳市", explain:"word"}, {id:3, name:"北京市", explain:"my"}, {id:4, name:"上海市", explain:"name"}, {id:5, name:"杭州市", explain:"is"}, {id:6, name:"合肥市", explain:"ehow"} ]; }); </script> <body ng-app="myapp" ng-controller="myController"> <select ng-model="code" ng-options="c.id as c.name for c in cities"> <option value="">==请选择城市==</option> </select> 您选择的是：{{code}} </body>
<script> // 普通的$http请求 $http({ method:"GET", // 请求方式 url:"/findAll", // 请求URL params:{"id":1, "name":"ehow"} // 请求参数 }).then( function(response) { // 请求成功 // response 响应对象 alert("请求成功"); }, function(response) { // 请求失败 alert("请求失败"); } ); // $http的get专属请求 //--带请求参数 $http.get(URL, {参数}).then(function(response){}, function(response){}); //--不带请求参数 $http.get(URL).then(function(response){},function(response){}) // $http的pose专属请求 //--带请求参数 $http.post(URL, {参数}).then(function(response){}, function(response) {}); //--不带请求参数 $http.post(URL).then(function(response){},function(response){}) </script>
说明：响应对象response中，封装了响应数据：response.data，封装了响应状态码：response.state
AngularJS加载时机
网页加载完毕后，再执行AngularJS代码
标签：作用域 更新 开始 params animate 请求方式 建立 操作 post请求
原文地址：https://www.cnblogs.com/ehow/p/9373939.html
