AngularJS Phonecat实例讲授_AngularJS_脚本之家

我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的。比如这样:

1.配置使用ui-router

本文实例讲述了AngularJS基于ui-route实现深层路由的方法。分享给大家供大家参考,具体如下:

前言

AngularJS 过滤器

。一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图。比如这样:

1.1导入js文件

1.前面我们通过了简单的ng-route实现了简单层次的路由,对于深层次的路由,我们可以通过ui-route来实现。

最近关于AngularJS的资料也看了一些,其官网上有个实例Phonecat很不错,硬着头皮看了一会实在是看不下去,索性自己动手实现下,遇到问题时再从里面寻找答案也不失为一种好方法。说的再多、看的再多不如自己动手去做一遍,那就开始吧。

过滤器可以使用一个管道字符添加到表达式和指令中。

var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.config(function { $routeProvider.when('/hello', { templateUrl: 'tpls/hello.html', controller: 'HelloCtrl' }).when('/list', { templateUrl: 'tpls/bookList.html', controller: 'BookListCtrl' }).otherwise({ redirectTo: '/hello' }) }); 

需要注意的是:必须导入angular.min.js这个文件,且angular.min.js必须导入在angular-ui-router.min.js前面。

ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换。
ui-route的改进:在具有富客户端的单页应用中,要在一个页面中呈现不同的视图,我们可以通过ui-route实现路由的嵌套。

正文

AngularJS 过滤器

这是属于AngularJS的原生路由定义。从表面上看似乎挺方便,没有什么太大的问题。但是细想一下,如果说我们有一个网页,左边是菜单栏,右边是各个菜单所对应的视图。那么,如果按照这样的定义,点击每个菜单项,岂不得刷新整个网页?而我们想要的只是右边的视图刷新。所以,这就要用到嵌套路由了。

1.2注入angular模块

2 . ui-route的使用方法

1、布局

AngularJS 过滤器可用于转换数据:

所谓嵌套路由,就是视图里面还可以再嵌套视图,路由里还可以再嵌套路由。并且,通过ui-router,可以实现不同视图之间的参数传递。

var app = angular.module('myApp', ['ui.router']);

首先加载angular-ui-route.js

布局很简单,首页侧边栏是一个输入框和下拉框,右边是一个列表,实现时对首页不做大的修改。详情页做一些改变,尽量做一些简化,考虑加一个自定义指令。

过滤器

ui-router定义路由的时候,与ngRouter不一样,它是使用.来进行定义的,并且在html标签里,不使用ng-view,而是使用ui-view,比如

奥门威尼斯网址 ,注入的名字“ui.router”,可在angular-ui-router.min.js里找到,如下图:

设置HTML页面,这里不同于ng-route中的ng-view

2、架构分析

描述

。ui-router提供了$stateProvider,$urlRouterProvider来进行路由定义。

1.3定义视图

  • 首页
  • 水果
  • 蔬菜

首先思考一下需要用到的服务。
由于我们要做的是一个单页应用,所以需要服务$route、$location。利用服务$resource获取资源。利用服务$filter对首页数据过滤以及排序。总结一下:

currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

下面的实例演示如何实现路由嵌套:

ui-view替代的是ngroute路由的ng-view。

(因为chorme不支持本地文件访问,而FF支持,这里不想搭建本地服务器的,可以用火狐浏览器调试)

1).服务$route、$location负责路由管理及跳转。2).服务$resource负责资源的获取。3).服务$filter负责数据的过滤及排序。

过滤器可以通过一个管道字符和一个过滤器添加到表达式中。.

home.html

1.4配置路由状态

angular.module('myapp',['ui.router']).config(function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise; $stateProvider.state('fruit',{ url:'/fruit', templateUrl:'fruit.html' }) .state('vegetable',{ url:'/vegetable', templateUrl:'vegetable.html' }) .state('index',{ url:'/index', template:'这是首页' });});

3、首页及详情页view视图

((下面的两个实例,我们将使用前面章节中提到的 person 控制器))

创建如下的html页面:

app.config(["$stateProvider", function { $stateProvider .state("home", { //导航用的名字,如login里的login url: '/', //访问路径 template:'模板内容......' }) }]);

因为在这里我们将index.html和fruit.html以及vegetable.html放置在
了同一个目录下,template下的路径建议使用绝对路径的形式。

   Search:    Sort by:  price name         名字:{{item.name}} 性能:{{item.title}} 价格:{{item.price | currency}}    

是一个自定义指令,实现轮播图的功能   设备:{{data.name}} 性能:{{data.desc}} 

uppercase 过滤器将字符串格式化为大写:

 Home This page demonstrates nestedviews.  List Paragraph   

2.简单示例

效果如下,当初始默认界面为:

4、逻辑分析

AngularJS 实例

home-list.html

  ui-router            //定义模板,并注入ui-router var app = angular.module('myApp', ['ui.router']); //对服务进行参数初始化,这里配stateProvider服务的视图控制 app.config(["$stateProvider", function  { $stateProvider .state("home", { url: '/', template:'<div>模板内容......</div>' }) }]); 

点击水果,切换到水果页面:

1、首先说明下外部资源infor.json的信息。是一个数组,数组每一项为一个json对象,含有以下字段:

姓名为 {{ lastName | uppercase }}

创建如下的html页面:

3.嵌套路由的实现

点击蔬菜,切换到蔬菜页面:

{ "id" : 1, "name" : "aaa", "title" : "bbb", "desc" : "ccc", "img" : "img/a.jpg", "price" : 100, "showList" : "[{"url":"img/b.jpg"},{"url":"img/c.jpg"}]"}

m1.config(['$routeProvider',function{ $routeProvider .when('/index',{ templateUrl : 'template/index.html', controller : 'index' }) .when('/detail/:str',{ templateUrl : 'template/detail.html', controller : 'detail' }) .otherwise({ redirectTo : '/index' });}]);

运行结果:

  • {{ topic }}

通过url参数的设置实现路由的嵌套(父路由与子路由通过”.“连接就形成了子路由)。嵌套路由可实现多层次的ui-view。

这里介绍了ui-route页面的基础用法,这个用法与ng-route实现的功能大体上是一致的,下面我们来看各个配置属性的基本含义:

当形如

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

about.html

   点我显示父view内容 点我显示父view与子view内容      var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function  { $stateProvider .state("parent", {//父路由 url: '/parent', template:'<div>parent' +'<div ui-view><div>'// 子View +'</div>' }) .state("parent.child", {//子路由 url: '/child', template:'<div>child</div>' }) }]); 

I)template/templateUrl

当形如

AngularJS 实例

创建如下的html页面:

上面的是相对路径方式:

template:字符串方式的模板内容,或者是一个返回html的函数
templateUrl:模板路径或者是返回模板路径的函数
templateProvider:返回HTML内容的函数

默认为

姓名为 {{ lastName | lowercase }}
 The About Page This page demonstrates multipleand namedviews.          

‘parent’将匹配…./index.html#/parent;
‘parent.child’将匹配…./index.html#/parent/child。

例如:在我们的例子中所写的

var arr = [];var objRe = $resource; $scope.data = arr = objRe.query(); //获得data数据后首页即可进行渲染

运行结果:

table-data.html

若改成绝对路径方式,则需要在子url里加上^:

 .state('vegetable',{ url:'/vegetable', templateUrl:'vegetable.html' }) .state('index',{ url:'/index', template:'这是首页' });

首页数据的过滤及排序:

currency 过滤器

创建如下的html页面:

.state("parent.child", { url: '^/child', template:'child'}) 

II).controller

 $scope.$watch('filterKey',function(){ //监听输入框的数据变化,完成数据的筛选 if{ $scope.data = $filter; }else{ $scope.data = arr; } }) $scope.$watch{ //监听select下拉框的数据变化,完成数据的排序 if{ $scope.data = $filter($scope.data,$scope.sortKey); }else{ $scope.data = arr; } })//这里有个需要注意的地方,我们用一个数组arr作为媒介,避免bug

currency 过滤器将数字格式化为货币格式:

Ice-Creams 

此时,’parent’将匹配…./index.html#/parent;
‘parent.child’将匹配…./index.html#/child。

控制器,返回对应url模板的控制器名称,或者是对应url模板的控制器函数。如果没有对应的模板定义,控制器对象就不会被创建

点击列表进行详情页的跳转:

AngularJS 实例

Name

4. 通过views实现多视图

III).resolve

$scope.$location = $location; //将$location挂载到$scope下,模板中便可使用$location提供的方法
数量: 价格: 总价 = {{  | currency }}var app = angular.module;app.controller('costCtrl', function { $scope.quantity = 1; $scope.price = 9.99;});

Cost

多个示图时,使用views属性。该属性里包含了哪些ui-view,则对应的template或templateUrl里的内容就会填充该ui-view。

使用resolve功能,我们可以准备一组用来注入到控制器的依赖对象。在ngRoute中,resolve可以在实际渲染之前解决掉promise,resolve选项提供一个对象,对象中的key就是准备注入到controller中的依赖名称,值则是这个创建对象的工厂。

–点击的时候将列表跳转到详情页

运行结果:

{{ topic.name }}

同一个状态下有多个视图示例:

3.通过ui-route实现深层次的路由嵌套

m1.controller('detail',['$scope','$resource','$location',function($scope,$resource,$location){ var id = parseInt.substring; //获取索引 $resource.query{ $scope.data = data[id]; $scope.links = eval; //自定义指令需要用到此数据 });}]);//注意:$resource.query()为异步操作。数据相关的逻辑需要在回调中完成,否则可能会出现数据undefined的情况。

向指令添加过滤器

${{ topic.price }}

   点我显示index内容       var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function  { $stateProvider .state("index", { url: '/index', views:{ 'header':{template:"<div>头部内容</div>"}, 'nav':{template:"<div>菜单内容</div>"}, 'body':{template:"<div>展示内容</div>"} } }) }]); 

我们在水果页面加上了新的html:

5、自定义指定slide的编写

过滤器可以通过一个管道字符和一个过滤器添加到指令中。

注意,到目前为止,我们还没有插入任何AngularJS路由或者其它任何框架。目前我们只是创建了一些页面片段,我们需要一个占位或者说父页面来装下这些页面片段。让我们把这个页面叫做
index.html.

5.ui-view的定位

  • 橘子
  • 苹果
  • 香蕉

AngularJS的自定义指定功能十分强大,为实现组件化开发提供了一种思路。下面简单地实现一个轮播组件。

orderBy 过滤器根据表达式排列数组:

index.html

@的作用
是用来绝对定位view,即说明该ui-view属于哪个模板。如:’header@index’表示名为header的view属于index模板。绝对和相对路径的效果一样,请看如下代码:

我们发现现在一级导航栏底下,多了一个二级导航栏

用法示例:

AngularJS 实例

用如下内容创建这个html页面

  show index content111111 content222222     var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function  { $stateProvider .state("index", { url: '/index', views:{ 'index':{template:"<div><div ui-view='header'></div> <div ui-view='nav'></div> <div ui-view='body'></div> </div>"}, //这里必须要绝对定位 'header@index':{template:"<div>头部内容header</div>"}, 'nav@index':{template:"<div>菜单内容nav</div>"}, 'body@index':{template:"<div>展示内容contents</div>"} } }) //绝对定位 .state("index.content1", { url: '/content1', views:{ 'body@index':{template:"<div>content11111111111111111</div>"} //'body@index'表时名为body的view使用index模板 } }) //相对定位:该状态的里的名为body的ui-view为相对路径下的 .state("index.content2", { url: '/content2', views:{ 'body':{template:"<div>content2222222222222222222</div>"}// } }) }]); 由上面代码可知,相对定位不能找到的ui-view需要用@来绝对定位。6.URL路由传参有url: '/index/:id',和url: '/index/{id}',两种形式传参   show index show test     var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function  { $stateProvider .state("home", { url: '/', template:"<div>homePage</div>" }) .state("index", { url: '/index/:id', template:"<div>indexcontent</div>", controller:function{ alert .state("test", { url: '/test/:username', template:"<div>testContent</div>", controller:function{ alert($stateParams.username) } }) }]); 

重新配置JS路由,在第一级路由fruit的基础上进一步进行嵌套,JS代码 如下:

m1.directive{ return { restrict : 'E', templateUrl : 'template/slide.html', replace : true, scope : { links : '=', w : '@', h : '@' }, link : function{ setTimeout{ var w = scope.links.length * scope.w; var h = scope.h; var iNow = 0; $.css({'width':scope.w,'height':h,'position':'relative','overflow':'hidden'}) $.css({'width':w,'height':h,'position':'absolute'}); setTimeout{ $.css({'width':scope.w,'height':h,'float':'left'}); $.css({'width':scope.w,'height':h}); },0); setInterval{ iNow++; $.animate({'left':-iNow*scope.w},function(){ if(iNow==scope.links.length-1){ $.css; iNow = 0; } }); },1000) },50) } } })
  {{ x.name + ', ' + x.country }} 
            AngularUI Router    Home   About         

7.Resolve

$stateProvider.state('fruit',{ url:'/fruit', templateUrl:'fruit.html'}).state('vegetable',{ url:'/vegetable', templateUrl:'vegetable.html'}).state('index',{ url:'/index', template:'这是首页'}).state('fruit.orange',{ url:'/orange', templateUrl:'orange.html',}).state('fruit.apple',{ url:'/apple', templateUrl:'apple.html'}).state('fruit.banana',{ url:'/banana', templateUrl:'banana.html'});

结语

运行结果:

在主页中我们引入了angular.min.js、angular-ui-router.js、angular-animate.js和app.js。在class为Container的div中我们创建了一个

使用预载入功能,开发者可以预先载入一系列依赖或者数据,然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证。在使用这个选项时比使用angular-route有更大的自由度。

最后我们来看效果:现在点击水果一级切换页面之后显示为:

AngularJS给我们提供了很多好用的功能,比如路由的管理、数据的过滤的等。更强大的功能还需要进一步的探索,此文仅作为一个好的开端。

Kai, Denmark Jani, Norway Hege, Sweden

, 该 div 内的 HTML 内容会根据路由的变化而变化。在中ui-sref
指令链接到特定状态。

预载入选项需要一个对象,这个对象的key即要注入到控制器的依赖,这个对象的value为需要被载入的factory服务。

在点击橘子,苹果或者香蕉进行选择,其效果为,即二级切换页面的效果为:

过滤输入

在app.JS文件的内容,我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显示home.html的内容。代码如下:

如果传入的时字符串,angular-route会试图匹配已经注册的服务。如果传入的是函数,该函数将会被注入,并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证,这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。

4.此外ui-route还可以实现多视图路由,这个功能同一个state下,全页面分为几个细小的页面分别显示不同的值。

输入过滤器可以通过一个管道字符和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider) { /*路由重定向 $urlRouterProvider:如果没有路由引擎能匹配当前的导航状态,那它就会默认将路径路由至 home.html, *这个页面就是状态名称被声明的地方. */ $urlRouterProvider.otherwise; $stateProvider .state('home', { url: '/home', templateUrl: 'tpls2/home.html' }) /* nested list with custom controller*/ .state('home.list', { url: '/list', templateUrl: 'tpls2/home-list.html', controller: function { $scope.topics = ['Butterscotch', 'Black Current', 'Mango']; } }) // nested list with just some random string data .state('home.paragraph', { url: '/paragraph', template: 'I could sure use a scoop of ice-cream. ' }) .state('about', { url: '/about', /* view 用在该状态下有多个 ui-view 的情况,可以对不同的 ui-view 使用特定的 template, controller, resolve data 绝对 view 使用 '@' 符号来区别,比如 'columnOne@about' 表明名为 'columnOne' 的 ui-view 使用了 'about' 状态的 模板,相对 view 则无*/ views: { // 无名 view '': { templateUrl: 'tpls2/about.html' }, // for "ui-view='columnOne'" 'columnOne@about': { template: '这里是第一列的内容' }, // for "ui-view='columnTwo'" 'columnTwo@about': { templateUrl: 'tpls2/table-data.html', controller: 'Controller' } } }); }); routerApp.controller('Controller', function { $scope.message = 'test'; $scope.topics = [{ name: 'Butterscotch', price: 50 }, { name: 'Black Current', price: 100 }, { name: 'Mango', price: 20 }]; }); 
  show index     var app = angular.module('myApp', ['ui.router']); app.config(["$stateProvider", function  { $stateProvider .state("home", { url: '/', template:"<div>homePage</div>" }) .state("index", { url: '/index/{id}', template:"<div>indexcontent</div>", resolve: { //这个函数的值会被直接返回,因为它不是数据保证 user: function() { return { name: "peter", email: "audiogroup@qq.com" } }, //这个函数为数据保证, 因此它将在控制器被实例化之前载入。 detail: function { return $http({ method: 'JSONP', url: '/current_details' }); }, //前一个数据保证也可作为依赖注入到其他数据保证中! myId: function { $http({ method: 'GET', url: 'http://facebook.com/api/current_user', params: { email: currentDetails.data.emails[0] } }) } }, controller:function(user,detail,myId$scope){ alert alert console.log; 

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS
MVC架构总结》

filter 过滤器从数组中选择一个子集:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

希望本文所述对大家AngularJS程序设计有所帮助。

AngularJS 实例

  {{  + ', ' + x.country }} 

运行效果:

KAI, Denmark JANI, Norway HEGE, Sweden

以上就是对AngularJS
过滤器的知识整理,后续继续补充,有需要的朋友可以参考下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注