Angularjs基础(四)

时间:2022-04-23
本文章向大家介绍Angularjs基础(四)，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

AngularJS过滤器 　　　　过滤器可以使用一个管道符(|)添加到表达式和指令中。 　　　　　　AngularJS过滤器可用于转换数据： 　　　　　　　　　　currency　　　　 格式化数字为货币格式 　　　　　　　　　　filter 　　　　　　从数组中选着应子集。 　　　　　　　　　　lowercase 　　　  格式化字符串为小写。 　　　　　　　　　　orderBy 　　　　 根据某个表达式排列数组 　　　　　　　　　　uppercase 　　　 格式化字符串为大写。

表达式中添加过滤器 　　　　过滤器可以通过一个管道字符(|) 和一个过滤器添加到表达式中。 　　　　　　uppercase过滤器将字符串格式化为大写。 　　　　　　　　　　实例：

    	　　　　　　　　　　　　<div ng-app="myApp" ng-controller="personCtrl">
				　　　　　　　　　　　　　　　　<p>姓名{{lastName | uppercase}}</p>
			　　　　　　　　　　　　</div>

　　　　　　lowercase 过滤器将字符串格式化为小写

		　　　　　　　　　　　　<div ng-app="myApp" ng-controller="personCtrl">
			　　　　　　　　　　　　　　　　<p>姓名为{{lastName | lowercase}}</p>
		　　　　　　　　　　　　</div>

currency 过滤器 　　　　　　currency 过滤器将数字格式化为货币格式： 　　　　　　　　　　实例：

			　　　　　　　　　　　　　　<div ng-app="myApp" ng-controller="costCtrl">
				　　　　　　　　　　　　　　　　<input type="number" ng-model="quantity">
				　　　　　　　　　　　　　　　　<input type="number" ng-model="price">
				　　　　　　　　　　　　　　　　<p>总价={{(quantity * price) | currency}}</p>
			　　　　　　　　　　　　　　</div>

向指令添加过滤器 　　　　　　过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中 　　　　　　　　　　orderBy 过滤器根据表达式排列数组： 　　　　　　　　　　　　　　实例：

			　　　　　　　　　　　　　　　　　　<div ng-app="myApp" ng-controller="namesCtrl">
				　　　　　　　　　　　　　　　　　　　　　　<ul>
					　　　　　　　　　　　　　　　　　　　　　　　　　　<li ng-repeat="x in name | orderBy:'country'">
						　　　　　　　　　　　　　　　　　　　　　　　　　　　　{{x.name +','+ x.country}}
					　　　　　　　　　　　　　　　　　　　　　　　　　　</li>
				　　　　　　　　　　　　　　　　　　　　　　</ul>
			　　　　　　　　　　　　　　　　　　</div>

过滤输入 　　　　　　输入过滤器可以通过一个管道符(|)和一个过滤器添加到指令中，该过滤器后跟一个冒号和模型名称。 　　　　　　　　　　filter过滤器从数组中选着一个子集： 　　　　　　　　　　　　实例

			　　　　　　　　　　　　　　<div ng-app="myApp" ng-controller="namesCtrl">
				　　　　　　　　　　　　　　　　　　<p><input type="text" ng-model="test"></p>
				　　　　　　　　　　　　　　　　　　<ul>
					　　　　　　　　　　　　　　　　　　　　<li ng-repeat="x in names | filter:test | orderBy:'countery'">
						　　　　　　　　　　　　　　　　　　　　　　{{(x.name | uppercase) +','+x.counry}}
					　　　　　　　　　　　　　　　　　　　　</li>
				　　　　　　　　　　　　　　　　　　</ul>
			　　　　　　　　　　　　　　</div>

AngularJS服务(Service) 　　　　　　AngularJS 中你可以创建自己的服务，或使用内创建服务。 什么是服务？ 　　　　　　　　在AngularJS中，服务是一个函数或对象，在你的AngularJS 应用中使用。 　　　　　　　　有个$location 服务，他可以返回当前页面的URL地址。 　　　　　　　　　　实例：

			　　　　　　　　　　　　var app = angular.module('myApp',[]);
			　　　　　　　　　　　　app.controller('customersCtrl',function($scope,$location){
				　　　　　　　　　　　　　　　　$scope.myUrl = $location.absUrl();
			　　　　　　　　　　　　})

　　　　　　　　注意：$location 服务是作为一个参数传递到controller中.如果要使用它，需要在controller中定义。

为什么使用服务？ 　　　　$http 是AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。 　　　　AngularJS 会一直监控应用，处理事件变化，AngularJS使用 $location 服务比使用window.location 对象更好。

$http 服务 　　　　$http 是AngularJS 应用中做常用的服务。服务像服务器发送请求。应用响应服务器传递过来的数据。 　　　　　　　　实例： 　　　　　　　　　　使用$http 服务器服务器请求数据：

			　　　　　　　　　　　　var app = angular.module('myApp',[]);
			　　　　　　　　　　　　app.controller('myCtrl',function($scope,$http){
				　　　　　　　　　　　　　　$http.get("welcome.html").then(function(response){
					　　　　　　　　　　　　　　　　　　$scope.myWelcome = response.data;
				　　　　　　　　　　　　　　　　});
			　　　　　　　　　　　　});

$timeout 服务 　　　　　　AngularJS $timeout 服务对应了JSwindow.setTimeout 函数 　　　　　　　　实例：

			　　　　　　　　　　　　var app=angular.module('myApp',[]);
			　　　　　　　　　　　　app.controller('myCtrl',function($scope,$timeout){
				　　　　　　　　　　　　　　　　　　$scope.myHeader = "Hello World!";
				　　　　　　　　　　　　　　　　　　$timeout(function(){
					　　　　　　　　　　　　　　　　　　　　　　$scope.myHeader = "How are you today?";
				　　　　　　　　　　　　　　　　　　　　},2000)
			　　　　　　　　　　　　　　})

$interval 服务 　　　　AngularJS $interval 服务对应了JS window.setInterval 函数。 　　　　　　实例： 每两秒显示信息：

			　　　　　　　　　　var app = angular.module('myApp',[]);
			　　　　　　　　　　app.controller('myCtrl',function($scope,$interval){
				　　　　　　　　　　　　$scope.theTime = new Date().toLocaleTimeString();
				　　　　　　　　　　　　$interval(function(){
					　　　　　　　　　　　　　　$scope.theTime = new Date().toLocaleTimeString();
				　　　　　　　　　　　　},1000)
			　　　　　　　　　　})

创建自定义服务 　　　　你可以创建自定义的访问，链接到你的模块中： 　　　　　　创建名为hexafy 访问：

		　　　　　　app.service('hexafy',function(){
			　　　　　　　　　　　　this.myFunc = function(x){
				　　　　　　　　　　　　　　this.myFunc = function (x){
					　　　　　　　　　　　　　　return x.toString(16);
				　　　　　　　　　　　　}
			　　　　　　　　}
		　　　　　　});

　　　　要使用自定义的访问，需要在定义过滤器的时候独立添加： 　　　　实例： 　　　　　　　　使用自定义的服务hexafy 将一个数组转换为16 进制。

				　　　　　　　　　　app.controller('myCtrl',function($scope,hexafy){
					　　　　　　　　　　　　$scope.hex = hexafy.myFunc(255);
				　　　　　　　　})

过滤器中，使用自定服务 　　　　当你创建了自定义服务器，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服服务器中使用它。 　　　　在过滤器myFormat 中使用服务hexafy:

		　　　　app.filter('myFormat',['hexify',function(hexify){
			　　　　　　　　return function(x){
				　　　　　　　　　　return hexify.myFunc(x);
			　　　　　　　　};
		　　　　}])

　　　　在从对象会数组中获取值时你可以使用过滤器： 　　　　　　创建服务hexafy:

			　　　　　　　　<ul>
				　　　　　　　　　　<li ng-repeat ="x in counts">{{x | myFormat}}</li>
			　　　　　　　　</ul>

AngularJS XMLHttpRequest 　　　　$http 是AngularJS 中的一个核心服务，用于读取远程服务器的数据。

读取JSON 文件 　　　　以下是存储在web服务器上的JSON 文件

	　　　　　　　　{
		　　　　　　　　　　"records":
		　　　　　　　　　　[
		　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Alfreds Futterkiste",
		　　　　　　　　　　　　　　　　"City" : "Berlin",
		　　　　　　　　　　　　　　　　"Country" : "Germany"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Berglunds snabbk?p",
		　　　　　　　　　　　　　　　　"City" : "Lule?",
		　　　　　　　　　　　　　　　　"Country" : "Sweden"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Centro comercial Moctezuma",
		　　　　　　　　　　　　　　　　"City" : "México D.F.",
		　　　　　　　　　　　　　　　　"Country" : "Mexico"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Ernst Handel",
		　　　　　　　　　　　　　　　　"City" : "Graz",
		　　　　　　　　　　　　　　　　"Country" : "Austria"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
		　　　　　　　　　　　　　　　　"City" : "Madrid",
		　　　　　　　　　　　　　　　　"Country" : "Spain"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Galería del gastrónomo",
		　　　　　　　　　　　　　　　　"City" : "Barcelona",
		　　　　　　　　　　　　　　　　"Country" : "Spain"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Island Trading",
		　　　　　　　　　　　　　　　　"City" : "Cowes",
		　　　　　　　　　　　　　　　　"Country" : "UK"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "K?niglich Essen",
		　　　　　　　　　　　　　　　　"City" : "Brandenburg",
		　　　　　　　　　　　　　　　　"Country" : "Germany"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Laughing Bacchus Wine Cellars",
		　　　　　　　　　　　　　　　　"City" : "Vancouver",
		　　　　　　　　　　　　　　　　"Country" : "Canada"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Magazzini Alimentari Riuniti",
		　　　　　　　　　　　　　　　　"City" : "Bergamo",
		　　　　　　　　　　　　　　　　"Country" : "Italy"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "North/South",
		　　　　　　　　　　　　　　　　"City" : "London",
		　　　　　　　　　　　　　　　　"Country" : "UK"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Paris spécialités",
		　　　　　　　　　　　　　　　　"City" : "Paris",
		　　　　　　　　　　　　　　　　"Country" : "France"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Rattlesnake Canyon Grocery",
		　　　　　　　　　　　　　　　　"City" : "Albuquerque",
		　　　　　　　　　　　　　　　　"Country" : "USA"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Simons bistro",
		　　　　　　　　　　　　　　　　"City" : "K?benhavn",
		　　　　　　　　　　　　　　　　"Country" : "Denmark"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "The Big Cheese",
		　　　　　　　　　　　　　　　　"City" : "Portland",
		　　　　　　　　　　　　　　　　"Country" : "USA"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Vaffeljernet",
		　　　　　　　　　　　　　　　　"City" : "?rhus",
		　　　　　　　　　　　　　　　　"Country" : "Denmark"
	　　　　　　　　　　　　},
	　　　　　　　　　　　　{
		　　　　　　　　　　　　　　　　"Name" : "Wolski Zajazd",
		　　　　　　　　　　　　　　　　"City" : "Warszawa",
		　　　　　　　　　　　　　　　　"Country" : "Poland"
	　　　　　　　　　　　　}
	　　　　　　　　　　]
	　　　　　　　　　}

AngularJS $http 　　　　　　AngularJS $http 是一个用于读取web服务器上数据的服务。 　　　　　　$http.get(url)是用于读取服务器数据的函数。 　　　　　　　　实例：

			　　　　　　　　　　　　<div ng-app="myApp" ng-controller="customersCtrl">
				　　　　　　　　　　　　　　　　<ul>
					　　　　　　　　　　　　　　　　　　　　<li ng-repeat="x in name">
						　　　　　　　　　　　　　　　　　　　　　　　　{{x.Name + ','+x.Country}}
					　　　　　　　　　　　　　　　　　　　　</li>
				　　　　　　　　　　　　　　　　</ul>
			　　　　　　　　　　　　</div>
			　　　　　　　　　　　　<script>
				　　　　　　　　　　　　　　　　　　var app = angular.module('myApp',[]);
				　　　　　　　　　　　　　　　　　　app.controller('customersCtrl',function($scope,$http){
					　　　　　　　　　　　　　　　　　　$http.get("http:www.runoob.com/try/angularjs/data/Customes_JSON.php")
					.　　　　　　　　　　　　　　　　　　　　success(function(response) {$scope.names = response.records;});
				　　　　　　　　　　　　　　　　　　})
			　　　　　　　　　　　　</script>

　　　　　　　　　　　　应用解析: 　　　　　　　　　　　　　　注意：以上代码的get请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将Customers_JSON.php 　　　　　　　　　　　　　　的数据拷贝到你 的服务器上。 　　　　　　　　　　　　　　AngularJS 应用通过ng-app 定义,应用在<div>中执行。 　　　　　　　　　　　　　　ng-controller指令设置了controller对象名。 　　　　　　　　　　　　　　函数customersController是一个标准的JavaScript对象构造器。 　　　　　　　　　　　　　　控制器对象有一个属性：$scope.names. 　　　　　　　　　　　　　　$http.get()从web服务器上读取静态JSON 数据。 　　　　　　　　　　　　　　服务器数据文件为： http://www.runoob.com/try/angularjs/data/Customers_JSON.php。 　　　　　　　　　　　　　　当从服务端载入JSON 数据时，$scope.names变为一个数组。

随机文章
Javascript知识点必读
最近更新