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

前端之家收集整理的这篇文章主要介绍了Angular.js中angular-ui-router的简单实践前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

开始之前

一些说明

  1. angular-ui-router的使用方法有很多,此文中,我们直接在控制器中使用,并完成一个简单的路由。
  2. 文中 Angular.js 的版本为 1.5.2

下载和安装

直接通过 bower 来安装 angular-ui-router

使用 bower 安装 angular-ui-router 之前,首先需要安装 npm 和 bower 。npm 是node.js的包管理工具,下载安装node.js,即可完成 npm 的安装

通过 npm 安装 bower (如果未安装 bower):

安装 angular-ui-router

使用 angular-ui-router

首先要在 angular.module 方法中,注入 angular-ui-router

定义路由规则

/**

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

// 将未定义的路由重定向
$urlRouterProvider.otherwise("/");
});

在控制器中使用

获取当前路由名称 if(route_name === 'user'){ var uid = $state.params.uid // 获取路由参数 console.log(uid); } });

// 主动路由跳转:路由名称,路由参数
$state.go('user',{'uid' : 88} );
});

其他

在 html 中,用 标签指定路由的写法为:

angular.js的路由,在浏览器URL地址栏以这样的形式展现:www.example.com/my/page#/user/88

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章