简介
AngularJS是为了解决静态网页技术在构建动态应用上的不足.
http://www.html-js.com/article/1852
http://dl.oschina.net/soft/angularjs 源码下载地址
http://handyxuefeng.blog.163.com/blog/static/45452172201342944110818/
http://www.ituring.com.cn/article/15767
将script标签放在底部缩短应用加载的时间，因为这样HTML的加载不会被angular.js脚本的加载阻塞。
<script src="lib/angular/angular.js"></script>
<html lang="en" ng-app>
自动加载
AngularJS会在DOMContentLoaded事件触发时执行，并通过ng-app指令寻找你的应用根作用域。
如果ng-app指令找到了，那么AngularJS将会：
♦ 载入和?指令?内容相关的模块
♦ 创建一个应用的“注入器(injector)”
♦ 已拥有ng-app指令的标签为根节点来编译其中的DOM。这使得你可以只指定DOM中的一部分作为你的AngularJS应用。
手动加载
<script> angular.element(document).ready(function() { angular.bootstrap(document); }); </script>
AngularJS表达式 Angular expression 是一种类似于JavaScript的代码片段。
AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。
{{'yet' + '!'}}
{{yourname || 'World'}}
4. HTML 编译器
编译器是AngularJS提供的一项服务，它通过遍历DOM来查找和它相关的属性。整个编译的过程分为两个阶段。
编译：遍历DOM并且收集所有的相关指令，生成一个链接函数。
链接：给指令绑定一个作用域，生成一个动态的视图。作用域模型的任何改变都会反映到视图上，并且视图上的任何用户操作也都会反映到作用域模型。这使得作用域模型成为你的业务逻辑里唯一要关心的东西。
指令: 指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”。指令可以写在元素的名称里，属性里，css类名里，注释里。
指令本质上只是一个当编译器编译到相关DOM时需要执行的函数。
<span ng-bind="exp"></span> <span class="ng-bind: exp;"></span> <ng-bind></ng-bind> <!-- directive: ng-bind exp -->
4. ng-controller, ng-repeat
ng-init = ""
<div ng-init="list = ['Chrome','Safari','IE']"> <input ng-model="list" ng-list><br> <input ng-model="list" ng-list><br> <pre> list={{list}} </pre> <br> <ol> <li ng-repeat="item in list"> {{item}} </li> </ol> </div>
<script LANGUAGE="JavaScript"> function MyCtrl($scope){ $scope.action = function(){ $scope.name = 'OK'; } $scope.name='World'; } </script> <div ng-controller="MyCtrl"> Hello {{name}} <button ng-click="action()"> ok </button> </div>
Filter 管道语法
{{ 1234567 | currency }} <pre>list={{list | filter:predicate | json}}</pre>
模块和注入器
每个 AngularJS 应用都有一个唯一的注入器. 注入器提供一个通过名字查找实例的方法.
它将所有对象缓存在内部, 所以如果重复调用同一名称的对象, 每次调用都会得到同一实例.
如果调用的对象不存在, 那么注入器会让实例工厂(instance factory)创建一个新的实例.
一个模块就是一种配置注入器实例工厂的方式, 我们称之为 "提供者(provider)"
// Create a module var myModule = angular.module('myModule', []) // Configure the injector myModule.factory('serviceA', function() { return { // instead of {}, put your object creation here }; }); // create an injector and configure it from 'myModule' var $injector = angular.injector('myModule'); // retrieve an object from the injector by name var serviceA = $injector.get('serviceA'); // always true because of instance cache $injector.get('serviceA') === $injector.get('serviceA') // You write functions such as this one. function doSomething(serviceA, serviceB) { // do something here. } // Angular provides the injector for your application var $injector = ...; /// // the old-school way of getting dependencies. var serviceA = $injector.get('serviceA'); var serviceB = $injector.get('serviceB'); // now call the function doSomething(serviceA, serviceB); /// // the cool way of getting dependencies. // the $injector will supply the arguments to the function automatically $injector.invoke(doSomething); // This is how the framework calls your functions
eg:
<div ng-controller="ClockCtrl"> Current time is: {{ time.now }} </div>
angular.module('timeExampleModule', []).
// Declare new object call time,
// which will be available for injection
factory('time', function($timeout) {
var time = {};
(function tick() {
time.now = new Date().toString();
$timeout(tick, 1000);
})();
return time;
});
// Notice that you can simply ask for time
// and it will be provided. No need to look for it.
function ClockCtrl($scope, time) {
$scope.time = time;
}
属性表达式
属性表达式计算是发生在作用域中的. Javascript 默认是以 window 为作用域的. AngularJS 要是用 window作用域的话使用 $window 来指向全局 window 对象. 比如,要使用alert() , 必须写成 $window.alert(). 这是为了防止意外进入全局作用域而设计的.
允许未定义值 : undifined, null
没有流程控制
你不能在表达式中使用控制结构.
逻辑代码都应该在控制器里.
过滤器
eg: name | uppercase ; value | f1 | f2; 123 | number:2
$ 符号
这是一个标记 AngularJS 转用属性方法的符号, 用来表示区别于其他用户自定义函数的符号.
表单
<script> function Controller($scope){ $scope.master={}; $scope.update = function(user){ $scope.master= angular.copy(user); }; $scope.reset = function(){ $scope.user = angular.copy($scope.master); }; $scope.reset(); } </script> <div ng-controller="Controller"> <form novalidate class="simple-form"> Name:<input type="text" ng-model="user.name" /><br/> E-mail:<input type="text" ng-model="user.email" /><br /> Gender:<input type="radio" ng-model="user.gender" value="male" />male <input type="radio" ng-model="user.gender" value="female" />female<br/> <button ng-click="reset()">RESET</button> <button ng-click="update(user)">SAVE</button> </form> <pre>form={{user|json}}</pre> <pre>master={{master|json}}</pre> </div>
控制器中需要用到什么对象就需要传入什么对象.
eg:
Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul>
eg: checkbox, radio
<script> var myApp=angular.module('myApp',[]) .controller('secondCtrl',function($scope){ $scope.sex=1 $scope.data=[{id:0, sex:'男'},{id:1, sex:'女'}] }) </script>
<div class="test"> <label ng-repeat="d in data"> <input type="radio" name="xingbie" ng-checked="sex==d.id" ng-model="d.id" />{{d.sex}} </label> <label ng-repeat="d in data"> <input type="checkbox" name="sex" ng-checked="sex==d.id" ng-model="d.id" />{{d.sex}} </label> </div>
var url = 'http://localhost:8089/RestDemo/rest'; function PhoneListCtrl($scope, $http) { $http.get( url + '/users' ).success(function(data) { $scope.users = data; }); $scope.orderProp = 'age'; } function PhoneDetailCtrl($scope, $routeParams, $http) { $http.get( url + '/users/'+$routeParams.userId).success(function(data) { $scope.user = data; }); $scope.save = function() { $http.put( url + '/users', $scope.user). success(function(data, status, headers, config){ alert("success"); }).error(function(data, status, headers, config){ alert("error"+status); }) ; }; $scope.remove = function(){ $http({ method:'DELETE', url: url + '/users/'+ $scope.user.userId , //url: url + '/users', //data:{id: $scope.user.userId} }) .success(function(data, status, headers, config){ alert("success"); }).error(function(data, status, headers, config){ alert("error"+status); }) ; }; } function CreateController($scope, $http) { $scope.add = function() { $http.post( url + '/users', $scope.user). success(function(data, status, headers, config){ alert("success"); }).error(function(data, status, headers, config){ alert("error"+status); }) ; }; } //PhoneListCtrl.$inject = ['$scope', '$http'];
参考资料:
1. 中文教程网址
1755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
