济宁小程序开发哪家好_AngularJS完成路由实例

AngularJS实现路由实例     投稿:hebedich   本文给大家分享的是使用angularjs路由框架实现的一个简单页面跳转功能,非常的实用,也很详细,有需要的小伙伴可以参考下

1、首先我们要引进angular.js和angular-route.js文件

代码如下: script type="text/javascript" src=lib/angular.min.js /script script type="text/javascript" src=lib/angular-route.js /script

2、然后我们要在html中创建锚点和容器(ng-view)

 a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 第一页 /a 
 a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 第二页 /a 
 div ng-view /div 

3、在模块中注入ngRoute依赖

代码如下: angular.module('myApp',['ngRoute'])

4、配置路由

config(['$routeProvider',function ($routeProvider) {
 $routeProvider.when('/first',{
 template : ' h1 first /h1 '
 .when('/second',{
 template : ' h1 second /h1 '
 .otherwise({
 redirectTo : '/first'
}])

效果展示:


完整代码:

 !DOCTYPE html 
 html ng-app="myApp" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 script type="text/javascript" src=lib/angular.min.js /script 
 script type="text/javascript" src=lib/angular-route.js /script 
 /head 
 body 
 a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 第一页 /a 
 a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 第二页 /a 
 div ng-view /div 
 script type="text/javascript" 
 angular.module('myApp',['ngRoute'])
 .config(['$routeProvider',function ($routeProvider) {
 $routeProvider.when('/first',{
 template : ' h1 first /h1 '
 .when('/second',{
 template : ' h1 second /h1 '
 .otherwise({
 redirectTo : '/first'
 /script 
 /body 
 /html 

接下来我们做一个模拟项目路由

1、首先我们看一下我们所需要的文件


所有文件展示

2、之后我们看一下效果图


有两个页面,first page跟second page,点击两个按钮,切换不同页面,展示不同样式

3、好了。我们看一下代码吧!

<

 !DOCTYPE html 
 html ng-app='myApp' 
 head 
 meta charset="UTF-8" 
 title Document /title 
 script type="text/javascript" src="lib/angular.min.js" /script 
 script type="text/javascript" src="lib/angular-css.js" /script 
 script type="text/javascript" src="lib/angular-route.js" /script 
 /head 
 body 
 a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" First Page /a 
 a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Second Page /a 
 div ng-view /div 
 script type="text/javascript" src='app.js' /script 
 script type="text/javascript" src='js/services.js' /script 
 script type="text/javascript" src='js/controller.js' /script 
 /body 
 /html 

代码解释:

首先我们要引进三个文件

1)angular.min.js----angularJS脚本
2)angular-css.js----用来转化css的脚本
3)angular-route.js----路由脚本

然后我们需要两个锚点

 a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" First Page /a 
 a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Second Page /a 

最后我们需要一个路由导入的容器

代码如下: div ng-view /div

之后我们将路由的配置、服务、控制器分别放在app.js、services.js、controller.js文件中,便于代码的管理、维护。

4、接下来我们看一下路由的部分

angular.module('myApp',['ngRoute','angularCSS'])
 .config(['$routeProvider',function ($routeProvider) {
 $routeProvider
 .when('/first',{
 templateUrl : './',
 controller : 'FirstCtrl as firstCtrl'
 .when('/second',{
 templateUrl : './',
 controller : 'SecondCtrl as secondCtrl'
 .otherwise({
 redirectTo : '/first'
 }])

代码解释:

1)首先,第一行,在myApp模块中注入ngRoute跟angularCSS依赖。

2)然后配置路由(config):

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。第二个参数是路由配置对象。

3)controller

function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。

4)controllerAs

string类型,为controller指定别名。

5)redirectTo

重定向的地址

6)resolve

指定当前controller所依赖的其他模块。

路由设置对象总览:


5、下面我们看一下服务部分,service.js

angular.module('myApp')
 .factory('FirstService',[function () {
 var list = [
 { name : 'Rose',age : 10 },
 { name : 'Tom',age : 19 }
 return {
 getList : function () {
 return list;
 }])

注意:angular.module('myApp')不需要注入依赖

6、下面看一下控制器集成,controller.js

angular.module('myApp')
 .controller('FirstCtrl',['$css','FirstService',function ($css,$service) {
 var self = this;
 $css.add('css/first.css');
 self.list = function () {
 return $service.getList();
 .controller('SecondCtrl',['$css','FirstService',function ($css,$service) {
 var self = this;
 $css.add('css/second.css');
 self.list = function () {
 return $service.getList();
 }])

代码分析:

1)在控制器中注入服务依赖以及#css依赖

代码如下: controller('FirstCtrl',['$css','FirstService',function ($css,$service)

2)添加css依赖路径

代码如下: $css.add('css/first.css');

注意:angular.module('myApp')不需要注入依赖

7、好了。逻辑的部分已经完成了,下面展示一下我们的样式以及结构部分吧

<

 div 
 h1 First Page /h1 
 div ng-repeat="p in firstCtrl.list()" 
 {{ p.name }} == {{ p.age }} 
 /div 
 /div 
<

 div 
 h1 Second Page /h1 
 div ng-repeat="p in secondCtrl.list()" 
 {{ p.name }} == {{ p.age }} 
 /div 
 /div 

first.css

.first{
 background-color: yellow;
.first *{
 color: red;
}

second.css

.second{
 background-color: skyblue;
.second *{
 color: green;
}


相关阅读