源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Angular.js中angular-ui-router的简单实践

  • 时间:2022-02-09 16:07 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Angular.js中angular-ui-router的简单实践
[b]开始之前[/b] 一些说明 [list=1] [*]angular-ui-router的使用方法有很多,此文中,我们直接在控制器中使用,并完成一个简单的路由。[/*] [*]文中 Angular.js 的版本为 1.5.2[/*] [/list] [b]下载和安装[/b] 直接通过 [code]bower [/code]来安装[code] angular-ui-router [/code] 使用 bower 安装 angular-ui-router 之前,首先需要安装 npm 和 bower 。npm 是node.js的包管理工具,下载安装node.js,即可完成 npm 的安装 通过 [code]npm [/code]安装 [code]bower [/code](如果未安装 bower):
npm install -g bower
安装[code] angular-ui-router[/code]
bower install --save angular-ui-router
[b]使用 angular-ui-router[/b] 首先要在 angular.module 方法中,注入 angular-ui-router
var app = angular.module('myApp',['ui.router']);
定义路由规则
app.config(function($stateProvider , $urlRouterProvider){

 /**
  * $stateProvider 提供的 state 方法包含两个参数
  * @param 路由名称 String
  * @param 路由规则 Object
  * 此方法用来定义路由名称和规则
  */
 $stateProvider.state('user' , {
  url : "/user/:uid",
  controller : 'MyCtrl'
 });
 
 // 将未定义的路由重定向
 $urlRouterProvider.otherwise("/");
});

在控制器中使用
app.controller("MyCtrl" , function($scope , $state){
 // 监听路由变化
 $scope.$on('$stateChangeSuccess' , function(){
  var route_name = $state.current.name; // 获取当前路由名称
  if(route_name === 'user'){
   var uid = $state.params.uid // 获取路由参数
   console.log(uid);
  }
 });
 
 // 主动路由跳转:路由名称,路由参数
 $state.go('user' , {'uid' : 88} );
});
[b]其他[/b] 在 html 中,用 <a> 标签指定路由的写法为:
<a href="#/user/88" rel="external nofollow" >Tom</a>
angular.js的路由,在浏览器url地址栏以这样的形式展现:www.example.com/my/page#/user/88 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部