angular-ui-router的简单使用
2017-08-19 本文已影响0人
穷鬼_h
下载和安装
直接通过bower来安装angular-ui-router
使用bower安装angular-ui-router之前,首先需要安装npm和bower。npm是node.js的包管理工具,下载安装node.js,即可完成npm的安装
通过npm安装bower(如果未安装bower):
npm install -g bower
安装好bower之后,接下来使用bower安装angular-ui-router
bower install --save angular-ui-router
使用angular-ui-router
首先要在angular.module方法中,注入angular-ui-router
var app = angular.module('myApp',['ui.router']);
定义视图,你的html页面将会呈现在这儿
<div ui-view></div>
定义路由规则
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
//$stateProvider.state() 方法包含两个参数,此方法用来定义你的路由和规则
//第一个你的路由名称 类型:string
//第二个你的路由规则 类型Object
$stateProvider.state('work',{
url:'/work', //访问路劲
templateUrl:'view/work.html', //把view文件夹下的workhtml文件显示
controller:'workCtrl' //定义控制器,(有需要写)
})
$urlRouterProvider.otherwise('work'); //将一个路由重定向
}])
执行到现在,你的页面基本上就可以呈现出你想要的内容了,然后看一下HTML页面。格式就在这儿省略了!
<div ui-view></div>