标签：
## 第一步 在主页面中：使用angular；引入所有子页面需要的js；创建视图替换的位置；##
**<html ng-app="mainApp">**//////使用angular
<head lang="en">
<meta charset="UTF-8">
<title>学生管理系统</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/angular_modules/angular.min.js"></script>
<script src="js/angular_modules/angular-route.min.js"></script>
<script src="js/angular_modules/main.js"></script>/////引入所有页面需要的js
<script src="js/modules/login/login.js"></script>
<script src="js/modules/reg/reg.js"></script>
<script src="js/modules/student/student.js"></script>
<style>
.container{
width:1000px !important;
}
</style>
</head>
<body>
<h1>豆豆学生网</h1>
**<div ng-view>**///////创建视图替换的位置
</div>
</body>
</html>
## 第二步 配置路由：引入所有依赖的模块 配置其他页面的路由和控制器##
var mainApp=angular.module("mainApp",["ngRoute","regModule","loginModule","studentModule"]);
mainApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/login",{templateUrl:"js/modules/login/login.html",controller:"loginController"});
$routeProvider.when("/reg",{templateUrl:"js/modules/reg/reg.html",controller:"regController"});
$routeProvider.when("/student",{templateUrl:"js/modules/student/student.html",controller:"studentController"});
$routeProvider.otherwise({
redirectTo:"/reg"
});
}]);
## 第三步：去掉子页面们的头和尾 把js部分提出来 ##
一：去掉子页面们的头和尾
<div class="container" >
<div class="row">
<div class="col-xs-8 col-xs-push-2">
<h2>登陆界面</h2>
<form class="form-inline" action="#" >
<div >
用户名：<input type="text" class="form-control" name="username"/><label></label>
</div>
<br/>
<div >
密 码：<input type="password" class="form-control" name="password"/>
</div>
<div >
<input type="button" class="btn btn-primary" ng-click="toStuPage()" value="提交"/>
</div>
</form>
</div>
</div>
</div>
二：把js部分提出来 真正创建子模块们；使用控制器控制；联系页面和控制器
是在路由中实现的，所以各个模块的页面和js并不需要他们自己联系。
var studentModule=angular.module("studentModule",[]);
studentModule.controller("studentController",function($scope,$http){
........js代码.....
});
## 目录关系示意图 ##
--public
--css
--font
--js
--angularjs_module
--angular.min.js
--angular-route.min.js
--main.js(配置js)
--modules(各个模块)
--reg
--reg.html(子页面)
--reg.js(js)
--login
--login.html
--login.js
--students
--students.html
--students.js
--index.html(主页面)
标签：
原文地址：http://www.cnblogs.com/qzj229/p/4985123.html
