【angularjs】【学习心得】路由继续研究篇

原文：http://www.imooc.com/wenda/detail/236998

其实路由的功能是比较复杂的，我们实际应用中页面的状态也是非常多的，上面简单的路由是肯定不能满足我们的需求的，所以我们必须要更深入地了解下路由以及它更有用的一些用法。

--------------------------------------------------------------------

首先来说一下templateUrl属性，上面说了它的值是对应模板的地址，比如

...

templateUrl : 'tpls/index.html',

...

但事实上我们也可以用一个函数作为值，但是这个函数必须返回模板的地址，比如

...

templateUrl : function(){

return 'tpls/index.html';

},

...

这两段代码的效果其实是一模一样的，很容易理解。但是我们在实际应用的时候会经常有这样的需求：在url里拼接get参数，然后后台利用get参数去读数据库然后返回相应的内容。这时候用第一种方法实现起来可能就不那么容易（但是也是能实现的），而用第二种方法就很容易了。

那么在这之前需要介绍一个很有用的东西叫做$stateParams，看名字也很容易理解，状态参量。这个东西就存储了页面状态的有关信息，我们通过一个例子来看看这到底是神马东东。

这是我们的list.html页面

<div>

<p>This is the list page</p>

<a ui-sref="detail({articleId:'111'})">文章详情</a>

</div>

这是detail.html页面

<div>

<p>This is the detail page</p>

</div>

这是路有部分了，注意看哟

.state('list',{

url : '/list',

templateUrl : 'tpls/list.html'

})

.state('detail',{

url : '/detail/{articleId}',

templateUrl : function($stateParams){

console.log($stateParams);

return 'tpls/detail.html';

}

})

先来看看效果，当我们进入list页面时是下面这个样子

我们点击文章详情这个链接后，页面变成了detail，并且下面打印出了$stateParams

这里我们发现它是一个对象，并且包含了我们所传递的参数。小伙伴们看看我上面是怎么在url里传递参数的哦，就是加一个括号，里面放一个我们要传递的对象即可。传递对象参数的时候需要注意，路由中url后面跟了多少参数你就只能传递那么多参数,比如

路由中这么写

.state('detail',{

url : '/detail/{articleId}/{else}',

templateUrl : function($stateParams){

console.log($stateParams);

return 'tpls/detail.html';

}

})

html页面中这么写

<div>

<p>This is the list page</p>

<a ui-sref="detail({articleId:'111',else:'imooc'})">文章详情</a>

</div>

那我们输出的效果就是这样的

怎么能用它呢？小伙伴们记得路由中的另一个参数controller，它为模板指定了一个controller，事实上我们可以把$stateParams传入controller中，看个例子吧

首先我们在index.html引入controller.js

list页面和上面没有变化

<div>

<p>This is the list page</p>

<a ui-sref="detail({articleId:'111',else:'imooc'})">文章详情</a>

</div>

路由中我们还是这么写，但是给detail页面指定了一个controller

然后我们在controller.js里面

//注意，我们需要在路由最开头的依赖中加上myModule哦

var myModule = angular.module('myModule',[]);

myModule

.controller('DetailController',function($scope,$stateParams){

console.log($stateParams);

});

当我们在list页面中点击链接时，进入detail页面，效果如下

我们在controller中也能打印出传递的参数，这就很有意思了。我们可以在controller中根据传递过来的参数和后台服务器进行通信然后把返回的结果绑定在scope上，页面是不是就可以显示出来了呢，比如这样

myModule.controller('DetailController', function($scope,$stateParams){

console.log($stateParams);

$http.post('API_URL',{params:$stateParams})

.success(function(data,status,headers,config){

$scope.content = data;

});

})

我们通过http服务把$stateParams发送到后台，然后把返回的数据绑定在$scope.content上，detail.html中的{{content}}是不是就可以跟着变化了呢？

------------------------------------------------------------------------

今天就暂时写这么多，以上是最近实践路由的一些经验，但是路由的用法还可以更灵活，这需要我们掌握更多这方面的内容。

PS:今天有门课期末前两天不得不预习了整本书，缺了两天，但是我觉得应该反思，养成一个好习惯不容易，不应该为自己找各种理由，而且目测一般都挂科了……时间虽然紧，但挤挤肯定还是有的！

【angularjs】【学习心得】路由继续研究篇相关推荐

电脑硬件知识学习_关于网络学习心得体会集锦七篇
关于网络学习心得体会集锦七篇当在某些事情上我们有很深的体会时,好好地写一份心得体会,通过写心得体会,可使我们今后少走弯路.那么心得体会怎么写才能感染读者呢?以下是小编为大家收集的网络学习心得体会7篇 ...
计算机英语感想1500,英语学习心得1500字五篇
学了这么多年的英语,不能说有多么好的学习方法,但是也算是摸爬滚打过来的,总结了一些学习的经验,希望能使大家在学英语的道路上走得轻松一些,这里给大家分享一些关于英语学习心得,供大家参考. 英语学习心得1 ...
中国教师研修网计算机培训心得体会,教师网络培训学习心得体会最新5篇精选...
我感到这次培训活动不空洞,是一次既经济又有实效的培训活动,我们真的能够与课改专家应对面的交流,获取最新的教改信息和最优的教学方式.一起来看看教师网络培训学习心得体会最新5篇精选,欢迎查阅! 教师网络培 ...
计算机微课培训总结,微课学习心得体会范文3篇
微课的核心是微型教学视频片段(微视频),视频时长一般为5-8分钟左右,作为一种视频资源,虽然可以借助移动终端观看和学习,但其主流的传播媒体毕竟还是计算机.以下是学习啦小编为大家精心准备的:微课学习心得 ...
教师资格证计算机培训心得,教师培训学习心得体会范文4篇
作为一名人民教师,为了更好的教育好自己的学生,参加一些培训活动是十分有必要的,每一次参加完培训后我们都会有着不一样的感悟--以下是由出国留学网小编为大家整理的"教师培训学习心得体会范文4篇& ...
计算机校本培训心得,校本研修学习心得体会范文3篇
随着新课改的推进,校本研修应运而生,并且蓬勃发展!下面是学习啦带来的校本研修学习心得体会范文,希望大家喜欢. 篇一:校本研修学习心得体会范文 "有理想在的地方,地狱就是天堂; 有希望在的地方 ...
MYSQL选修课的心得体会_选修课学习心得体会范文7篇_大学选修课心得体会
大学公共选修课程是提供给学生自由选修的非专业性课程,目的在于开拓学生视野.完善和优化学生的知识结构,以及促进学生个性发展,选修课学习是丰富大学生的课余生活和扩大大学生的知识面.下面是学习啦带来的选修课 ...
关于Linux系统学习心得总结（基础篇）
关于Linux系统学习心得总结 1,什么是Linux系统简单来说,Linux就是一个操作系统 Linux是一套免费使用和自由传播的类Unix操作系统,是一个多用户.多任务.支持多线程和多CPU的操作 ...
html作业心得体会,学习心得体会范文6篇
以下是留学网提供的学习心得体会范文,想了解更多情况请关注出国留学网. 学习心得体会范文1: 学习就像一个无望无际的海洋,那样宽广,那样伟大,我们就像一艘小船,在这迷茫的大海中,寻找着彼岸,而上天对它的 ...

【angularjs】【学习心得】路由继续研究篇

【angularjs】【学习心得】路由继续研究篇相关推荐

最新文章

热门文章