ng-route与ui-router

ng-route与ui-router

上篇讲了AngularJs中路由内容，通过路由实现SPA单页面切换功能，但AngularJs中ng-route也存在其缺陷，它只能注入一个视图，不能实现多视图的嵌套，如需注入多个其内置服务实现起来太过麻烦，可以通过第三方ui-router来实现。1.使用方式： --1.引入 angular-ui-router.min.js 可进入ui-router官方网站下载： https://ui-router.github.io --2.了解基本内容 指令：ui-view     该指令主要用于进行目标视图模板的展示     链接：ui-sref     该属性，主要用于替换HTML中a标签的href属性，用于指定目标路由的名称     服务：$stateProvider     该服务主要用于进行路由状态的定义~ 路由URL和视图模板的绑定2.例1：简单使用

<ul>
<li><a ui-sref="hello" ui-sref-active="active">hello</a></li>
<li><a ui-sref="world" ui-sref-active="active">world</a></li>
</ul>
<div>
<!--<ui-view></ui-view>-->
<div ui-view></div>
</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
/* 配置路由信息 */
/*
$stateProvider: Ui路由
4000
中的状态服务提供者
*/
app.config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider,$urlRouterProvider) {

$urlRouterProvider.otherwise("/hello");

$stateProvider.state({
name: "hello", /* 状态名称，用于链接中使用 */
url: "/hello", /* 显示路径，在url地址中显示*/
template: "<h1>这是hello对应的内容</h1>"/*跳转的目标数据/页面*/
}).state({
name: "world",
url: "/world",
template: "<h1>这是world跳转之后对应的内容</h1>"
});
}]);
</script>

例2：组件方式的使用

<ul>
<li><a ui-sref="hello" ui-sref-active="active">hello</a></li>
<li><a ui-sref="world" ui-sref-active="active">world</a></li>
</ul>
<div>
<!--<ui-view></ui-view>-->
<ui-view name="header"></ui-view>
<div ui-view></div>
<ui-view name="footer"></ui-view>

</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
/* 配置路由信息 */
/*
$stateProvider: Ui路由中的状态服务提供者
*/
app.config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider,$urlRouterProvider) {

//          $urlRouterProvider.otherwise("/hello");

$stateProvider.state({
name: "hello", /* 状态名称，用于链接中使用 */
url: "/hello", /* 显示路径，在url地址中显示*/
views:{
"":{
template:"<h1>默认路由中显示的内容</h1>"
},
"header":{
template:"<h2>这是hello页面的头部内容</h2>"
},
"footer":{
template:"<h2>这是hello页面的页面底部内容</h2>"
}
}
}).state({
name: "world",
url: "/world",
views:{/*用于进行多数据展示的情况下*/
"":{
template:"<h1>这是默认路由ui-view中展示的内容</h1>"
},
"header":{
template:"<h1>这是world链接，展示在header中的内容</h1>"
},
"footer":{
template:"<h1>这是world链接，footer</h1>"
}
}
});
}]);
</script>

例3：嵌套方式的应用

<h1>用户中心</h1>
<ul>
<li><a ui-sref=".find">二级路由链接:查看用户</a></li>
<li><a ui-sref=".update">二级路由链接:修改用户</a></li>
<li><a ui-sref=".delete">二级路由链接:删除用户</a></li>
</ul>
<div>
<ui-view></ui-view>
</div>

<ul>
<li><a ui-sref="index" ui-sref-active="active">首页</a></li>
<li><a ui-sref="user" ui-sref-active="active">用户中心</a></li>
</ul>
<div>
<!--<ui-view></ui-view>-->
<div ui-view></div>

</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
/* 配置路由信息 */
/*
$stateProvider: Ui路由中的状态服务提供者
*/
app.config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider,$urlRouterProvider) {

$urlRouterProvider.otherwise("/index");

$stateProvider.state({
name: "index", /* 状态名称，用于链接中使用 */
url: "/index", /* 显示路径，在url地址中显示*/
templateUrl:"tab1.html"
}).state({
name: "user",
url: "/user",
templateUrl:"tab2.html"
}).state({
name:"user.find",
url:"/userfind",
templateUrl:"user/finduser.html"
}).state({
name:"user.update",
url:"/userupdate",
templateUrl:"user/updateuser.html"
}).state({
name:"user.delete",
url:"/userdelete",
templateUrl:"user/deleteuser.html"
});
}]);
</script>