今天给大家详细操作一下ui路由怎么用：
实现多个页面跳转 楼主实现了4个功能的页面：首页 登录 注册 商品列表
第一步：
首先要做好文件夹，文件夹内需要的东西都添加好 如下图：
30shop-ui路由是大文件
把项目文件构建好
第二步
接下来写的是index的内容 要记住先引入需要的各种库：
记住别忘记引入ui-router.js
<!DOCTYPE html>
<html ng="myShop">
<head>
<meta charset="UTF-8">
<title>ui路由</title>
<link rel="stylesheet" href="js/lib/bootstrap-3.3.7-dist/css/bootstrap-min.css" />
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-ui-router.min.js"></script>
<script src="component/main/main.module.js"></script>
<script src="component/login/login.module.js"></script>
<script src="component/regist/regist.module.js"></script>
<script src="component/goodslist/goodslist.module.js"></script>
<script src="js/app/app.module.js"></script>
</head>
<body>
</body>
</html>第三步
编写index内容 body里的代码：
<body>
<div class="container-fluid">
<header>
<div class="page-header">
<h1>我的商城<small>Angular案例学习及总结</small></h1>
</div>
</header>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs nav-justified navbar-default">
<li><a ui-sref="index">首页</a></li>
<li><a ui-sref="login">登录</a></li>
<li><a ui-sref="regist">注册</a></li>
<li><a ui-sref="search">搜索</a></li>
<li><a ui-sref="shopcart">购物车</a></li>
<li><a ui-sref="order">订单</a></li>
</ul>
</div>
</div>
<div class="row content">
<div ui-view></div>
</div>
<div class="row">
<footer>
<ul class="list-inline">
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</footer>
</div>
</div>
</body>效果如下 把简单的页面写了一下 头部-内容-底部：
第四步
因为楼主知道自己的项目构造，就直接在主js里直接注入，小伙伴们如果不是很了解自己的项目，可以先写其他页面，再来写大的js部分
这里面涉及到跨域访问的设置白名单用法
$sceDelegateProvider:数据安全验证代理服务提供者
$resourseUrlWhitelist：用于设置白名单
$stateProvider: 服务，可以为控制器或服务提供url的各个部分
var app=angular.module("myShop",[
"ui-router","main","login","regist","goodslist"
]);
/* 这里用于配置路由信息和跨域的白名单信息 */
app.config(["$sceDelegateProvider","$urlRouterProvider","$stateProvider",
function($sceDelegateProvider,$urlRouterProvider,$stateProvider){
//跨域白名单设置
$sceDelegateProvider.resourceUrlWhitelist([
"self",
"http://datainfo.duapp.com/**" //*前面都一样 列出来
])
//一级路由配置
$stateProvider
.sate({ /*首页*/
name:"index",
url:"/index",
template:"<main-comp></main-comp>"
})
.state({
name:"index.classlist",
url:"/classlist",
template:"<lists-comp></lists-comp>",
params:{
classID:null
}
})
.state({ /*登录*/
name:"login",
url:"/login",
template:"<login-comp></login-comp>"
})
.state({ /*注册*/
name:"regist",
url:"/regist",
template:"<regist-comp></regist-comp>"
});
// 配置打开默认访问页面
$urlRouterProvider.otherwise("/index");
}]);第五步
登录页面：
html代码：
<div class="row box-login">
<div class="col-md-6 col-md-offset-3">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">账号</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="username" id="username" placeholder="请输入您的账号">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" ng-model="password" id="password" placeholder="请输入您的密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" ng-click="loginFn()" class="btn btn-primary">登录</button>
</div>
</div>
</form>
</div>
</div>
<style type="text/css">
.box-login{
padding-top:50px;
}
</style>js代码：
var login=angular.module("login",[]);
login.component("loginComp",{
templateUrl:"component/login/login.template.html",
controller:["$scope","$http",function($scope,$http){
$scope.loginFn=function(){
$http({
method:"GET",
url:" http://datainfo.duapp.com/shopdata/userinfo.php",
params:{
status:"login",
userID:$scope.username,
password:$scope.password
}
}).then(
function success(resp){
console.log("请求成功",resp);
if(resp.date instanceof Object){
console.log("登录");
locationStorage.setItem("loginUser",Object); //记录用户
$location.path("/index");
}
},
function error(resp){
console.log("系统繁忙");
}
);
}
}]
});效果如下：
第六步
注册页面 注册和登录页面一样 就不啰嗦了~
第七步
主页面：把商品列表展示出来：
<div class="row content-main">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item" ng-repeat="c in classlist">
<a ui-sref=".classlist({classID:c.classID})">
<span ng-bind="c.className"></span>
</a>
</li>
</ul>
</div>
<div class="col-md-9 box-main">
<div ui-view></div>
</div>
</div>
<style type="text/css">
.content-main{
padding-top: 20px;
width: 1100px;
}
.box-main{
padding: 10px;
border:1px solid #efefef;
}
</style>
js代码：
var main=angular.module("main",[]);
main.component("mainComp",{
templateUrl:"component/main/main.template.html",
controller:["$scope","$http",function($scope,$http){
$http({
method:"GET",
url:"http://datainfo.duapp.com/shopdata/getclass.php",
}).then(
function(resp){
console.log("请求成功",resp);
$scope.classlist=resp.data; //商品类型列表
},
function(resp){
console.log("系统繁忙");
}
)
}]
});效果如下：
第八步
点击左边获取的商品，获取相对应的商品列表
这里用到自定义过滤器，因为页面中显示的商品名称太长，影响美观，所以就用了自定义过滤器。
<div class="row">
<div class="col-sm-6 col-md-4" ng-repeat="g in goodslist">
<div class="thumbnail thumbnail-goodslist">
<img ng-src="{{g.goodsListImg}}" alt="{{g.goodsName}}"/>
<div class="caption">
<p>
<span ng-bind="g.goodsName | formatGoodsName:15"></span>
</p>
<p>
<span ng-bind="g.price |currency:'￥'"></span>
</p>
<p>
<a href="#" class="btn btn-primary" role="button">立即购买</a>
<a href="#" class="btn btn-danger" role="button">加入购物车</a>
</p>
</div>
</div>
</div>
</div>
<style type="text/css">
.thumbnail-goodslist>img{
width:150px;
height:150px;
}
</style>
js代码：
var goodslist=angular.module("goodslist",[]);
goodslist.component("listsComp",{
templateUrl:"component/goodslist/goodslist.template.html",
controller:["$scope","$http","$stateParams",function($scope,$http,$stateParams){
$http({
method:"JSONP",
url:"http://datainfo.duapp.com/shopdata/getGoods.php",
params:{
classID:$stateParams.classID
}
}).then(
function(resp){
console.log("请求成功",resp);
$scope.goodslist=resp.data;
},
function(resp){
console.log("请求失败",resp);
}
);
}]
});
goodslist.filter("formatGoodsName",function(){
return function(value,num){
if(value==""){
return "";
}
value=value.substring(0,num);
return value;
}
})
效果如下：
这样一整个项目小开发就做出来了，小伙伴们可以看看最后运行的结果是什么样的。
当我们在项目开发的时候，用到多页面开发时，ui路由还是很重要的，有什么问题一起来探讨哇！
扫一扫
1751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
