表达式
AngularJS 的表达式写在双大括号内{{ expression }}
,这把数据绑定到HTML。
表达式和JS的表达式很像,可以包含文字,运算符和变量,但是不支持条件判断和循环。
ng-app
拥有这个指令的HTML元素被angular视为其应用。
ng-init
属性初始化应用的数据。
模块
模块定义了一个应用程序,是应用控制器的容器。
var app = angular.module('appname',[])
这条语定义了一个模块,第二个参数用于定义模块的依赖关系。
AngularJS 指令
指令是HTML属性,带有前缀ng-。
ng-disabled
把应用程序数据绑定到HTML的disabled
属性
ng-show
显示或者隐藏一个HTML元素
ng-hide
隐藏或者显示一个HTML元素
ng-click
定义了AngularJS点击事件
ng-include
可以包含其他html页面
ng-model
把元素的值绑定到应用程序,还可以为数据提供状态值,甚至还可以根据表单域的状态为表单添加CSS类。类如下所示:
ng-empty
输入与为空时添加
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
ng-repeat
该指令会重复HTML元素,使用方法如下
<ul ng-app ng-init="names=['elk','q','pi']">
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
创建自定义指令
<script>
var app = angular.module("myApp",[]);
app.directive('myFunc',function(){
return {
restrict : "A",
template : "<h1>我的自定义指令。</h1>"
};
});
</script>
在HTML中调用默认使用
<my-func></my-func>
<div my-func></div>
restrice
的值有 A
E
C
M
默认为EA
$scope
$scope
是应用在HTML和控制器之间的纽带,它是一个对象,有可用的方法和属性,可以应用在试图和控制器上。
创建控制器时,可以时$scope
为参数传递,在控制器中添加$scope
对象时,HTML可以通过表达式获取这些属性,表达式不必包含$scope
,直接用属性名即可。
$rootscope
根作用域,所有应用都有一个根作用域,用他定义的值可以应用在各个控制器中。
AngularJS控制器
AngularJS控制器控制应用程序的数据,是常规的JS对象。
ng-controller
属性定义了应用程序的控制器。
通常把控制器放在外部文件中,和平常的JS文件一样。
AngularJS过滤器
过滤器用一个管道字符|
添加到表达式和指令中。
过滤器可以用于转换数据:
currency
格式化数字为货币格式
lowercase
格式化字符串为小写
orderBy
根据表达式来排列数组
uppercase
格式化字符串为大写
filter
过滤
AngularJS服务
AngularJS服务是一个函数或者对象,可以在应用中使用。
$location
服务作为一个参数传递到控制器中,使用这个服务需要在控制器中定义相应的属性。
$location.absUrl()
返回当前页面的URL地址。
$http
是应用中最常用的服务,用于向服务器发送请求,响应服务器传送过来的数据。
$timeout
第一个参数为延迟执行的函数,第二个参数为延迟时间。
$interval
第一个参数为执行的函数,第二个参数为间隔时间。
自定义服务
pas
$http
$http
是AngularJS中的一个核心服务,用于读取远程服务器中的数据。
$http.url()
是用于读取服务器数据的函数。
AngularJS Select
Angular可以使用数组或对象创建一个下拉表选项
ng-option
属性从一个列表当中读取每一项,形成下拉列表
AngularJS动画
AngularJS 使用动画需要引入 angular-animate.min.js 库