angularJS 入门

教程:http://www.apjs.net

1、ng-app:angularjs 处理的范围

2、{{ }} 表达式

3、双向数据绑定

<input ng-model='yourname'>
{{yourname || 'world'}}

 4、添加控制器:普通的js,可以进行测试,

     前端:ng-controller ng-repeat

     其他就相当于express的知识了

5、过滤:phone in phones | filter:query

6、测试

单元测试:mocha
端对端测试:angular特有的吧。有很多知识不知道是什么,比如browser()

 7、排序:phone in phones | filter:query | orderBy:orderprop

8、ng-click 

其他组织方法

1、前端ng-app= 'firstapp'
2、js:var firstapp = angular.module('firstApp, []);

 9、module and dependency injection

var myMod = angular.module('myMod');
var myApp = angular.module('myApp', 'myMod');

10、rootScope

.run(function($rootScope){ $rootScope.rootValue = 5;  }) 

11、emit and broadcast

 emit 发送给父作用域

broadcast 发送给子作用域

页面上,父控制器要包含子控制器。

12、模板 

<input ng-model='msg'>
{{msg | uppercase}}
ng-model 是指令; {{}} 是表达式; | uppercase是过滤器

标签和属性的规范化:前缀,连接符

13、directive

 directive-form:一定要添加ng-controller

14、内置服务

$http.get()

15、一个页面引入多个模块,需要通过依赖的方式来添加,不能同时有两个模块为主模块,也就是ng-app只能用一次

16、全局API

copy: 深拷贝
element:angular.element('<h1>h21</h1>').text()
             text 是jqlite的函数
             element有什么用呢?
equals(o1, o2): ===
extend(dst, src): 把src的属性复制到dst
forEach
fromJSON
toJSON
isArray isDate isDefined isElement isFunction isNumber isObject isString isUndefined lowercase uppercase

17、创建module

var myApp = angular.module('myApp', [], function(){
	
})
var myApp1 = angular.module('myApp', []);  覆盖上面的实例定义
var myApp2 = angular.module('myApp');  返回上面创建的实例
没理解

 18、配置块

.config(['$provide', function($provide){}])

19.运行块

.run()

不知道该怎么用?

20、提供器:对象提供器;服务提供器

通过.config() 添加提供器;每个提供器有对应的方法,比如controllerProvider对应module.controller(),便于使用吧。

21、作用域:具有层次结构

在run中创建,在模块组件(controller)中访问

可以从一个控制器访问父作用域的值,但不能访问它的兄弟或子作用域的值。如果你在一个子作用域添加一个属性名称,它不会覆盖父作用域,而是在子作用域创建不同于父属性的值的同名属性。

22、模板:表达式{{}},过滤器 | filter,指令 ng-model

过滤器:

currency: 数值转为货币

 filter

有输入,有输出,需要结合使用。
输入可以为search.name, data中有name属性。
comparetor true不知道怎么用,没看到效果

 json:把js对象转为json对象

json:4没什么用呀?

limitTo: 限制字符串的长度和数组的长度

lowercase

uppercase

number: 把数值转为文本,参数表示小数的位数

orderBy:排序,| orderBy:-age:true

age前可以加+ -来表示正序和逆序。

date:

自定义过滤器

通过filter方法,过滤器的名字为censor,通过依赖注入添加过滤器时,名字为censorFilter


23、指令

一类:支持angularjs功能的指令

ngApp

二类:扩展表单

input

三类:作用域绑定到页面元素:模型跟作用域一样的意思

ngModel

四类:网页事件绑定到页面元素

ngClick

五类:自定义指令:还没看懂。

通过directive方法

24、服务

内置服务

$http:get post

$cacheFactory:存储库,会用到两个controller,两个controller都需要在页面上进行调用。

$window: 浏览器的window对象提供了一个jquery 的封装

$cookieStore: 

1、引入angular-cookies.js
2、定义module时,添加ngCookies
3、把cookieStore注入控制器
4、get put remove

 $interval, $timeout: 1.2版本以上的才有,可以cancel,最好通过$scope.on('destory', function(){})来做

 $animate:以css和js的方式实现动画

自定义服务

value,constant,factory,service,

接下来看个具体的例子。

原文地址:https://www.cnblogs.com/wang-jing/p/5064765.html