状态嵌套的方法状态可以相互嵌套。有三个嵌套的方法： 使用“点标记法”，例如：.state(contacts.list, {})使用parent属性，指定一个父状态的名称字符串，例如：parent: contacts使用parent属性，指定一个父状态对象，例如：parent: contacts（contacts 是一个状态对象）点标记法在$stateProvider中可以使用点语法来表示层次结构，下面，contacts.list是contacts的子状态。 $stateProvider.state(contacts, {}).state(contacts.lis...
之前有写过一篇关于Angular自带的路由：ngRoute。今天来说说Angular的第三方路由：ui-router。那么有人就会问:为什么Angular有了自带的路由，我们还需要用ui-router呢？这里简单明了的说明下ngRoute和ui-router的区别吧，其实也没很大的区别，主要的就是ngRoute针对于单视图，而ui-router可用于多视图（这里说的视图是指在页面内我们可控制的，可变化的区域）。比如我们点击了一个link，我们需要在视图中跳转到指定的一个页面，那么...
本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容，分享出供大家参考学习，下面来看看详细的介绍： 一、router.navigate的使用 navigate是Router类的一个方法，主要用来跳转路由。 函数定义： navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` interface NavigationExtras {relativeTo : ActivatedRoutequeryParams : Paramsfragment : stringpreserveQueryParams : b...
实现ng2-router路由，嵌套路由 首先配置angular2的时候router模块已经下载，只需要引入即可import {RouterModule, Routes} from "@angular/router";我们要创建一个嵌套路由，所以需要创建以下文件 index.htmlapp.module.tsapp.component.tshome.component.tslist.component.tslist-one.component.tslist-two.component.ts实现效果： 路由，单机“首页”加载home.component.ts单机"列表“加载list.component.ts列表中包含嵌套路由，...
我们都知道，如果使用原生路由的话，Angular的视图是通过ng-view这个指令进行加载的。比如这样：<div ng-view></div>。一般，我们都会把这个指令放在index.html这个文件里面，然后，通过控制器来加载相应的模板视图。比如这样： var bookStoreApp = angular.module(bookStoreApp, [ ngRoute, ngAnimate, bookStoreCtrls, ]); bookStoreApp.config(function($routeProvider) { $routeProvider.when(/hello, { templateUrl: tpls/h...
关于ui-router中嵌套路由中的问题 1.首先我们的页面层次为 其中Main.html是我们的主页，我们要在main.html中对路由进行统一的管理。 main.html页面中有一个ui-view在这里将填充PageTab.html，同时被填充的PageTab.html中也有一个ui-view 这样就实现了嵌套路由。 最终效果： 当我们点击Page-1时出现的是Page1中的内容，同理点击Page-2。 下面是实际的代码： Main.html <!DOCTYPE html> <html ng-app="myApp"> <head> <meta chars...
在使用angular过程以前同事是采取一次性加载方式，在index页面一次性加载所有的js跟css，这种加载方式只适合教学和小型项目中，中大型不建议使用，加载速度影响到用户体验。 在使用了Ui-Router以后，我第一想法就是把每个功能组件化，在请求视图的时候再去加载该页面js和css，index页面主要加载必须文件：angular.js 于是尝试了下，这样去写，但是发现angular报错，原因是控制器没有注入主程序 后面在angular库里面发现ocLazyLoad，...
Angular2以组件化的视角来看待web应用，使用Angular2开发的web应用，就是一棵组件树。组件大致分为两类：一类是如list、table这种通放之四海而皆准的通用组件，一类是专为业务开发的业务组件。实际开发中大部分时间我们都需要处理业务组件。对于SPA应用来说，一个通用的问题就是如何控制页面的切换，解决这个问题的通用方法就是利用路由器来实现。 路由配置 现在我们先撇开Angular2来看看通用的路由器模型。通常来讲SPA应用需要路由...
前端去实现权限控制听起来有点扯淡（实际也有点扯淡），掩耳盗铃，主要是担心安全问题，但是如果在前后端分离的情况下，需要做一个带有权限控制的后台管理系统，angular基于ui-router应该怎么做呢？ 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。 一旦用户被分配了适当的角色后，该...
前端去实现权限控制听起来有点扯淡（实际也有点扯淡），掩耳盗铃，主要是担心安全问题，但是如果在前后端分离的情况下，需要做一个带有权限控制的后台管理系统，angular基于ui-router应该怎么做呢？权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。一旦用户被分配了适当的角色后，该用户...
今天偶然的把微信jssdk的debug打开后，发现调试信息总是提示签名错误，感情前两天api的"偶尔"不生效，不是因为还没执行代码，而是因为签名没正确啊！，这就是个100%可以重现的错误 但只要这个SPA刚刷新过，或加载完后中途没有跳转，，签名就会是正确的。 而当路由发生改变，我们对新"跳转"的页面重新签名之后，却出现了签名错误，而我们的签名明明是正确的，把各种参数拿去微信JS签名校验工具（http://mp.weixin.qq.com/debug/cgi-...
学习使用angular中，ui-route是其中的一个难点，简单使用没什么问题，但涉及到多级嵌套，就感觉有茫然，查了很多资料，踩过很多坑，到目前为止也不能说对ui-route有全面了解；这里只是把填补的几个坑记录一下备忘： 1.abstract的使用： $stateProvider.state(shop,{resolve:{"shoplist":function($http){return $http({url:"/bookApp/data/shoplist.php",method:"GET"})}},abstract: true,url:"/shop",templateUrl:"templates/shop...
我们看到这项技术已经应用在了许多的网页上。比如购物车，注册表单，入职流程以及许多多步表单，让用户更容易在线填写表单。下面我们将构建它： 使用UI Router，它能内嵌状态，为每个状态显示不同的view,我们能让多步表单变得相当的容易。为了快速的理解UI Router是怎样工作的，看我们的文章：AngularJS使用UI-Router路由让我们言归正传，开始创建我们的最棒的表单！ 创建工程创建工程有个模板结构. 需要个 布局文件 , 每个表单的...
首先给大家介绍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",{}); $stateP...
这几天看了angularjs和backbone，大看了解了knockout和emberjs，刚刚上网看到了一个angular的router的demo，现在顺便记下来代码如下: <!--- DEMO_INDEX.html --> <!doctype html> <head> <meta charset="utf-8"> <title>route</title> </head><br>//这个重要是做IE的兼容，发现不管用，IE坑爹，你懂的 <body ng-app="routeApp" class="ng-app:routeApp" id="routeApp"> <h1>Route Demo index</h1> <script src="http://cdnjs.clou...