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变为一个数组。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大内老A

在ASP.NET MVC中通过URL路由实现对多语言的支持

对于一个需要支持多语言的Web应用,一个很常见的使用方式就是通过请求地址来控制界面呈现所基于的语言文化,比如我们在表示请求地址的URL中将上语言文化代码(比如e...

2206
来自专栏linjinhe的专栏

LevelDB:使用介绍

Get 接口和 Put 接口比较像,除了 leveldb::ReadOptions 参数是用来控制读操作的,具体见链接指向的代码。

7015
来自专栏有趣的django

Django rest framework(7)----分页

第一种分页  PageNumberPagination 基本使用 (1)urls.py urlpatterns = [ re_path('(?P<ve...

6287
来自专栏Porschev[钟慰]的专栏

asp.net生成静态页

做个生成静态页示例: 采用替换模版页的形式生成静态页 第一步:新建项目,创建一个简单模版页:TemplatePage.htm <!DOCTYPE html PU...

2126
来自专栏LinkedBear的个人空间

HttpClient入门及其应用 顶

这些需求可能或多或少的会发生在平时的开发中,针对每种情况,可能解决方案不止一种。本文将会使用HttpClient这种工具来讲解HttpClient的相关知识,以...

1291
来自专栏林德熙的博客

WPF 如何在绑定失败异常

在开发 WPF 程序,虽然 xaml 很好用,但是经常会出现小伙伴把绑定写错了。因为默认的 VisualStudio 是没有自动提示,这时很容易复制粘贴写出一个...

2561
来自专栏技术博客

菜菜从零学习WCF九(会话、实例化和并发)

在服务协定上设置System.ServiceModel.ServiceContractAttribute.SessionMode值

1003
来自专栏大内老A

WCF版的PetShop之三:实现分布式的Membership和上下文传递

通过上一篇了解了模块内基本的层次划分之后,接下来我们来聊聊PetShop中一些基本基础功能的实现,以及一些设计、架构上的应用如何同WCF进行集成。本篇讨论两个问...

2585
来自专栏小灰灰

Java 动手写爬虫: 一、实现一个最简单爬虫

第一篇 准备写个爬虫, 可以怎么搞? 使用场景 先定义一个最简单的使用场景,给你一个url,把这个url中指定的内容爬下来,然后停止 一个待爬去的网址(有个地...

6876
来自专栏码农阿宇

ASP.NET Core轻松入门Bind读取配置文件到C#实例

首先新建一个ASP.NET Core空项目,命名为BindReader ? 然后 向项目中添加一个名为appsettings.json的json文件,为什么叫a...

5615

扫码关注云+社区

领取腾讯云代金券