AngularJS 路由详解和简单实例

网络编程 发布日期：2024/10/3 浏览次数：1

正在浏览：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 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

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="/UploadFiles/2021-04-02/angular.min.js">


运行结果：


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="/UploadFiles/2021-04-02/angular.min.js">


运行结果：


Home About


Home


以上就是对AngularJS 路由的资料整理，希望能帮助AngularJS 编程的同学。
上一篇：AngularJS 简单应用实例
下一篇：AngularJS 依赖注入详解和简单实例

一句话新闻

高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。