首页 / ANGULAR / AngularJS（九）：路由

AngularJS（九）：路由

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS（九）：路由，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4325字，纯文字阅读大概需要7分钟。

内容图文

本文也同步发表在我的公众号“我的天空”

技术分享

AngularJS路由

AngularJS路由可以让我们通过不同的URL访问不同页面（似乎是废话），其价值主要体现在单页面的web应用中（single page web application，SPA），在移动端的web开发中，几乎都是SPA的形式。我们先通过一个简单的示例来了解AngularJS路由，随后再做进一步的学习。请看示例：

<html>
<head>
<title>AngularJS_23</title>
<script src="Angular.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body ng-app="myApp">
     <ul>
         <li><a href="#/">首页</a></li>
         <li><a href="#/news">新闻</a></li>
         <li><a href="#/sport">体育</a></li>
   </ul>
   <div ng-view></div>
</body>
<script>
    var app=angular.module("myApp",[‘ngRoute‘]);
app.config(function($routeProvider){
       $routeProvider
       .when(‘/‘,{template:‘这是首页‘})
       .when(‘/news‘,{template:‘这是新闻页面‘})
       .when(‘/sport‘,{template:‘这是体育页面‘})
       .otherwise({redirectTo:‘/‘});
   });
</script>
</html>

示例代码AngularJS_23.html

运行该页面，当点击不同的链接时在DIV中显示不同的内容。分析以上代码，看看我们新增加了哪些部分：

首先，AngularJS路由功能的实现是在anguler-route中实现的，所以我们引入了angular-route.min.js。其次我们观察a标签里的href地址格式，其均是由#开头的，AngularJS中URL的形式是通过“#+标记”来实现的。随后在显示内容的DIV中，我们使用了ng-view指令，该DIV可以看成一个容纳页面的容器。另外在控制器代码中由于要引入外部模块，所以我们在模块app的声明中引入了“ngRoute”。

接下来便是实现路由的关键代码app.config()，AngularJS通过config函数来配置路由，我们将$routeProvider引入到配置函数config()，并通过$routeProvider的when()或otherwise()函数来定义我们的路由规则，函数包含两个参数，第一个是URL或URL正则，第二个为路由配置对象，由于本例中只是简单的显示些文字，因此直接设置template就可以了。otherwise()函数定义所有未在when()中配置路由的其他url的路由规则，本例中直接设置redirctTo参数。

接下里我们学习路由配置对象，由于上一例中我们只是简单的演示路由，因此路由配置对象设置的比较简单，完整的路由配置对象格式为：

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

各参数说明：
template：如果我们只需要在ng-view中显示简单的html内容，就使用该参数，如上一例所示。
templateUrl：如果需要在ng-view中显示页面，则该参数为页面的url。
controller：在当前模板上执行的controller函数。
controllerAs：controller函数的别名。
redirectTo：重定向的地址，如上一列中的otherwise()函数所示。
resolve：指定当前controller所依赖的其他模块。

接下里我们演示一个更复杂的示例，我们先准备两个子页面：

<h1>这是新闻页面</h1>
<ul><li ng-repeat="new in news">{{new}}</li></ul>

示例代码route_news.html

<h1>这是体育页面</h1>
<ul><li ng-repeat="sport in sports">{{sport}}</li></ul>

示例代码route_sport.html

由于子页面是嵌套在主页面的ng-view中，所以只需要DOM元素就可以了，这两个页面都很简单，使用ng-repeat来展示相应数组的内容，这个是我们之前已经掌握的知识点了。

接下来是主页面：

<body ng-app="myApp">
     <ul>
         <li><a href="#/">首页</a></li>
         <li><a href="#/news">新闻</a></li>
         <li><a href="#/sport">体育</a></li>
   </ul>
   <div ng-view></div>
</body>
<script>
    var app=angular.module("myApp",[‘ngRoute‘]);
   app.controller("ctr_news",function($scope){
       $scope.news=[‘新闻一‘,‘新闻二‘];
   })
   .controller("ctr_sport",function($scope){
       $scope.sports=[‘体育内容一‘,‘体育内容二‘];
   })
   .config(function($routeProvider){
       $routeProvider
       .when(‘/‘,{
           template:‘这是首页‘
       })
       .when(‘/news‘,{
           templateUrl:‘route_news.html‘,
           controller:‘ctr_news‘
       })
       .when(‘/sport‘,{
           templateUrl:‘route_sport.html‘,
           controller:‘ctr_sport‘
       })
       .otherwise({redirectTo:‘/‘});
   });
</script>

示例代码AngularJS_24.html

主页面的html部分与之前的示例完全一样，我们主要看控制器代码中。首先在config()函数中，我们在“新闻页面”与“体育页面”的路由配置中，使用了templateUrl来加载子页面，同时用controller来设置了其相应的控制器，新闻页面的控制器名为“ctr_news”，这样我们就可以在主页面中通过控制器“ctr_news”来访问并设置新闻页面的DOM了，在这里我们是初始化了一个数组“news”,这样在子页面中就可以使用该数组，并渲染新闻页面里的li元素，同时体育页面的处理也完全一样。

app.controller("ctr_news",function($scope){
$scope.news=[‘新闻一‘,‘新闻二‘];
})

当然，我们也可以不对子页面设置单独的控制器，而是统一由主页面的控制器处理，不过这样不利于整体代码的架构，不建议这样写。

<body ng-app="myApp" ng-controller="ctr">
     <ul>
         <li><a href="#/">首页</a></li>
         <li><a href="#/news">新闻</a></li>
         <li><a href="#/sport">体育</a></li>
   </ul>
   <div ng-view></div>
</body>
<script>
    var app=angular.module("myApp",[‘ngRoute‘]);
   app.controller("ctr",function($scope){
       //所有的数据在主页面的控制器中来处理
       $scope.news=[‘新闻一‘,‘新闻二‘];
       $scope.sports=[‘体育内容一‘,‘体育内容二‘];
   })
   .config(function($routeProvider){
       $routeProvider
       .when(‘/‘,{
           template:‘这是首页‘
       })
       .when(‘/news‘,{
           templateUrl:‘route_news.html‘
       })
       .when(‘/sport‘,{
           templateUrl:‘route_sport.html‘
       })
       .otherwise({redirectTo:‘/‘});
   });
</script>

示例代码AngularJS_25.html

该系列的示例代码

https://github.com/panyongwow/angularJS

原文：http://www.cnblogs.com/mysky7511/p/6669482.html

内容总结

以上是互联网集市为您收集整理的AngularJS（九）：路由全部内容，希望文章能够帮你解决AngularJS（九）：路由所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1216169.html

来源：【匿名】

【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【AngularJS（九）：路由】教程文章相关的互联网学习教程文章

AngularJS（九）：路由【图】

本文也同步发表在我的公众号“我的天空” AngularJS路由 AngularJS路由可以让我们通过不同的URL访问不同页面（似乎是废话），其价值主要体现在单页面的web应用中（singlepage web application，SPA），在移动端的web开发中，几乎都是SPA的形式。我们先通过一个简单的示例来了解AngularJS路由，随后再做进一步的学习。请看示例： <html> <head> <title>AngularJS_23</title> <script src="Angular.js"></script> <script src=...

angularJS 可编辑下拉选项框【代码】

功能介绍：　　该组件将文本框和下拉框的组合，当你点击最右边的下拉按钮,实现下拉框选择的功能；当你选中文本框，实现文本框输入的功能。将文本框和下拉框设置name属性一样他自动会把对应下拉框的值传入后台，而文本框的值不传，当你做文本框使用，它会把文本框的值传入后台而下拉框的值不传。可编辑下拉选项框ANY11.html代码 1<!DOCTYPE html> 2<html ng-app="myapp"> 3<head> 4<meta charset="UTF-8"> 5<title>可编辑下拉选项框...

AngularJS学习篇（二十）【代码】

AngularJS 包含在 AngularJS 中，你可以在 HTML 中包含 HTML 文件。使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:<body ng-app=""><div ng-include="‘test.htm‘"></div></body>test.htm 文件代码：<h1>菜鸟教程</h1><p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>ng-include 指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码:<!DOCTYPE html><html><meta charset="utf-8"><script s...

（四）Angularjs - 小实例（2）【代码】

自定义指令编写时钟模板<html><body ng-app="ezstuff"><ez-clock></ez-clock></body><script src="angular.js"></script></html>controller 1 angular.module("ezstuff",[])//创建模块ezstuff 2 .directive("ezClock",function(){//在模块上注册指令ezClock的类工厂 3return {4 rest...

AngularJS笔记---作用域和控制器【代码】

什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面. 一.$rootScope 1.1 $rootScope可以理解成全局变量,一旦赋值对整个module都有效.$rootScpoe不依赖于任何一个controller, app.run是module被加载时候执行的代...

angularjs培训之filter

在angularjs中，filter提供了格式化数据或者过滤数据的功能：1、请看下面简单的例子<div ng-controller="phoneListExtendController">I have {{friends.length}} friends. They are: <input type="search" ng-model="q" placeholder="filter friends..." /> <ul> <li ng-repeat="friend in friends | filter:q"> [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. </li> </ul> <hr> <ul> <li...

angularjs基础知识【代码】

js中的函数，判断这个函数是构造函数还是自调用的函数，只需要看this指向。如果this指向的是window,那肯定是自调用，如果this的实例是这个函数，那就是构造函数。比如angularjs中的MyController都是会自动new一个构造函数的。可以这样证明: function MyController($scope){ console.log(this instanceof MyController); //返回true证明被new过。(构造函数) } 依赖对象:完成某个特定的功能需要依赖某个...

angularjs 学习笔记（一）

学习视频地址：http://i.youku.com/i/UMzI1MjQ0MDgw?spm=a2h0z.8244218.2371631.d6373（大漠穷秋）配置环境（cnpm方式，angular-cli）1.安装nodejs2.安装angularjs环境打开命令窗，cd到项目目录运行npm i -g cnpm安装cnpm运行cnpm i -g angular-cli 安装angular cnpm install安装项目所需包ng server --prod --aot安装服务器（此步骤出错了）原文：http://www.cnblogs.com/zinan/p/7337105.html

AngularJs 第一个自定义指令编写

公司在做一个OA系统，包括移动端（从微信企业号进入OA系统），电脑端。电脑端还是用的传统的easyui做界面，asp.net mvc作为服务端。这个技术已经很成熟了配合权限框架很快就能开发出来。但是手机端之前团队也没有什么经验，我之前做过一个jqureymobile的项目，但是这个框架实在是太卡了，直接pass掉。恰好之前有自学一点点angularjs 所以我就推荐手机端的项目使用angularjs来开发，一来团队可以学习一些新技术跟上潮流，二来...

angularJS中-$route路由-$http(ajax)的使用【代码】

后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL, 页面使用的是bottstarp3.0(懒人神器); 第一个例子:　　在本地架设NODEJS, angular的所有请求都是请求本地的3000端口, 这个例子展示的是angular用GET请求服务器的list.json, 1.json, 2.json等文件;　　POST请求/0和/id这两个地址：运行下面代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt...

AngularJs——Function篇(一)【代码】

1.angular.lowercase/angular.uppercase//将特定字符串转化为小写/大写的方法 1 <!DOCTYPE html>2 <html >3 <head lang="en">4 <meta charset="UTF-8">5 <title>angular_function</title>6 </head>7 <body ng-app="myapp">8 <div ng-controller="mycontroller">9 <input type="text" ng-model="namee" > 10 {{NAME}}~~~{{namee}} 11 </div> 12 </body> 13 <script src="angular.js"></script> 14 <script> 15 var Ap...

angularJS directive中的controller和link function辨析【代码】【图】

在angularJS中，你有一系列的view，负责将数据渲染给用户；你有一些controller，负责管理$scope(view model)并且暴露相关behavior(通过$scope定义）给到view；你有一些directive,负责将user interaction和$scope behavious link起来。但是还有一样东西： a directive controller.这个directive controller子一个directive的context中定义，但是它又可以被injected到其他的directives中作为一种便利化inter-directive communication...

利用AngularJS实现一个单页应用【代码】【图】

看了下angular 的route，用它做个非常简单的单页面应用，记录一下。顺便说下，好处是，页面改变时不需要刷新，而每个页面都展现不同的数据。尤其在使用模板页的时候，非常方便。快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App，并销售到苹果应用商店中。《HTML开发Mac OS App 视频教程》土豆网同步更新：http://www.tudou.com/plcover/VHNh6ZopQ4E/百度网盘同步：http://pan.baidu.com/s/1jG1Q58M分享 [中文纪录片...

AngularJs实战学习（-）【代码】

AngularJs学习有一段时间了，前几天做了一项目。做完后想使用才学习的Angular试试水，结果出乎意料（学的太基础尽然不知道从那下手，还是纠结）最后还是去慕课网看了“大漠穷秋”的“AngularJS实战”的视频才有些基础，希望能让我理解其中的知识。 1、Angular的4大核心特性： MVC（职责清晰，代码模块化）模块化（MVC是手段，终极目标是模块化）指令系统（AngularJs不会去直接去操作Dom，都是使用指令系统去处理Dom）...

angularJs FileUpload插件上传同一文件无效问题记录

参考：https://blog.csdn.net/qq_34829447/article/details/83780392 问题：使用FileUpload插件进行文件上传时，发现无法上传与上个文件相同的文件，而且不会调用任何组件的生命周期钩子。原因：由于没有在input标签中添加multiple属性，此属性用于上传多个文件，而我上传同一文件也属于这个情况解决：<input style="display:none;" type="file" nv-file-select="" uploader="uploader" id="fileToUpload" multiple/> 原文：http...

ANGULAR - 技术教程分类

Angular 2 教程 Angular 2 架构 Angular 2 数据显示 Angular 2 用户输入 Angular 2 表单 Angular 2 模板语法 angular 全部

ANGULAR - 最热教程

在Angular中如何实现查询天气预报 AngularJS服务service用法总结 Angular.JS中指令ng-if的注意事项小结 AngularJS 异步解决实现方法使用AngularJS和PHP的Laravel实现单页评...AngularJS控制器继承自另一控制器 spring+angular实现导出excel的实现代码关于AngularJS中ng-repeat不更新视图的...在Angular5中如何调用第三方js插件（详...Angular入口组件与声明式组件使用详解

首页 / ANGULAR / AngularJS（九）：路由

AngularJS（九）：路由

内容导读

内容图文

内容总结

内容备注

内容手机端

【AngularJS（九）：路由】教程文章相关的互联网学习教程文章

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程