angularjs ui-router的使用

<div data-ui-view=""></div>

这里的data-ui-view会把

<div ui-view=""/> the ui-view directive tells $state where to place your templates, 可以添加name,autoscroll,onload属性 所以fyi.html这个就是个通用的模板, 搞清楚几个名字:state,view

比如,有一个state:名为selectedProject,的templateUrl是“selectedProject.html” 然后在selectedProject.html问价里有<div ui-view=""/>,并且有一些其他的我们想作为selectedProject子模板的公共内容的部分 .state("selectedProject.reportList", {             url: "/reportList",             templateUrl: "reportList.html",             controller: ‘totalPage‘         }) 例如state:selectedProject.reportList,因为在名字上构成了一种父子关系,所以它会拿自己的模板去渲染父模板的ui-view部分

因此,一旦想提取一些公共的部分出来,这是一种方式,缺点是它要提取个parent state出来,这样就会多一个state和对应的模板和控制器

问题一:所以,如果我们想包含一个common.html进来怎么办呢?我们不想去提取先的parent state,因为这样所有子路由都改变了。 answer: 就把common部分的内容直接加到parent模板中去

问题二:子state的URL是相对于父state的url来写的,所以如果go的地址是一个子state,那么怎么设置父state中的参数值?

href VS ui-sref: ui-sref的值可以是config的任意一个state的名字,并且可以使用相对state名字,并且后面也可以带有参数的值, 所以结合ui-router使用起来方便简单 eg:<a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>

href是通用的跳转链接,但是不认识自定义的state名字

时间: 2024-10-20 18:11:57

angularjs ui-router的使用的相关文章

Angularjs ui router,路由嵌套 父controller执行问题

路由路径设置:structured.text   :structured是第一层路由,text是第二层路由: 问题如下,当$state.transitionTo路由到第二层是,structured的controller也会执行一次,导致页面控件重新加载刷新. $state.transitionTo( "structured.text", { args : $stateParams }, { reload: false} ); 查了github看到 https://github.com/

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

[转]AngularJS 使用 UI Router 实现表单向导

本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Rout

Angularjs中UI Router用法小记录

今天自己参考已有的项目代码学习了下UI Router的用法,写了个小demo,验证了下自己的想法,现把使用情况记录一下. 1.入口文件index.html,引入项目所需的js文件,标注ng-app,创建ui-view元素,为后面的嵌套做容器准备. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8">

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比. ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入. 1 <script src="lib/angular-route.js"></sc

使用angularjs ui grid 动态加载列名

来个开场白吧: 我是做.net开发的,来到新公司后,缺一个前端开发,SO,我就不得不挠着头干活呀......之前也就写写js,jq,刚看到前端架构的时候一脸懵逼...心里就有三个字:什么鬼!什么angularjs,angularjs ui grid,bootstrap,阿西吧.. 木有办法,总不能又跳槽吧.熟悉了一两天业务和代码后,经理说:"开干!". 首先,做的第一个功能就是使用angularjs ui grid 动态加载列.(这里不得不吐槽一点,ui grid的官方文档实例太少了,

angular : $location &amp; $state(UI router)的关系

次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, oldUrl) { log("$locationChangeStart from " + oldUrl) log("$locationChangeStart to " + newUrl) }); 接着是 ui router $state $rootScope.$on(&q

angular 的ui.router 定义不同的state 对应相同的url

Angular UI Router: Different states with same URL? The landing page of my app has two states: home-public, home-logged-in. Now I want to show both states on the same URL, but let the controller and template depend on the user session (is the user log

AngularJS学习之 ui router

1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view=""></ui-view>/*login页面,dashboard.html将会嵌入此处*/ 3.在app.js页面设置 .config(function ($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise('/login')

AngularJS+ui.bootstrap实现图片轮播

原地址:http://blog.csdn.net/yateswang/article/details/47751477 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href=&qu