angular 1.0

angular 1.0具体内容

1、指令
ng-app指令告诉angularJS,

元素是angularJS应用程序的所有者
ng-init初始化数据 angularJS表达式可写在HTML中，不支持判断，循环及异常，支持过滤器
ng-model 视图和数据的双向绑定
{{}} 渲染数据
ng-bind 把应用程序变量name绑定到某个段落的innerHTML,与{{}}功能类似
ng-repeat 相当于 v-for , ng-repeat对于集合中每项 克隆一次html元素
模板定义var app=angular.module('myApp',[]);
控制器应用

app.controller('myCtrl',function($scope){
			$scope.firstName = 'John';
			$scope.lastName = 'Doe';
		})

创建自定义指令
.directive 函数来添加自定义的指令
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

你可以通过以下方式来调用指令：
元素名
属性
类名
注释
以下实例方式也能输出同样结果:
元素名
属性

类名

注释
限制使用
你可以限制你的指令只能通过特定的方式来调用。
通过添加 restrict 属性,并设置只值为 “A”, 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "
自定义指令!
"
    };
});

restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令

	
	
	


	
	
		
我的第一个表达式：{{ 5 * 9 }}
		名：

		姓：

		姓名：{{ firstName + ' '+ lastName }}
		
价格计算器
		数量：
		价格：
		
总价：{{quantity*cost}}
		
数组第三个数为：{{arr[2]}}
		
		
使用 ng-repeat 来循环数组
		

			

				{{x}}
			
		
		

			

				{{item.name}}  {{item.age}}
			
		
		
	
		
	

2、ng-model指令
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error) vaild字段内容合法，dirty表单有填写记录

    Email:
    

    
状态
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

ng-model 指令根据表单域的状态添加/移除以下类：

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

3、scope作用域
scope是应用在HTML（视图）和JavaScript（控制器）之间的纽带
scope是一个对象，有可用的方法和属性
scope可应用在视图和控制器上
使用：
$scope 对象当做一个参数传递

{{carname}}

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}
作用范围：了解当前scope的作用范围
根作用域：所有的应用都有一个根作用域 $rootScope ,可作用在ng-app指令包含的所有html元素中，$rootScope 可作为参数传递

4、控制器
1）控制应用程序的数据 ng-controller
2）是常规的JS对象

		名：

		姓：

		姓名：{{firstName +' '+ lastName}}
	
	

也可创建自定义服务

7、HTTP
用于读取远程服务器的数据

8、下拉框
可使用数组或对象创建一个下拉列表选项

//使用 ng-options 指令，选择的值是一个对象


你选择的是: {{selectedSite.site}}
网址为: {{selectedSite.url}}

//ng-repeat 有局限性，选择的值是一个字符串:

{{x.site}}


你选择的是: {{selectedSite}}

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Runoob", url : "http://www.runoob.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

9、表格
ng-repeat 指令可以完美的显示表格。

	   //$index 显示序号，可添加事件
			

		

			
{{$index + 1}}
{{x.name}}
			
{{x.age}}
		
	

10、HTML DOM
angular为dom元素的属性提供了绑定应用数据的指令。
ng-disabled 指令绑定disabled属性

点我!      //ng-disabled为false时，按钮能用


按钮    //绑定mySwitch到复选框元素中的内容（value）


{{ mySwitch }}

ng-show 指令隐藏或显示一个 HTML 元素。

我是可见的。
我是不可见的。

ng-hide 指令用于隐藏或显示 HTML 元素。

我是不可见的。
我是可见的。

11、事件
ng-click定义了点击事件

	显示/隐藏
	

		时光的单车飞快驶去，岁月的倒影也将消失，白天与黑夜不停的交替，轮回的四季斑驳了谁的岁月，蹉跎了谁的年华。一个人静静地与岁月交错，于平淡之中细细体会生活的深意，去注视，去聆听，去感受那些带着希望的别离以及那些经受沧桑的相逢，不论时光如何飞转，那些落花一样的往事，依然鲜活地存在于我的脑海之中。当岁月和美丽的回忆已成为风中的叹息，我们伤感的眼里也许依然残存旧时的泪痕，模糊了视线，不敢轻易触碰。
	

toggle()函数用于切换myVar的值（true 和 false），控制p标签的显示与隐藏

12、模块
定义了一个应用程序，是应用程序中不同部分的容器，是应用控制器的容器，属于一个模块
1）创建模块

在应用中添加控制器，指令，过滤器等
2）模块和控制器包含在js文件中

{{ firstName + " " + lastName }}

3）var app = angular.module("myApp", []);
在模块中定义[]参数用于定义模块的依赖关系，中括号[]表示该模块没有依赖，如果有依赖的话会在中括号里写上依赖的模块名字
4）函数会影响到全局命名空间
js中避免使用全局函数，因为他们很容易被其他脚本文件覆盖。
angular模块让所有函数的作用域在该模块下，避免了该问题
5）什么时候载入库
对于 HTML 应用程序，通常建议把所有的脚本都放置在 元素的最底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载
13、表单
表单是输入控件的集合
HTML控件：
input 元素 select 元素 button 元素 textarea 元素
表单通常与HTML控件同时存在

	

		姓：

		

		名：

		

		reset
	
	
 form = {{user}}
	
master = {{master}}

16、bootstrap 和 包含
abgular能和bootstrap 一起使用
在angular中，可以在html中包含html文件（在HTML中，目前还不支持包干HTML文件的功能）
17、动画
angular提供动画效果，可配合css使用

动画是通过改变HTML元素产生的动态变化效果
AngularJS 添加/移除 class 的指令:

ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：

ng-animate
ng-hide-animate
ng-hide-add (如果元素将被隐藏)
ng-hide-remove (如果元素将显示)
ng-hide-add-active (如果元素将隐藏)
ng-hide-remove-active (如果元素将显示)

18、依赖注入
1）依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖
2）AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

value
factory
service
provider
constant

*value是一个简单的js对象，用于向控制器传递值（配置阶段）

// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...
// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

*factory是一个函数用于返回值。在service和controller需要时创建
通常使用factory函数来计算或返回值

// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 
// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

*provider 创建一个serveice、factory等（配置阶段）
Provider中提供了一个factory方法get(),用于返回values/service/factory

// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

*constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");

19、路由
路由允许我们通过不同的URL访问不同的内容
通过angular可实现多视图的单页web应用
1）通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

    
    	
        
    
         
        
AngularJS 路由应用
        

            
首页
            
电脑
            
打印机
            
其他
        
      
        
   //ng-view 指令
        
           //载入实现路由的js文件
                  
    

2）路由设置对象
路由也可通过不同的模板来实现
路由配置对象语法规则如下：

$routeProvider.when(url, {
    template: string,   //如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
    templateUrl: string,   //如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
    controller: string, function 或 array,  //function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
    controllerAs: string,   //string类型，为controller指定别名。
    redirectTo: string, function,  //重定向的地址。
    resolve: object   //指定当前controller所依赖的其他模块。
});

20、angular 参考手册
angular指令

21、实例

	
	
	
	



	
我的笔记
	

		
	
	

		保存
		清除