AngularJS实现路由实例


Posted in Javascript onFebruary 12, 2017

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'
  })    
}])

效果展示:

AngularJS实现路由实例

完整代码:

<!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、首先我们看一下我们所需要的文件

AngularJS实现路由实例

所有文件展示

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

AngularJS实现路由实例

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

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

index.html

<!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 : './view/first.html',
      controller : 'FirstCtrl as firstCtrl'
    })
    .when('/second',{
      templateUrl : './view/second.html',
      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所依赖的其他模块。

路由设置对象总览:

AngularJS实现路由实例

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

first.html

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

second.html

<div class='second'>
  <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;
}
Javascript 相关文章推荐
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
Jquery性能优化详解
May 15 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
记一次vue跨域的解决
Oct 21 Javascript
jQuery文字轮播特效
Feb 12 #Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 #Javascript
jQuery、zepto、js常用小技巧
Feb 12 #Javascript
JS中如何实现Laravel的route函数详解
Feb 12 #Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 #Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 #Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 #Javascript
You might like
用PHP开发GUI
2006/10/09 PHP
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中异常捕获方法详解
2017/03/03 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Java的五个基础面试题
2016/02/26 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
生态学毕业生自荐信
2013/10/27 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
建国大业观后感800字
2015/06/01 职场文书
工作简报范文
2015/07/21 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android