ui-router

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have an Angular application using ui-router and I am having issues whenever I refresh the page. I am using nested views, named views to build the application. Whenever I refresh the page, ui-router doesn't reload the current state and just leaves the page blank. On page load $state.current is equal to Object {name: "", url: "^", views: null, abstract: true} I am reading my navigation from a .json file via $http and looping through the states. So this is what I can show: stateProvider.state(navElement.stateName, { url: navElement.regexUrl ?

摘要:[MAN铁人赛]Day 07:AngularJS - Plugin:UI-Router A -> AngularJS - Plugin:UI-Router 前言 在昨天介绍的Routing中，让大家对换页有基本的概念后就要来介绍这个AngularJS上必装超强的plugin:UI-Router。 UI-Router github UI-Router是AngularJS的一个routing framework，主要是帮助你可以有架构将你的页面分开成不同的子页面呈现Nested view，不同于原本的$route service，UI-Router 是一个透过state的架构来切换页面，这让你有更大的弹性来切换你的页面。 使用方式如下： ... ... 范例 范例 首先在结构上总共有五个页面，页面上大致说明如下 index.html 范例首页，载入所有css,js与设定ng-app的应用范围，重点设定如下： myApp.config(function($stateProvider, $urlRouterProvider) { // // For any unmatched url, redirect to /state1 $urlRouterProvider.otherwise("/state1"); // // Now set up the states

angularJS里面的ngRoute并不能满足我们的开发需求 因为angular的ng-view在写多个的情况下，不能控制内容的显示，渲染出来的内容都是一样的。 所以用第三方插件ui-router ui-router 由第三方编写的路由模块，相比之前的ngRoute更加灵活多变 网址： http://angular-ui.github.io/ 可以在页面挖多个坑,填不同的内容 ui-rotuer把不同的url锚点值称之为不同的状态(state) 模块名为 ui.router 通过 npm 安装 npm install angular-ui-router ui-router使用步骤 1、 引用angularjs和angular-ui-router 2、 在模块中引入ui.router 3、 创建config，通过$stateProvider来配置路由表 $stateProvider . state ( { name : 'myhome2' , //路由的名称 url : '/myhome4' , //路由匹配的地址 template : '<h1>123</h1>' } ) 4、 通过$urlRouterProvider配置默认路由 $urlRouterProvider . otherwise ( '/myhome4' ) ; 示例 < div ng-app = " myApp "