模块分为

app:主模块;这个也是入口模块;可以挂下面这些组件

controller:控制器

directive:指令

service:服务

routes:路由

filter:过滤器


 

小提示:

  1. 任何一个angular应用都是从模块开始的,里面可以什么上面这些组件;
  2. 一个angular应用只有一个入口文件,就是ng-app;
  3. 入口模块可以依赖其它模块;(什么的时候会有数组,想要依赖的模块放在数组里就可以了)

这篇文章主要总结路由:routes;

根据不同的访问,展示不同的页面;可以做单页应用(头尾不变,只改变中间的内容);

路由是访问什么地址,产生什么页面

单页应用需要依赖别的文件;

1、用angular-route来做;(为了让切换的时候有动画效果,可以再依赖一个模块,angular-animate);

演示如下;真实项目中不会用angular-route做的,功能很弱的,不支持嵌套,不支持二级路由;

angular-route的小DEMO

<!DOCTYPE html>
<
html ng-app="appModule">
<
head lang="en">
<
meta charset="UTF-8">
<
title></title>
</
head>
<
body>
<
ul>
<!--#是锚点,不会引起页面跳转;如果不加会跳转的-->
<li><a href="#/home">首页</a></li>
<
li><a href="#/list">student</a></li>
</
ul>
<!--
下面是单页应用中,中间需要变动的;指令可以理解为某个标签的属性;拥有ng-view指令的就是需要变化的-->
<!--
点击homelist会把内容放在拥有ng-view的内容里;ng-view指定了需要刷新的内容
-->
<div ng-view=""></div
>
</
body>
</
html>
<
script src="../angular.js"></script>
<
script src="angular-route.js"></script>
<
script>
//app-config--run
var app=angular.module('appModule',['ngRoute']);//依赖angular-route.js的,模块是ngRoute,骆驼命名法;
//config里面可以进行配置,$routeProvider是从angular-route里声明的;通过when方法来设置不同的访问,指定渲染不同的模板templateUrl

app
.config(function($routeProvider){
$routeProvider.when('/home',{
templateUrl:'./tmpl/home.html',
controller:'homeCtrl'
}).when('/list',{
templateUrl:'./tmpl/list.html',
controller:'listCtrl'
})
});
//不同的模板会调用不同的控制器来渲染自身文件;拿控制器里$scope上的内容去渲染设置的模板(templateUrl
app
.controller('homeCtrl',function($scope){
$scope.name="主页先生";//这里的namehome.html里的表达式
});
app.controller('listCtrl',function($scope){
$scope.name="分页小姐"
});
</
script>

2、angular-ui-router;正常项目都是用这个来实现的;

配合bootstrap实现的

<!DOCTYPE html>
<
html ng-app="appModule">
<
head lang="en">
<
meta charset="UTF-8">
<
title></title>
<
link rel="stylesheet" href="bootstrap.css"/>
</
head>
<
body>
<
div class="container">
<
ul class="nav nav-tabs">
<!--用的是ui-sref做访问的状态,并不是href的路径了-->
<!--ng-class
是一个键值对,冒号:前面是条件,后面是一个布尔值
-->
<li ng-class="{active:'home'==current}"><a ui-sref="home" href="#">首页</a></li>
<
li ng-class="{active:'user'==current}"><a ui-sref="user" href="#">用户管理</a></li>
<
li ng-class="{active:'profile'==current}"><a ui-sref="profile" href="#">个人信息</a></li>
</
ul>
<!--angular-ui-router用的是ui-view-->
<div ui-view></div>
</
div>
</
body>
<
script src="../angular.js"></script>
<
script src="angular-ui-router.js"></script>
<
script>
//app-->config-->run(初始化方法)
var app=angular.module("appModule",["ui.router"]);
/*run是所有模块加载后运行的第一个方法,是初始化方法,run这个名字是写死的*/
app
.run(function($rootScope
){
//监听的是对象、去哪个状态、去的时候有哪些参数、从哪个状态来,来的时候有哪些参数
$rootScope.$on('$stateChangeStart',function(event,toState,toParams,formState,formParams){
//通过current属性来代表当前的状态,当前状态等于切换后的名字
$rootScope.current = toState.name;
});
});
app.config(function($stateProvider){
$stateProvider.state('home',{//home对应的是状态
url:'/home',//定义路径,首页
templateUrl:'./home.html',//用哪个文件
controller:'homeCtrl'//定义控制器
}).state('user',{
url:'/user',//用户管理
templateUrl:'./user.html',
controller:'userCtrl'
}).state('profile',{
url:'/profile',//个人信息
templateUrl:'./profile.html',
controller:'profileCtrl'
})
});
app.constructor("homeCtrl",function($scope){

});
app.constructor("userCtrl",function($scope){

});
app.constructor("profileCtrl",function($scope){

});
</
script>
</
html>

点击个人信息前,需要验证下是否登录

<script>
var app=angular.module("appModule",["ui.router"]);
app.run(function($rootScope){
$rootScope.$on('$stateChangeStart',function(event,toState,toParams,formState,formParams){
if(toState.needLogin&&!$rootScope.username){
alert("您还没有登录哦!");
event.preventDefault();//阻止事件的默认跳转
return;
}
$rootScope.current = toState.name;
});
});
app.config(function($stateProvider){
$stateProvider.state('home',{
url:'/home',//定义路径,首页
templateUrl:'./home.html',
controller:'homeCtrl'
}).state('user',{
url:'/user',//用户管理
templateUrl:'./user.html',
controller:'userCtrl'
}).state('profile',{
url:'/profile',//个人信息
templateUrl:'./profile.html',
controller:'profileCtrl',
needLogin:true
})
});
app.constructor("homeCtrl",function($scope){

});
app.constructor("userCtrl",function($scope){

});
app.constructor("profileCtrl",function($scope){

});
</
script>

下面再实现二级路由,做出二级菜单的效果;

<script>
var app = angular.module('appModule',['ui.router']);
app.config(function($stateProvider){
$stateProvider.state('home',{
url:'/home',
templateUrl:'./home.html',
controller:'homeCtrl'
}).state('user',{
url:'/user',
templateUrl:'./user.html',
controller:'userCtrl'
}).state('profile',{
url:'/profile',
templateUrl:'./profile.html',
controller:'profileCtrl'
}).state('user.list',{
url:'/list',//二级路由:用户列表
templateUrl:'./list.html',
controller:'listCtrl'
}).state('user.add',{
url:'/add',//添加用户
templateUrl:'./add.html',
controller:'addCtrl',
needLogin:true
}).state('user.view',{
url:'/view/:id',//查看用户信息
templateUrl:'./view.html',
controller:'viewCtrl'
})
});
app.run(function($rootScope,$state){
$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){
if(toState.needLogin&&!$rootScope.username){
alert('你还没登陆');
event.preventDefault();//阻止事件的默认跳转
return;
}
$rootScope.current = toState.name;
});
});
app.controller('homeCtrl',function($scope){});
app.controller('userCtrl',function($scope){});
app.controller('profileCtrl',function($scope){});
app.controller('addCtrl',function($scope){
$scope.title = "add";
});
app.controller('listCtrl',function($scope){
$scope.title = "list";
});
app.controller('viewCtrl',function($scope,$stateParams){
$scope.title = "view";
});
</
script>

增加【提示需要登录后跳转到登录页面】

最终代码如下:

<!DOCTYPE html>
<
html ng-app="appModule">
<
head lang="en">
<
meta charset="UTF-8">
<
title></title>
<
link rel="stylesheet" href="bootstrap.css"/>
</
head>
<
body>
<
div class="container">
<
ul class="nav nav-tabs">
<
li ng-class="{active:current=='home'}"><a ui-sref="home" href="#">首页</a></li>
<
li ng-class="{active:current=='user'}"><a ui-sref="user" href="#">用户管理</a></li>
<
li ng-class="{active:current=='profile'}"><a ui-sref="profile" href="#">个人信息</a></li>
</
ul>
<
div ui-view></div>
</
div>
</
body>
<
script src="../angular.js"></script>
<
script src="angular-ui-router.js"></script>
<
script>
var app = angular.module('appModule',['ui.router']);
app.config(function($stateProvider){
$stateProvider.state('home',{
url:'/home',
templateUrl:'./home.html',
controller:'homeCtrl'
}).state('user',{
url:'/user',//只写一个路径
templateUrl:'./user.html',
controller:'userCtrl'
}).state('profile',{
url:'/profile',
views:{
'':{//''相当于父级的意思
templateUrl:'./profile.html'
},
'name@profile':{
templateUrl:'./name.html'//模板的url
},
'age@profile':{
template:'<h3>myAge:18岁了</h3>'//普通 的HTML片断
}
}
}).
state('user.list',{
url:'/list',//二级路由:用户列表
templateUrl:'./list.html',
controller:'listCtrl'
}).state('user.add',{
url:'/add',
templateUrl:'./add.html',
controller:'addCtrl',
needLogin:true
}).state('user.view',{
url:'/view/:id',//'/view/:id' 这里传了:id
templateUrl:'./view.html',
controller:'viewCtrl'
}).state('login',{
url:'/login',
templateUrl:'./login.html'
})
});
app.run(function($rootScope,$state){
$rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){
if(toState.needLogin&&!$rootScope.username){
alert('你还没登陆');
$state.go('login');
event.preventDefault();//阻止事件的默认跳转
return;
}
$rootScope.current = toState.name;
});
});
app.controller('homeCtrl',function($scope){});
app.controller('userCtrl',function($scope){});
app.controller('profileCtrl',function($scope){});
app.controller('addCtrl',function($scope){
$scope.title = "add";
});
app.controller('listCtrl',function($scope){
$scope.title = "list";
});
app.controller('viewCtrl',function($scope,$stateParams){
$scope.title = "view";
$scope.id = $stateParams.id;
});
</
script>
</
html>

github地址:https://github.com/Broszhu/learn-angularJS/tree/master/2.route

 

 

~~~~~~~~~