AngularJS是一个javascript框架,可通过script标签添加到网页中:
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
AngularJS表达式
AngularJS表达式可以是文字、运算符和变量
写在大括号内:{{expression}}
AngularJS将在表达式书写的位置"输出"数据
AngularJS指令
AngularJS指令是扩展的HTML属性,带有前缀ng-
ng-app指令初始化一个AngularJS一个用程序
ng-init指令初始化应用程序数据。
ng-model指令把元素值绑定到应用程序。
可将输入域的值与AngularJS创建的变量绑定
<div ng-app="myApp" ng-controller="myCtrl">
名字:<input ng-model="name">
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name="John Doe";
});
</script>
ng-repeat指令会重复一个HTML元素
.directive函数来添加自定义的指令,使用驼峰法来命令一个指令,runoobDirective,但在使用它时需要以-分割,runoob-directive
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
可通过元素名、属性、类名、注释来调用。
限制使用,通过添加restrict属性。
Scope作用域
所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有html元素中。
用rootscope定义的值,可在各个controller中使用
AngularJS控制器
ng-controller指令定义了应用程序控制器。控制器是javascript对象,由标准的javascript对象的构造函数创建。
使用$scope对象来调用控制器,
AngularJS过滤器
可用于转换数据
表达式中的过滤器
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为{{ lastName | uppercase }}</p>
</div>
reverse自定义过滤器
AngularJS服务
在AngularJS中,服务是一个函数或对象,可在AngularJS应用中使用。
$location服务,返回当前页面的 URL 地址
http服务向服务器发送请求,相应服务器发送过来的数据
$timeout服务对应了 JS window.setTimeout函数
$interval服务对应了 JS window.setlnterval函数。
创建自定义服务
app.service('hexafy',function(){
this.myFunc = function(x){
return x.toString(16);
}
});
AnuglarJS select
使用ng-option来创建下拉列表
ng-repeat指令是通过数组来循环HTML代码来创建下拉列表,但ng-options指令更适合创建下拉列表
ng-option的选项是一个对象,ng-repeat是一个字符串。
AngularJS HTML DOM
*ng-disabled指令直接绑定应用程序数据到HTML的disabled属性。
ng-show8指令隐藏或显示一个。g-include指令来包含 HTML 内容
网友评论