AngularJS 路由详解和简单实例

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了AngularJS 路由详解和简单实例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

AngularJS 路由

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

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

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为标记 实现，例如：

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

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

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

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

<Meta charset="utf-8"> AngularJS 路由实例 - 菜鸟教程 
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/"&gt;首页</a></li>
  <li><a href="#/computers"&gt;电脑</a></li>
  <li><a href="#/printers"&gt;打印机</a></li>
  <li><a href="#/blabla"&gt;其他</a></li>
</ul>

<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;</script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"&gt;</script>
<script>
  angular.module('routingDemoApp',['ngRoute'])
  .config(['$routeProvider',function($routeProvider){
    $routeProvider
    .when('/',{template:'这是<a href="https://www.jb51.cc/tag/shouye/" target="_blank" class="keywords">首页</a><a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>'})
    .when('/computers',{template:'这是电脑<a href="https://www.jb51.cc/tag/fenlei/" target="_blank" class="keywords">分类</a><a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>'})
    .when('/printers',{template:'这是打印机<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>'})
    .otherwise({redirectTo:'/'});
  }]);
</script>

运行结果：

AngularJS 路由应用

首页页面

实例解析：

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

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

3、使用 ngView 指令。

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

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

首页页面'}) .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 正则规则，第二个参数为路由配置对象。

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

});

参数说明：

template:

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

分类页面'})

templateUrl:

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

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

controller:

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

controllerAs:

string类型，为controller指定别名。

重定向的地址。

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

实例

<Meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

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

Home

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

About

运行结果：

Home

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

原文链接：https://www.f2er.com/js/47017.html
AngularJS中的路由路由实例代码路由实现方法

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作