我爱编程

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>

上一篇下一篇

猜你喜欢

热点阅读