ui-router

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的。本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍，并做一个对比。 ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ，作为框架额外的附加功能，都必须以 模块依赖 的形式被引入。 1 <script src="lib/angular-route.js"></script> 2) 配置路由 123456789 var app = angular.module('ngRouteApp', ['ngRoute']);app.config(function($routeProvider){ $routeProvider .when('/Main', { templateUrl: "main.html", controller: 'MainCtrl' }) .otherwise({ redirectTo: '/tabs' }); 服务与指令 ngRoute 路由模块名 $routeProvider 服务提供者，用来定义一个路由表，即地址栏与视图模板的映射，对应于 ui.router 中的 urlRouterProvider 和 stateProvider $route 服务

ui-router 是angular的第3方路由。他与ngrouter 没有太大区别。 ui-router 可以深度嵌套 ngrouter 简单的嵌套，针对于单个视图（视图就是需要嵌套的页面） 例如：我们点击了一个链接，我们需要在视图中跳转到指定的一个页面，那么ngRoute已经满足了我们的需求，而当我们点击的时候，需要在分别在不同的地方跳转两个不同的页面的时候，ngRoute就不够用了，我们就需要用到ui-router $urlRouterProvider $urlRouterProvider负责监听$location.当$location变化的时候，$urlRouterProvider开始在一个规则的列表中一个个的查找，直到找到匹配的值。 $urlRouterProvider用于在后端指定url的状态配置。 所有的url被编译成UrlMatcher对象。 otherwise 定义一个当请求的路径是无效路径时跳转的路径，或者首次加载的时候加载指定路径 $urlRouterProvider.otherwise('/home'); 以下是一个简单的demo <script type="text/javascript"> var myapp=angular.module('route',["ui.router"]); myapp.controller('myctr',function(

本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括： ● UI-Router约束路由参数 ● UI-Router的Resolve属性 ● UI-Router给路由附加数据 ● UI-Router的onEnter和onExit事件 AngularJS路由系列包括： 1、 AngularJS路由系列(1)--基本路由配置 2、 AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve 3、 AngularJS路由系列(3)-- UI-Router初体验 4、 AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数 5、 AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件 6、 AngularJS路由系列(6)-- UI-Router的嵌套State 项目文件结构 node_modules/ public/ .....app/ ..........bower_components/ ...............toastr/ ....................toastr.min.css ....................toastr.min.js ..............

首先是angular-ui-router的基本用法。 ■ 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) ■ $stateProvider.state(stateName, stateConfig) stateName是string类型 stateConfig是object类型 //statConfig可以为空对象 $stateProvider.state("home",{}); //state可以有子父级 $stateProvider.state("home",{}); $stateProvider.state("home.child",{}) //state可以是链式的 $stateProvider.state("home",{}).state("about",{}).state("photos",{}); stateConfig包含的字段：template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views,

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I'm working on an app that uses the ionic framework. This in-turn uses the ui-router. Currently, I have a pretty basic two-page app. However, it will expand to be much larger. At this time, I get an error when I transition from my first view to my second view. The error says: TypeError: Cannot read property '1' of null at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:14235:28 at updateView (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37839:30) at eventHook (http://localhost:11000/vendor/ionic/release/js

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am having an infuriating issue regarding ui-router . Everything works as I want, where all bad urls are sent to the 404 state. However, even though my default state is correctly rendered when the url is /#/ , the url of / is redirected to /404/ . How can I server the default state to both / and /#/ ? app.js MyApp.config( function ($stateProvider, $urlRouterProvider) { // For any unmatched url, send to 404 $urlRouterProvider.otherwise("/404/"); $stateProvider // Home (default) .state('default', { url: '/', resolve: { ... }, } }); Any help

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: For example: $stateProvider .state('external', { url: 'http://www.google.com', }) url assumes that this is an internal state. I want it to be like href or something to that effect. I have a navigation structure that will build from the ui-routes and I have a need for a link to go to an external link. Not necessarily just google, that's only an example. Not looking for it in a link or as $state.href(' http://www.google.com '). Need it declaratively in the routes config. 回答1: Angular-ui-router doesn't support external URL, you need redirect

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: I have 4 states: dashboard , dahboard.main , dashboard.minor , login . dashboard is abstract and it is a parent state for .minor and .main states. Below is my code: . state ( 'dashboard' , { url : "/dashboard" , abstract : true , templateUrl : "views/dashboard.html" , resolve : { auth : function ( $q , authenticationSvc ) { var userInfo = authenticationSvc . getUserInfo (); if ( userInfo ) { return $q . when ( userInfo ); } else { return $q . reject ({ authenticated : false }); } } }, controller : "DashboardCtrl" , data : {

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am following along on this year old ui-router tutorial http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/ and I'm getting the following error: Error: Could not resolve 'settings/quotes' from state 'settings' I am fitting this tutorial app into my Express.JS setup and I'm using Jade for my templates. All the Jade templates seem to be rendering properly but I am noticing that there is no href being created for the User Quotes ( settings/quotes URL) ui-sref link. Maybe there is a clue there. You can see this in the

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: I am trying to lazyload the following two scripts into an Angular ui-router partial view. <script type = "text/javascript" src = "https://www.google.com/jsapi" ></script> <script type = "text/javascript" > google . load ( "visualization" , "1" , { packages :[ "corechart" ]}); google . setOnLoadCallback ( drawVisualization ); function drawVisualization () { // Some raw data (not necessarily accurate) var data = google . visualization . arrayToDataTable ([ [ 'Month' , 'Bolivia' , 'Ecuador' , 'Madagascar' , 'Papua New Guinea' ,