Angularjs中UI Router的使用方法

学习使用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/list.html",
    controller:"ShopListController"
})

使用abstract属性有什么用,官方说明:abstract: true 表明此状态不能被显性激活,只能被子状态隐性激活。不能显性激活即不能直接通过"/shop"访问此状态路由,那不就是一条死路吗?那要你何用。等等,我们再看看后面一句:能被子状态隐性激活,貌似还能活起来,怎么让他活起来?我们再看下面的代码:

 .state('shop.main',{
    url:"/:id",
    abstract: true,
     templateUrl:"templates/shop/main2.html",
     controller:"ShopMainController"
  })

状态:"shop.main"是shop的子状态,按理论shop.main可以激活shop,我们只需要这样去访问:/shop/1,这样我们可以激活shop状态,和"shop.main"

我们暂且不着急,我再再给加上abstract属性,玩点刺激的,我们再把激活点再往后一级看下面代码:

  .state('shop.main.info',{
    url:"",
    templateUrl:"templates/shop/info.html",
    cache:'false',
    controller:"InfoController"
  })
  .state('shop.main.author',{
    url:"/author",
    template:"<div>authorauthorauthorauthorauthor</div>"
  })
  .state('shop.main.samebook',{
    url:"samebook",
    template:"<div>samebooksamebooksamebooksamebooksamebooksamebook</div>"
  })

我看状态"shop.main.info"这个状态 的url为""所以我们要激活这个状态只需要这样去访问"shop/1"所有可以做为"shop.main"的一个默认子状态。

此时模块的嵌套关系为:list.html嵌套main.html,main.html嵌套info.html。我们可以通过"shop/:id"的url激活这个三层嵌套。

2控制器中参数的使用:

这个没什么难点,在控制器中注入"$stateParams" url参数在这个对象里可以拿得到 :

shop.controller("ShopMainController",['$scope','$stateParams','$rootScope',function($scope,$stateParams,$rootScope){
  $scope.persons = [1,2,3,4,5,6];
  $scope.good = {
    id:$stateParams.id
  }
  cfpLoadingBar.start();

}]);

3.怎么防止模板缓存

在开发过程中,模板缓存严重影响我们调试,有时候代码修改了,模板却没有任何变化。很苦恼,其他我们只需要监听下stateChangeSuccess,然后再清除$templateCache就行,这里我们采用run方法添加监听:

bookApp.run(['$rootScope','$templateCache', function ($rootScope, $templateCache) { 

 var stateChangeSuccess = $rootScope.$on('$stateChangeSuccess', stateChangeSuccess); 

 function stateChangeSuccess($rootScope) {
  $templateCache.removeAll();
 }
}]);

以上就是本文的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

  • angularJS中router的使用指南

    这几天看了angularjs和backbone,大看了解了knockout和emberjs,刚刚上网看到了一个angular的router的demo,现在顺便记下来 复制代码 代码如下: <!--- DEMO_INDEX.html --> <!doctype html> <head> <meta charset="utf-8"> <title>route</title> </head><br>

  • 详解angular2实现ng2-router 路由和嵌套路由

    实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com

  • Angular2学习笔记——详解路由器模型(Router)

    Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置 现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa

  • angular基于路由控制ui-router实现系统权限控制

    前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配

  • 详解angular笔记路由之angular-router

    本文介绍了angular笔记路由之angular-router,分享给大家,具体如下: 创建项目 ng new router --routing \\ 加routing参数 \\ 会新增一个app-routing.module.ts 文件 路由的基本使用 名称 简介 Routes 路由的配置,保存着哪一个URL对应展示哪一个组件和在哪一个RouterOutler展示 RouterOutler 在HTML中标记路由内容呈现的占位符指令 Router 运行时执行的路由对象,可以通过navigate(

  • AngularJS ui-router (嵌套路由)实例

    我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的.比如这样:<div ng-view></div>.一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图.比如这样: var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.conf

  • 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类型 stateCon

  • Angularjs中UI Router的使用方法

    学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解:这里只是把填补的几个坑记录一下备忘: 1.abstract的使用: $stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.p

  • AngularJS 使用 UI Router 实现表单向导

    我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易. 为了快速的理解UI Router是怎样工作的,看我们的文章:AngularJS使用UI-Router路由 让我们言归正传,开始创建我们的最棒的表单! 创建工程 创建工程有个模板结构. 需要个 布局文件 , 每个表单的视图文件, 格式文件, 以及JavaScri

  • AngularJS中$apply方法和$watch方法用法总结

    本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

  • 探讨AngularJs中ui.route的简单应用

    html页面代码 <body ng-app="myApp"> <div ui-view></div> <div ui-view="login"></div> <div ui-view="enroll"></div> </body> 需要引用的ui.router.js文件 <script src="angular-ui-router.js

  • AngularJS中实现动画效果的方法

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script> 还需在应用中使用模型 ngAnimate: <body ng-app="ngAnimate

  • 使用AngularJS实现表单向导的方法

    今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易. 让我们言归正传,开始创建我们的最棒的表单! 创建工程 创建工程有个模板结构.

  • Angularjs中controller的三种写法分享

    前言 在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中controller其实就是一个方法,它有三种写法,下面来一起看看吧. 第一种: <pre name="code" class="javascript">var AppController = ['$scope', function($scope){ $sco

  • AngularJs中route的使用方法和配置

    angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一.该强大的地方有很多,比如双向数据绑定,应用了后端的MVC模式到前端,自定义指令等. 既然是单页面应用,肯定离不开页面的切换.我们首先来说一下angular的路由. angular实现页面切换时用了route. <script src="js/plugins/angular/angular.min.js"></script> <script src="js/p

  • 使用AngularJS中的SCE来防止XSS攻击的方法

    这篇文章展示了有关XSS(跨站脚本)的不同方案以及怎样使用AngularJS中SCE($sceProvider),sanitize service这些特性来正确处理XSS.如果我遗漏了什么重要的地方请直接评论/建议.同时,错别字请见谅. 以下几点内容将是我接下来要讲述的重点: 全部转码HTML 安全插入HTML的同时忽略类似"script"这样的标签.如果不加以注意,这将一样存在风险同时也会丑化页面,尤其是在有"img"标签的时候. 依赖并插入纯HTML:这也有风险

随机推荐