AngularJS学习第一篇 AngularJS基础知识
AngularJS学习第一篇，了解指令、过滤器等相关内容。
指令
AngularJS指令是扩展的HTML属性，带有前缀ng-
1、ng-app：
定义了AngularJS应用程序的根元素；
ng-app指令在网页加载完毕时会自动引导（自动初始化）应用程序；
<divng-app="Demo"></div>
2、ng-init：
为AngularJS应用程序定义了初始值；
通常情况下，我们使用一个控制器或模块来代替它；
<divng-app="Demo"ng-init="firstName='John'">
<p>我的名字是：{{firstName}}</p>
</div>
3、ng-model：
绑定HTML元素到应用程序数据
同时也可以：
为应用程序数据提供类型验证（number、email、required）；
为应用程序数据提供状态（invalid、dirty、touched、error）；
为HTML元素提供CSS类；
绑定HTML元素到HTML表单；
<divng-app="Demo"ng-init="firstName='John'">
<p>姓名：<inputtype="text"ng-model="firstName"></p>
<p>我的名字是：{{firstName}}</p>
</div>
4、ng-repeat：对于集合中（数组中）的每个项会克隆一次HTML元素。
<divng-app="Demo"ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<ling-repeat="xinnames">
{{x.name+','+x.country}}
</li>
</ul>
</div>
5、ng-controller：为应用程序添加控制器。请根据下面示例进行了解：
<divng-app="Demo">
<h1ng-controller="DemoCtrl">{{name}}</h1>
<h1ng-controller="DemoCtrl2">{{lastName}}</h1>
</div>
<script>
//$scope表示作用区域，指向当前controller
//每个应用都有一个$rootScope，它可以作用在ng-app指令包含的所有HTML元素中。用rootscope定义的值，可以在各个controller中使用。
varapp=angular.module('Demo',[]);
app.controller('DemoCtrl',function($scope,$rootScope){
$scope.name="Volvo";
$rootScope.lastName="Tom";
});
</script>
<divng-app="Demo"ng-controller="personCtrl">
名:<inputtype="text"ng-model="firstName">
<br>
姓:<inputtype="text"ng-model="lastName">
<br>
姓名:{{fullName()}}
</div>
<script>
varapp=angular.module('Demo',[]);
app.controller('personCtrl',function($scope){
$scope.firstName="John";
$scope.lastName="Doe";
$scope.fullName=function(){
return$scope.firstName+""+$scope.lastName;
}
});
</script>
6、ng-options：创建一个下拉列表，列表项通过对象和数组循环输出。
<divng-app="Demo"ng-controller="DemoCtrl">
<selectng-model="selectedName"ng-options="xforxinnames">
</select>
</div>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.names=["Google","W3Cschool","Taobao"];
});
</script>
7、ng-disabled：指令直接绑定应用程序数据到HTML的disabled属性。
<divng-app=""ng-init="mySwitch=true">
<buttonng-disabled="mySwitch">点我!</button>
<inputtype="checkbox"ng-model="mySwitch"/>按钮
{{mySwitch}}
</div>
8、ng-show：指令隐藏或显示一个HTML元素。
<divng-app=""> <png-show="true">我是可见的。</p> <png-show="false">我是不可见的。</p> </div>
9、ng-click：指令定义了一个AngularJS单击事件。
<divng-app="Demo"ng-controller="myController">
<buttonng-click="count=count+1">点我！</button>
<p>{{count}}</p>
</div>
10、ng-include：使用ng-include指令来包含HTML内容。
过滤器
使用一个管道字符（|）添加到表达式和指令中
常见表达式：
currency：格式化数字为货币格式；
filter：从数组项中选择一个子集；
lowercase：格式化字符串为小写；
orderBy：根据某个表达式排列数组；
uppercase：格式化字符串为大写；
<divng-app="Demo"ng-controller="DemoCtrl">
<p>姓名为{{lastName|uppercase}}</p>
</div>
<divng-app="Demo"ng-controller="DemoCtrl">
<ul>
<ling-repeat="xinnames|orderBy:'country'">
{{x.name+','+x.country}}
</li>
</ul>
</div>
服务
在AngularJS中，服务是一个函数或对象，可在你的AngularJS应用中使用；
AngularJS中你可以创建自己的服务，或使用内建服务；
AngularJS内建了30多个服务；
自定义服务
app.service('hexafy',function(){
this.myFunc=function(x){
returnx.toString(16);
}
});
varapp=angular.module('Demo',[]);
app.controller('customersCtrl',function($scope,$location){
$scope.myUrl=$location.absUrl();
});
常用内置服务
1、$http：是AngularJS中的一个核心服务。服务向服务器发送请求，应用响应服务器传送过来的数据；
varapp=angular.module('Demo',[]);
app.controller('DemoCtrl',function($scope,$http){
$http({
url:'data.json',
method:'GET',
params:{
'username':'tan'
}
}).success(function(data,header,config,status){
//响应成功
}).error(function(data,header,config,status){
//处理响应失败
});
});
2、$location：服务对应了window.location函数。
3、$timeout：服务对应了window.setTimeout函数。
4、$interval：服务对应了window.setInterval函数。
5、$rootScope：它可以作用在ng-app指令包含的所有HTML元素中。用rootscope定义的值，可以在各个controller中使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。