AngularJS 路由详解和简单实例  更新时间:2016年07月28日 15:59:21   投稿:lqh   本文主要介绍AngularJS 路由,这里整理了相关资料进行详细介绍,并附实例代码和实现效果图,有需要的小伙伴可以参考下 AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third 当我们点击以上的任意一个链接时,向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。 在以上图形中,我们可以看到创建了两个 URL: /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。 接下来我们来看一个简单的实例: AngularJS 路由实例 – 菜鸟教程 AngularJS 路由应用 首页 电脑 打印机 其他 运行结果: AngularJS 路由应用 首页 电脑 打印机 其他 这是首页页面 实例解析: 1、载入了实现路由的 js 文件:angular-route.js。 2、包含了 ngRoute 模块作为主应用模块的依赖模块。 angular.module(‘routingDemoApp’,[‘ngRoute’]) 3、使用 ngView 指令。 该 div 内的 HTML 内容会根据路由的变化而变化。 配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。 module.config([‘$routeProvider’, function($routeProvider){ $routeProvider .when(‘/’,{template:’这是首页页面’}) .when(‘/computers’,{template:’这是电脑分类页面’}) .when(‘/printers’,{template:’这是打印机页面’}) .otherwise({redirectTo:’/’}); }]); AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。 $routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数: 第一个参数是 URL 或者 URL 正则规则。 第二个参数是路由配置对象。 路由设置对象 AngularJS 路由也可以通过不同的模板来实现。 $routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。 路由配置对象语法规则如下: $routeProvider.when(url, { template: string, templateUrl: string, controller: string, function 或 array, controllerAs: string, redirectTo: string, function, resolve: object }); 参数说明: template: 如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数: .when(‘/computers’,{template:’这是电脑分类页面’}) templateUrl: 如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数: $routeProvider.when(‘/computers’, { templateUrl: ‘views/computers.html’, }); 以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。 controller: function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。 controllerAs: string类型,为controller指定别名。 redirectTo: 重定向的地址。 resolve: 指定当前controller所依赖的其他模块。 实例 Home About 运行结果: Home About Home 以上就是对AngularJS 路由的资料整理,希望能帮助AngularJS 编程的同学。 您可能感兴趣的文章: 用director.js实现前端路由使用实例 director.js实现前端路由使用实例 vue.js使用watch监听路由变化的方法 VueJs路由跳转——vue-router的使用详解 JS实现简单路由器功能的方法 AngularJS路由实现页面跳转实例 react-router JS 控制路由跳转实例 使用AngularJS对路由进行安全性处理的方法 AngularJS监听路由的变化示例代码 JS实现前端路由功能示例【原生路由】 AngularJS 路由 相关文章 Angular 4根据组件名称动态创建出组件的方法教程 组件是我们在学习angular中必不可少的一部分,下面这篇文章主要给大家介绍了关于Angular 4如何根据组件名称动态创建出组件的相关资料,文中通过图文与示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-11-11 使用AngularJS中的SCE来防止XSS攻击的方法 这篇文章主要介绍了使用AngularJS中的SCE来防止XSS攻击的方法,依靠合理地转码为HTML来预防跨站脚本漏洞共计,需要的朋友可以参考下 2015-06-06 angularjs学习笔记之简单介绍 这篇文章主要介绍了angularjs学习笔记之简单介绍的相关资料,需要的朋友可以参考下 2015-09-09 AngularJs中route的使用方法和配置 angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一,下面通过本文给大家介绍AngularJs中route的使用方法和配置,感兴趣的朋友一起学习吧 2016-02-02 AngularJs Dependency Injection(DI,依赖注入) 本文主要介绍AngularJs Dependency Injection,这里整理了详细资料及示例代码有兴趣的小伙伴可以参考下 2016-09-09 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件 这篇文章主要为大家详细介绍了仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件的相关资料,感兴趣的小伙伴们可以参考一下 2016-07-07 AngularJS报错$apply already in progress的解决方法分析 这篇文章主要介绍了AngularJS报错$apply already in progress的解决方法,较为详细的分析了报错$apply already in progress的原理、处理技巧与相关注意事项,需要的朋友可以参考下 2017-01-01 Angular模版驱动表单的使用总结 这篇文章主要介绍了Angular模版驱动表单的使用总结,本文实现了Angular支持表单的双向数据绑定,校验,状态管理,非常具有实用价值,需要的朋友可以参考下 2018-05-05 Angular实现的table表格排序功能完整示例 这篇文章主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下 2017-12-12 AngularJS实现页面定时刷新 本篇文章主要介绍了AngularJS实现页面定时刷新,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-03-03 最新评论

AngularJS 路由

本章节我们将为大家介绍 AngularJS 路由。

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。

通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如:

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

当我们点击以上的任意一个链接时,向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

在以上图形中,我们可以看到创建了两个 URL: /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。

接下来我们来看一个简单的实例:

<html>
  <head>
  	<meta charset="utf-8">
    <title>AngularJS 路由实例 - 菜鸟教程</title>
  </head>
  <body ng-app='routingDemoApp'>
   
    <h2>AngularJS 路由应用</h2>
    <ul>
      <li><a href="#/">首页</a></li>
      <li><a href="#/computers">电脑</a></li>
      <li><a href="#/printers">打印机</a></li>
      <li><a href="#/blabla">其他</a></li>
    </ul>
     
    <div ng-view></div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <script>
      angular.module('routingDemoApp',['ngRoute'])
      .config(['$routeProvider', function($routeProvider){
        $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
      }]);
    </script>
   
   
  </body>
</html>

运行结果:

AngularJS 路由应用

  • 首页
  • 电脑
  • 打印机
  • 其他
这是首页页面

实例解析:

1、载入了实现路由的 js 文件:angular-route.js。

2、包含了 ngRoute 模块作为主应用模块的依赖模块。

angular.module(‘routingDemoApp’,[‘ngRoute’])

3、使用 ngView 指令。

<div ng-view></div>

该 div 内的 HTML 内容会根据路由的变化而变化。

配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。

module.config(['$routeProvider', function($routeProvider){
  $routeProvider
    .when('/',{template:'这是首页页面'})
    .when('/computers',{template:'这是电脑分类页面'})
    .when('/printers',{template:'这是打印机页面'})
    .otherwise({redirectTo:'/'});
}]);

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

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

第一个参数是 URL 或者 URL 正则规则。

第二个参数是路由配置对象。

路由设置对象

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。

路由配置对象语法规则如下:

$routeProvider.when(url, {
  template: string,
  templateUrl: string,
  controller: string, function 或 array,
  controllerAs: string,
  redirectTo: string, function,
  resolve: object<key, function>
});

参数说明:

template:

如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:

.when(‘/computers’,{template:’这是电脑分类页面’})

templateUrl:

如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:

$routeProvider.when('/computers', {
  templateUrl: 'views/computers.html',
});

以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

controller:

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

controllerAs:

string类型,为controller指定别名。

redirectTo:

重定向的地址。

resolve:

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

实例

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope) { $scope.$route = $route;})
.controller('AboutController', function ($scope) { $scope.$route = $route;})
.config(function ($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'embedded.home.html',
    controller: 'HomeController'
  }).
  when('/about', {
    templateUrl: 'embedded.about.html',
    controller: 'AboutController'
  }).
  otherwise({
    redirectTo: '/home'
  });
});
</script>

 
</head>

<body ng-app="ngRouteExample" class="ng-scope">
 <script type="text/ng-template" id="embedded.home.html">
   <h1> Home </h1>
 </script>

 <script type="text/ng-template" id="embedded.about.html">
   <h1> About </h1>
 </script>

 <div> 
  <div id="navigation"> 
   <a href="#/home">Home</a>
   <a href="#/about">About</a>
  </div>
   
  <div ng-view="">
  </div>
 </div>
</body>
</html>

运行结果:

Home About

Home

以上就是对AngularJS 路由的资料整理,希望能帮助AngularJS 编程的同学。

您可能感兴趣的文章:

  • 用director.js实现前端路由使用实例
  • director.js实现前端路由使用实例
  • vue.js使用watch监听路由变化的方法
  • VueJs路由跳转——vue-router的使用详解
  • JS实现简单路由器功能的方法
  • AngularJS路由实现页面跳转实例
  • react-router JS 控制路由跳转实例
  • 使用AngularJS对路由进行安全性处理的方法
  • AngularJS监听路由的变化示例代码
  • JS实现前端路由功能示例【原生路由】
张贴在3