AngularJS——ui-router的简单使用

AngularJS——ui-router使用

1、导入js文件

需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。

<script type="text/javascript" src="JS/angular.min.js"></script>
<script type="text/javascript" src="JS/angular-ui-router.min.js"></script>

2、注入angular模块

var app = angular.module('myApp', ['ui.router']);

注入的名字“ui.router”

3、在页面书写连接（导航）

<a ui-sref="index">login</a>

4、定义视图

ui-view替代的是ngroute路由的ng-view。

<div ui-view></div>

5、配置路由状态

app.config(function ($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/');//设置默认的访问路径
    $stateProvider     
    .state("index", { //导航用的名字，如<a ui-sref="index">login</a>里的login
        url: '/',    //访问路径 
        template:'<div>模板内容......</div>'
    })      

 });