AngularJS之中级Route【二】（七）
前言
上一篇我们介绍了AngularJS内置的路由ngRoute，我们知道AngularJS被广泛应用于单页应用SPA（Single Page Application）中，此时路由对于我们来讲非常重要，对于内置的路由（也不能说内置，只能说在VS中默认下载的路由包是ngRoute），但是我们应该明显的知道他的不足，例如上一篇所演示，当我们通过路由导航到另外一个页面，此时若我们刷新页面，此时则会存在找不到页面的情况，此时急需我们再找一种替代方法。这就是我们本节要讲的话题【ui.router】。
ui.router
说到这里，我们有必要介绍一下什么是ui.router，此UI-Router是由AngularUI团队为AngularJS构建的路由框架，它提供的改变应用视图是基于应用的状态与ngRoute路由映射不同，同时不仅仅是映射URL，相比较ngRoute，更灵活，更具扩展性。在基于ui.router的路由，我们的视图和路由不需要和URL紧紧绑定一起，我们可以在不改变URL的情况下通过ui.router来改变网站所需要呈现的内容。因为ui.router是基于路由和状态，所以同样也如ngRoute在config中进行配置。
下面我们一步步来构建如何使用ui.router，关于加入对应脚本什么的基础就不再废话。
Index.html
<body ng-app="routerApp">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="home">AnglarUi Router</a>
<ul class="nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</div>
</div>
<div class="container"> <div ui-view></div> </div>
</body>
在ui.router中，我们用 ui-sref 来创建一个超链接，它会自动生成导向对应应用的状态，用 ui-view 来代替ngRoute中的ng-view。
app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
});
或者
var routeApp = angular.module('routerApp', ['ui.router']);
routeApp.config(config);
function config($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/home");
$stateProvider.state("home",{
url:"/home",
templateUrl:"partial-home.html"
}).state("about",{
});
}
partial-home.html
<div class="jumbotron text-center">
<h1>The Home Page</h1>
<p>此页面用来演示 <span class="text-danger">嵌套</span> 视图.</p>
</div>
此时我们看看基本效果：
接下来我们开始进一步深入，我们开始嵌套视图页面。
在Home嵌套视图
此时将partial-home.html修改成如下，下面用颜色标记添加的部分。
<div class="jumbotron text-center">
<h1>The Home Page</h1>
<p>此页面用来演示 <span class="text-danger">嵌套</span> 视图.</p>
<a ui-sref=".list" class="btn btn-primary">List</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view></div>
我们通过上述.list和.paragraph链接在下面ui-view中继续呈现视图，此时我们再在app.js状态中进行添加脚本。
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['普通狗', '哈士奇', '金毛'];
}
})
.state('home.paragraph', {
url: '/paragraph',
template: '你点击了paragraph'
})
});
上述我们定义链接到partial-home-list.html模板，此时为如下代码：
<ul>
<li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
我们再来看下效果：
在About呈现多视图
多视图想必我们用的地方也是更多，比如在博客园中，将最近新闻单独放在一个页面中并最终注入到母版中，每一个页面都有其控制器以及模板，这样能保证我们的一个页面整体干净而不至于内容太多而显得非常臃肿，
partail-about.html
<div class="jumbotron text-center">
<h1>The About Page</h1>
<p>此页面用来演示 <span class="text-danger">多</span> 以及 <span class="text-danger">命名的</span> 视图.</p>
</div> <div class="row">
<div class="col-sm-6">
<div ui-view="columnOne"></div>
</div> <div class="col-sm-6">
<div ui-view="columnTwo"></div>
</div> </div>
在此页面中有多个视图，一个是命名为columnOne的视图，另一个则是columnTwo视图。此时在app.js继续添加导向到此页面的状态。
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne@about': { template: '我是columnOne!' },
'columnTwo@about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
});
columnOne@about 和 columnTwo@about 在这里要说明一下，这里涉及到视图的相对命名和绝对命名，对于这个框架中的viewName@stateName，因为我们的主视图在我们的about状态中，此时就视图名称就演变成了columnOne@about。
以及如上scotchController对应渲染的数据：
routerApp.controller('scotchController', function($scope) {
$scope.message = '品牌';
$scope.product = [
{
name: '西遇',
price: 50
},
{
name: 'Only',
price: 10000
},
{
name: '杰克琼斯',
price: 20000
}
];
});
模板页table-data.html
<div style="font-weight: bolder;font-size: x-large;">{{message}}</div>
<table class="table table-hover">
<thead>
<tr>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in product">
<td>{{p.name}}</td>
<td>{{p.price}}</td>
</tr>
</tbody>
</table>
最终我们所有都已经完成，我们来整体演示下完整效果：
总结
本节我们进一步讲了路由，关于ngRoute的替代品ui.router，在实际开发中ui.router是比较合适的替代品，就如上一篇所言中angular-resource的替代品。 下一节我们再次深入讲讲路由的高级，下节见。
AngularJS之中级Route【二】（七）的更多相关文章
- AngularJS 指令解析（二）
AngularJS 指令解析(二) 第一篇我们讲过了作用域(scope)这块内容,现在我们进入正题,讲AngularJS的指令. 什么是指令? 这里我们引用官方的一句话: Custom directi ...
- AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。
SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...
- AngularJS之高级Route【三】（八）
前言 我们知道默认的路由提供(Route Provider)在复杂的应用程序中是不太适合应用场景,它存在诸多限制,所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使 ...
- AngularJS之初级Route【一】（六）
前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...
- Angularjs学习笔记（二）----模块
一.定义 如何将全局定义的控制器模块化 先看下全局定义的控制器 var HelloCtrl=function($scope){ $scope.name='World'; } 模块化后代码 angula ...
- angularjs+ionic+'h5+'实现二维码扫描功能
今天给大家分享一下基于angularjs与ionic框架实现手机二维码扫描的功能.没有用到cordova等任何插件,h5+实现的. 开发工具:hbuilder 首先,需要在hbuilder项目下面的配 ...
- 最适合入门的Laravel中级教程(二)用户认证
之前的初级教程主要是学习简单的增删改查: 接着的中级教程的目标是在初级教程的基础上能写出更复杂更健壮的程序: 我们先来学习 laravel 的用户认证功能: 在现代网站中基本都有用户系统: 而我们每开 ...
- AngularJS之Filter（二）
前言 本节我们来讲讲AngularJS中主要的部分之一,那就是过滤器,当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在A ...
- 我的AngularJS 学习之旅(二)
记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(D ...
随机推荐
- js 继承 对象方法与原型方法
js函数式编程确实比很多强语言使用灵活得多,今天抽了点时间玩下类与对象方法调用优先级别,顺便回顾下继承 暂时把原型引用写成继承 先看看简单的两个继承 var Parent = function(){} ...
- JS中数组的操作[转]
1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...
- python 之 Django 基础篇
1,Django流程介绍 MTV模式 著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业务对象与数据 ...
- *HDU 1398 母函数
Square Coins Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- *HDU 1115 计算几何
Lifting the Stone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- NSTimer整理总结
对于定时器NSTimer,我们大家都不会陌生,在使用的时候,我们常常会遇到一些坑,例如:在Scrollview拖动时,timer会暂停:在子线程中如何创建一个定时器等.针对于一些我们所遇到的坑,我来总 ...
- Mvc form提交
在项目开发中,我们离不开表单提交,本篇主要记录mvc的Ajax.BeginForm提交方式. 需要用到的js @Url.Script("~/Content/Scripts/jquer ...
- Ubuntu安装Gnome3
参考:How To Install GNOME In Ubuntu 14.04 . Ubuntu11.10安装GNOME3,卸载UNITY和UNITY2D操作 和How to install Gnom ...
- ASP.Net MVC开发基础学习笔记：四、校验、AJAX与过滤器
一.校验 — 表单不是你想提想提就能提 1.1 DataAnnotations(数据注解) 位于 System.ComponentModel.DataAnnotations 命名空间中的特性指定对数据 ...
- 利用Hexo搭建个人博客－环境搭建篇
我是一个爱写博客进行总结分享的人.然而,有着热爱写博客并且深知写博客好处的我,却没有好好的把这个习惯坚持下来.如今毕业已经一年多了吧,每一次与师弟师妹们聊天,我总会意味深长的建议他们,一定要定期梳理总 ...