发表于： 2017-04-12 01:36:31
2 966
今天完成的事情：任务6完成，踩了很多坑，这么多天总算完成了嵌套路由的效果。
明天计划的事情：任务七知识点angular双向绑定，并且对登录页的两个input框添加ng-model进行双向绑定。
遇到的问题&收获：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/task6.css">
<title>index</title>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body ng-app="myApp">
<div ui-view=""></div>
<script type="text/javascript" src="dist/jquery-3.1.1.min.js"></script>
<script src="dist/angular.min.js"></script>
<script type="text/javascript" src="js/all.js"></script>
<script type="text/javascript" src="dist/angular-ui-router.js"></script>
</body>
</html>
主页：引入任务所需的angularjs框架，bootstrap库，jq库，并新建了一个app.js作为全局配置和初始化文件，此处引入主模块：“myApp”和放置的路由：ui-view来实现试图切换。
var app=angular.module("myApp",["ui.router"]);
//声明AngularJS模块, 并把ui-router传入AngularJS主模块，所有的结合起来我们就得到了Angular模块。
app.config(function($stateProvider,$urlRouterProvider){
//把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入
$urlRouterProvider.otherwise('/index');
//设置默认路由路径
$stateProvider.state('index',{
url:'/index',
templateUrl:'html/home.html'
})
.state('index.login',{
url:'/index',
templateUrl:'html/login.html',
})});
//子路由路径
//注意子路由路径1状态名称加上了前缀，并且使用点“.“号进行了分隔. 这里很关键，它会告诉路由引擎我们在这里定义的是子页面/嵌入页面/嵌入.
<div class="main" >
<div class="btn-group-vertical" style="margin-left: 50px;margin-top:50px;">
<button type="button" class="btn btn-primary-xs" ui-sref=".login" >登录</button>
<button type="button" class="btn btn-primary-xs" ui-sref=".add-student">列表</button>
<button type="button" class="btn btn-primary-xs" ui-sref=".student-information">编辑</button>
</div>
<div ui-view=""><span style="font-size:30px;margin-top:80px;margin-left: 300px; display:block;color:red;">欢迎来到后台管理系统</span></div>
</div>
App.js中定义的状态同主页中定义的对应文本进行了关联. 当我们使用点符号对它进行了声明，程序就会认为页面时ui-view中的子页面或者说嵌入页面，它们就是路由配置中需要被展示的页面。
返回列表
评论