【不定时更新】《AngularJS权威教程》简要笔记

第 1 章 初识 AngularJS

Angular基于MIT许可，开源框架。
为开发者提供了很多现代Web开发的高级功能：

• 解耦应用逻辑、数据模型和视图;
• 依赖注入;
• 浏览历史(使书签和前进、后退按钮能够像在普通Web应用中一样工作);
• 测试;
  ……

第 2 章 数据绑定和第一个 AngularJS Web应用

Angular插件小于100K，大约70K左右，引用即可使用。非常方便

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script>``` ```<h1>Hello {{ name }}</h1>``` 使用{{}}模板符号 <div class="se-preview-section-delimiter"></div> ##经典的双向绑定示例 <div class="se-preview-section-delimiter"></div> ```<div ng-controller='MyController'> <input ng-model="person.name" type="text" placeholder="Your name"> <h1>Hello {{ person.name }}</h1>

javascript代码

function MyController($scope,$timeout) {
var updateClock = function() {
    $scope.clock = new Date();
    $timeout(function() {
          updateClock();
    },1000);
};
updateClock();
};

这个写法挺有意思，使用timeout代替setInterval

$apply版

function MyController($scope) {
       var updateClock = function() {
         $scope.clock = new Date();
       };
       setInterval(function() {
         $scope.$apply(updateClock);
},1000);
       updateClock();
     };

在线示例:http://jsbin.com/uHiVOZo/1/edit?html,output

第 3 章 模块

声明模块

angular.module('myApp',[]);

两个参数，第一个参数是模块名（ng-app属性定义）；第二个参数是依赖列表，字符串数组

angular.module('myApp',[])//引用模块
       .run(function($rootScope) {
         $rootScope.name = "World";
     });

第 4 章 作用域（scope）

Angular启动并生成视图时，自动为ng-app和$rootS<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e建立绑定，$rootScope是所有$scope的最上层，类似于全局作用域。

可以在模板中使用的标记

• 指令 : 将DOM元素增强为可复用的DOM组件的属性或元素。ng-前缀的标签或属性
• 值绑定 : 模板语法{{ }}可以将表达式绑定到视图上。
• 过滤器 : 可以在视图中使用的函数,用来进行格式化。
• 表单控件 : 用来检验用户输入的控件。

$scope的生命周期

当angular认为$scope已经无用时，会自动销毁。
可者也可以手动销毁：

$scope.$destory()

指令一般不会自动创建$scope，除了ng-controller,ng-repeat

第 5 章 控制器

控制器的初始化，可以这样写，但不建议写太多这样的全局变量

function FirstController($scope) {
       $scope.message = "hello";
}

更佳的方式创建一个模块

var app = angular.module('app',[]);
     app.controller('FirstController',function($scope) {
       $scope.message = "hello";
     });

控制器可以嵌套，$scope中定义的项在查找时与js语法相近，从最近的作用域逐层向外查找。
控制器尽量写得简洁，可以配合指令和服务来完成，而不是将所有的逻辑甚至dom操作写到其中

//简洁的控制器
angular.module('myApp',[]) .controller('MyController',function($scope,UserSrv) {
// 内容可以被指令控制 
    $scope.onLogin = function(user) {
         UserSrv.runLogin(user);
       };
});

第 6 章 表达式

Angular表达式的特性

1. 所有表达式都在其所属的控制器内的使用域内运行，有访问$scope的权限
2. 表达式发生TypeError和ReferenceError并不会抛出异常
3. 没有流程控制功能，if else…
4. 接受过滤器和过滤链

$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$watch()侦听变量的变化

$scope.$watch("model",function(newVal,oldVal,scope){


})

$parse手动解析表达式

在线示例:http://jsbin.com/UWuLALOf/1/edit?html,js,output

第 8 章 指令简介

自定义HTML标签和指令

<my-better-video my-href="/goofy-video.mp4">
     Caneventaketext</my-better-video>

创建一个指令

<my-directive my-url="http://www.baidu.com"
    my-link-text="click me"></my-directive>

angular.module('myApp',[])
/* 两个参数，第一个参数是指令名，即标签，使用驼峰命名。转化为指令标签时使用-分割 第二个参数是方法，吐出一个对象，template是标签内容 */
.directive('myDirective',function() {
    return {
         restrict: 'E',template: '<a href="{{ myUrl }}"> {{ myLinkText }}</a>'
 }; 
});

将指令的属性值与$scope绑定

angular.module('myApp',template: '<a href="{{ myUrl }}"> {{ myLinkText }}</a>'
 }; 
});

restrict 属性的取值，可以有三种：

A 用于元素的 Attribute，这是默认值
E 用于元素的名称
C 用于 CSS 中的 class

<div my-directive
    my-url="http://google.com"
    my-link-text="Click me to go to Google">
</div>
angular.module('myApp',[])
.directive('myDirective',function() {
    return {
        restrict: 'A',replace: true,scope: {
        myUrl: '@',//绑定策略
        myLinkText: '@' //绑定策略 },
        template: '<a href="{{myUrl}}">' +
            '{{myLinkText}}</a>'
}; });
//在线示例:http://jsbin.com/elokodi/1/edit

一般情况下绑定的时候使用相同的名称，也可以定义不同的

scope: { myUrl: '@someAttr',//someAttr是自定义名称的指令属性 myLinkText: '@'//这个复用了相同的名字myLinkText }

第 11 章 Angular模块加载

模块上创建指令和服务

angular.module('myApp',[])
//服务
.factory('myFactory',function(){
     var service = {}; 11
    return service;
})
//指令
.directive('myDirective',function(){
    return {
    template: '<button>Click me</button>'
})

运行块.run

是angular应用中第一个被执行的方法

第 34 章 下一步

使用jqLite，是jquery的子库

使用angular.element(dom)可以得到一个jqLite对象

原文地址：https://www.jb51.cc/angularjs/149677.html