angularJS基础总结

指令:Directive
指令(directive):系统内置指令、自定义指令;定义指令使用驼峰法命名,使用时使用“-”连接多个单词

1.系统指令:
ngApp(ng-app):定义一个应用程序所有者是谁,如果写在html中,表示html是应用程序的所有者;如果写在body里表示body是应用程序的所有者;写在div中,则表示div是应用程序的所有者。把ng-app指定个某个标签后,那么表示此标签内部就可以使用angular的其他指令了,在这个标签外使用angular的其他指令会失效/报错。
注:一个项目中只能使用一次
ngModel(ng-model):给标签绑定/关联一个变量,仅用于input标签,相当于拿一个变量实时保存input的value,一旦input有更改,该标签对应的变量值也对应的实时修改。ng-model的值直接存储在$scope中
ngController(ng-controller):定义控制器
ngRepeat(ng-repeat):循环数组或对象 eg:ng-repeat="变量名 in 数组"
ngBind(ng-bind):绑定数据,具体用法见下面
ngClick(ng-click):触发点击事件
ngClass(ng-class):追加样式, 注意,样式一定要加引号,否则会作为一个变量来处理!!!
ngShow(ng-show):设置标签是否显示 true/false
ngHide(ng-hide):设置标签是否隐藏 true/false

2.自定义指令:创建模块(module()) =》 绑定指令(directive())
全局对象:html有个全局对象window,angularJS也有个全局对象:angular
全局函数:手册中的function,都是全局函数即全局对象angular下定义的函数。
moudule():1.创建一个新的模块:两个参数:模块名称(字符串,与 ng-app里的名称对应),数组(字符串,用,隔开):每一个字符串代表一个已有模块。第二个参数就是第一个模块需要依赖的其他的模块。
2.获取一个已有的模块:一个参数:模块名称
模块方法:directive("指令名",function(){}):给自定义模块绑定指令
指令名:遵循驼峰法命名
回调函数:返回一个对象,对象要包含如下属性: template:模板; restrict:调用的方式(E:element A:attribute C:class M:comment); replace:boolean,true:将注释替换成指令; transclude:boolean,true(替换标签),并且需要在模板中写上<ng-transclude></ng-transclude>用来替换新的内容; templateUrl:模板路径,模板只能有一个根标签,注意与template只能二选一,并且使用templateUrl时必须放置在服务器环境下
使用:标签形式:eg <hello-world></hello-world>
属性形式:eg <div hello-world></div>
class形式:eg <div class="hello-world"></div>
注释形式:eg <!--directive:hello-world-->




服务:Service
服务(service):系统自带,可以用来处理网络请求($http),eg:ajax

模块方法:controller('控制器名',function(service对象){}):定义控制器;可以有多个。控制器名为:ng-controller中的值
1.$http对象:$http({
method:请求方式
url:请求的路径
}). then(function(data){
//成功函数,返回数据
},function(error){
//失败函数,返回错误
});
2.$scope对象:区域对象,每一个controller都自带一个scope对象,用来存储变量和函数
在控制器内写代码时,注意代码的先后顺序(先有属性,才能使用)!!!!
每一个控制器都有一个$scope,每一个$scope都有自己的作用域!!!!子控制器可以继承父控制器的$scope


数据双向绑定
三种方式:
a. {{变量/函数/表达式}},使用最多,当网速不好时,会出现源代码
b. ng-bind: <div ng-bind="name"></div>
c. ng-model: <input type="text" ng-model="age">
age如果已经存在,就用存在的值,如果不存在就向$scope添加数据


过滤器:Filter
1.过滤器(filter):对数据进行过滤
2.常见系统自带过滤器:currency:处理货币
eg:{{pro.price | currency:"¥"}} =》 使用人民币显示货币
3.自定义过滤器:
自定义过滤器必须是单独的模块
使用模块的filter()方法: filter('过滤器名',回调函数)
eg: 模块名.filter('过滤器名',function(){
return function(){};//返回一个函数用来过滤参数
});

4.使用自定义过滤器:需要在使用的模块注入,然后和内置的过滤器一样使用
5.全局函数:isArray():是否是数组
isUndefined():是否未定义




依赖注入
在angular中,每个模块都有自己的功能,当其他模块需要使用这个功能时,只要把对应的模块加入到模块依赖的数组中即可




路由机制(ngRoute)
使用时必须先加载:系统自带的模块





猜你喜欢

转载自blog.csdn.net/yucihent/article/details/71050039