Angularjs UI-laravel route 跳转为什么无法跳转到 testhtml

来源：蜘蛛抓取(WebSpider) 时间：2017-10-25 18:39 标签： mvc route html
AngularJS路由Ui-router模块用法示例
作者：面具哥布林
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了AngularJS路由Ui-router模块用法,结合实例形式分析了Ui-router模块的功能、使用方法及相关注意事项,需要的朋友可以参考下
本文实例讲述了AngularJS路由Ui-router模块用法。分享给大家供大家参考，具体如下：
由于某些设计原因，AngularJS原生的路由模块有一些缺点，比如说不支持view的嵌套等，所以有许多社区开始自己设计路由模块，最有代表性的就是ui-route了。
ui-route是一个功能强大的路由模块，它在原生的ng-route模块上加强了其他方面的功能。
现在就开始做几个DEMO接触一下ui-route。
&!--初始页面--&
&!doctype html&
&meta charset="UTF-8"&
&link href="self.css" rel="external nofollow" rel="stylesheet"&
&div ng-app="myApp"&
&div&&a ui-sref = "index"&首页&/a&&/div&
&div ui-view&&/div&&!--这里是路由视图存放的地方--&
&script src="angular.min.js"&&/script&
&script src="angular-ui-router.js"&&/script&
&script src="test2.js"&&/script&
首先必须引用angular-ui-router.js文件。这个文件是区别于AngularJs的angular-route.js文件的。而且必须把该文件放在angular.min.js下面。
观察一下Html的body代码，可以发现有三个地方与使用原生的ng-route时的body代码不同。他们分别是ui-sref ， index 以及ui-view 。先跳过，看一下如何初始化ui-route模块。
初始化ui-route模块：
var app = angular.module('myApp',['ui.router']);
app.config(["$stateProvider",function($stateProvider){
$stateProvider
.state("index",{
template:'&div&我是首页内容&/div&'
首先，和原生ng-route路由模块相似的是，必须先把ui-route注入。然后再进行具体的配置。与原生的ng-route不同的是，ui-route用state() 代替了原生的when() ，它在when()，的基础上新增了一个参数，这里是index，用以区分这部分路由对哪一个命令进行响应。
回到之前的&div&&a ui-sref = "index"&首页&/a&&/div& ，大概就知道他们视图和它之间的关系了。ui-view 代替了以往的ng-view ，ui-sref 替换掉了以前的ng-href，而它也不再是指向链接，而是指向“导航”的名字。
其中的url属性可以唯一标识改路由的后续地址，用以跟后面的路由进行区分。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《》、《》及《》
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具输入关键字或相关内容进行搜索
使用mui的openwindow方法没办法直接在angularjs的控制器里面进行页面调整，调整时不报错，但是页面反复刷新首页，！在三星note3上联调出现的问题！
事实证明路由是用来应付大型项目，像app这种东西，总共加起来也没几个页面，用不着路由这么庞大的家伙，直接使用最简单的angularjs即可，我这边在初期踩过这个坑之后，整个项目全部整改了，搞死人了！坑死人的路由，别用了，苹果可以，安卓就不要想了！
我也卡在这个问题上面我把location.href给打印出来后发现他的地址结构是这样的：
file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/index.html而并非我们在网页上使用的
http://127.0.0.1:8020/test/index.html#!/这样HTTP的，所以路由就没法工作了~你找到解决方法了么？
不需要使用它的路由啊
直接用来绑定数据就ok
要回复问题请先或
浏览: 1673
关注: 3 人Angular 页面跳转时传参问题
作者：lvyi
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了Angular 页面跳转时传参问题的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
首先，你需要已经配置过你的rout，比如：
$stateProvider
.state('firstPage',{
url:'/Page/firstPage',
templateUrl: 'Page/views/firstPage.html',
controller: 'firstPageCtrl'
//dependencies: ['service/vipSeachService']
.state('secPage', {　　　　　　　　　params:{'message':null},
url: '/Page/secPage',
templateUrl: 'Page/views/secPage.html',
controller: 'secPageCtrl'
其中注意第二个地址信息中的params属性，这个就是你要接受参数的对象，以key ：value的形式定义
而在跳转页面时，两个方法都可以传参，一种是直接写在html中
&a ui-sref="sec-page"&跳转第二页&/a&
此时传参跟在页面地址的后面
&a ui-sref="sec-page（{message:messageId}）"&跳转第二页&/a&
第二种就是写在controller中
.controller('firstPageCtrl', function($scope, $state) { 　
$state.go('secPage'); });
同样参数写在地址后面，以对象的形式
.controller('firstPageCtrl', function($scope, $state) {
　　$state.go('secPage'，{message:messageId});
传过去的参数，需要在目标页面的controller中用$stateParams接收，改方法需要提前注入
.controller('secPageCtrl', function($scope, $state,$stateParams) {
　　var test=$stateParams.
以上所述是小编给大家介绍的Angular 页面跳转时传参问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 mvc route html 的文章

 

随机推荐