Angular Js学习笔记

初次接触Angular，所以只是用来记载一些基础知识，不对之处，望指正！

Angular是一个JavaScript框架，可通过《script》标签添加到网页中

ng-app:指令指定了一个AngularJs应用程序，比如放在一个div里面，表明该DIv是AngularJs应用程序的所有者

ng-model:指令把元素值（比如输入域的值）绑定到应用程序

ng-model 指令也可以：

• 为应用程序数据提供类型验证（number、email、required）。
• 为应用程序数据提供状态（invalid、dirty、touched、error）。
• 为 HTML 元素提供 CSS 类。
• 绑定 HTML 元素到 HTML 表单。

ng-bind:指令把应用程序数据绑定到HTML视图。

ng-init 指令初始化 AngularJS 应用程序变量

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

包含：AngularJs的表达式，对象，数组，字符串，数字等，用ng-init初始化，用ng-bind（在标签内）或者{{}}两种方式显示。

ng-repeat指令重复一个HTML元素或者对象数组，用ng-init初始化，用ng-repeat="x in init对象"，最后用{{}}输出

ng-controller 指令定义了应用程序控制器。

AngularJS 过滤器可用于转换数据：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

 AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上(创建控制器时可以当作参数传递)

根作用域：

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。 $rootScope 在循环对象内外都可以访问。

 

AngularJS 控制器

AngularJS 控制器在

内由 ng-controller 指令定义。

AngularJS 过滤器

AngularJS 过滤器可以用来格式化数据，过滤器能够用在表达式和指令中。过滤器可以使用一个管道字符（|）添加到表达式和指令中。

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据某个表达式排列数组：

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。例如：在搜索时根据搜索的输入的字段过滤不需要的字段。

AngularJS 服务(Service)

AngularJS 中的服务是一个函数或对象。

AngularJS 中你可以创建自己的服务，或使用内建服务。 $location 服务，它可以返回当前页面的 URL 地址。

$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。$http.get(url) 是用于读取服务器数据的函数。

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环(for)输出，与ng-repeat

的区别在于其选项是一个对象，而ng-repeat是一个字符串。

AngularJS 表格

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

 


 
   
   
 

{{ x.Name }}

{{ x.Country }}

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

ng-show（true为可见，false为不可见） 指令隐藏或显示一个 HTML 元素。

ng-click 指令定义了一个 AngularJS 单击事件。

ng-hide 指令用于设置应用的一部分 不可见 。

ng-hide="true" 让 HTML 元素 不可见。

ng-hide="false" 让元素可见。

AngularJS 表单

AngularJS 表单是输入控件的集合。

以下 HTML input 元素被称为 HTML 控件:

• input 元素
• select 元素
• button 元素
• textarea 元素

AngularJS 输入验证

AngularJS 表单和控件提供了验证功能，对与用户的输入进行判断，以辨别输入是否合法，如果不合法则进行警告。

HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

AngularJS 动画

AngularJS 提供了动画效果，可以配合 CSS 使用。

AngularJS 使用动画需要引入 angular-animate.min.js 库。

ngAnimate 做了什么?

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

• value:用于向控制器传递值（配置阶段）
• factory：factory 是一个函数用于返回值。在 service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值。
• service：
• provider：Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
• constant：constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

AngularJS 路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://w3cschool.cn/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://w3cschool.cn/#/first

http://w3cschool.cn/#/second

 

补充：

在Angular框架中，双美元符前缀$$表示这个变量被当作私有的来考虑，不应当在外部代码中调用。

function $scope(){ this. $$watchList = []; }

脏处理，双向绑定（$csope作用域）问题：只有当触发UI事件，ajax请求或者 timeout 延迟，才会触发脏检查。
$csope的详细解释参见：https://blog.csdn.net/matiascx/article/details/76419894

$on、$emit和$broadcast的使用:    http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html

• $emit只能向parent controller传递event与data
• $broadcast只能向child controller传递event与data
• $on用于接收event与data

服务：服务提供了一种能在应用的整个生命周期内保持数据的方法，它能够在控制器之间进行通信，并且能保证数据的一致性。            服务是一个单例对象，在每个应用中只会被实例化一次（被$injector实例化），并且是延迟加载的（需要时才会被创                   建）。服务提供了把与特定功能相关联的方法集中在一起的接口。

创建方式：

1、Factory：就是创建一个对象，然后为他添加属性和方法，最后返回这个对象。当把这个服务注入控制器的时候，控制器就可以访问在那个对象上的属性了
2、Service：service创建服务时，我们需要知道的最重要的一件事就是他是使用new关键字进行实例化
3、Provider：是唯一一种可以创建用来注入到app.config()函数的服务的方式。在你的应用在别处运行之前对你的服务对象进行一部分的配置，那么，这个就显得很重要了。可以认为provider有三个部分，第一部分是私有变量和私有函数，这些变量和函数会在以后被修改。第二部分是在app.config函数里可以访问的变量和函数；第三部分是在控制器里可以访问的变量和函数。

区别：https://segmentfault.com/a/1190000004602085

promise对象：https://segmentfault.com/a/1190000002788733

 

一个页面AngularJS默认只加载一个ng-app，如果是多个ng-app，需要手动加载。：

angular.module('sellerApp', []).controller('sellerCtrl', function ($scope, $http) {

$http.get("/tools/index_ajax.ashx?action=productTop&pageSize=3").then(function (response) {

if (response.data.list.length == 0) {

$("#sellerloading").html("暂无数据");

} else {

$("#sellerloading").hide();

}

$scope.list = response.data.list;

});

});

//angular手动加载第2个ng-app

angular.bootstrap(document.querySelector('[ng-app="sellerApp"]'), ['sellerApp'])