AngularJS通过ng-route实现基本的路由功能实例详解

本文实例讲述了AngularJS通过ng-route实现基本的路由功能。分享给大家供大家参考，具体如下：

为什么需要前端路由~

（1）AJAX不会留下History历史记录

（2）用户无法通过URL进入应用指定的页面（书签或者分享等）

（3）AJAX对于SEO是一个灾难

1.一般情况下，我们访问网页的时候，是通过url地址。
比如我们访问一个网页:https://www.baidu.com/index/fix.html

在AngularJS中通过“#”来进行不同页面的路由，比如：
https://www.baidu.com/#/first，这个请求在向网页端传输的时候，服务器会自动忽略#之后的内容，因此可以根据#+标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

这是一个简单的路由控制界面，根据链接中的#/first和#/second分别对应跳转到不同的页面。

2.通过angularjs中的路由模块，实现ng-route的步骤

（1）载入包含ng-route的JS文件

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

（3）使用原生指令ng-view

（4）我们在html中定义链接，可以实现一个单页应用，比如链接可以这样定义：

<body>
 <ul>
  <li><a href="#/">首页</a></li>
  <li><a href="#/first">第一页面</a></li>
  <li><a href="#/second">第二页面</a></li>
  <li><a href="#/third">第三页面</a></li>
</ul>
  <div ng-view></div>
</body>

在js中的定义路由代码为：

angular.module('myapp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
  $routeProvider.when('/',{template:'这是首页页面'})
         .when('/first',{template:'这是第一个页面'})
         .when('/second',{template:'这是第二个页面'})
         .when('/third',{template:'这是第三个页面'})
         .otherwise({redirectTo:'/'});
}]);

（6）我们来看效果，首次当未有链接切换时候，默认的跳转到首页，效果如下：

当依次点击链接时，会依次切换ng-view中的值，并且实现了ng-view内内容的替换~

I）初始效果

II）切换后的效果

我们发现改变的仅仅是#后的值，并没有页面的跳转和刷新

3.angularJS中的路由设置对象

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

参数解释：

（1）template:

使用该概述，可以在template中写入HTML内容，典型的例子是：

when('/',{template:'这是首页页面'})

（2）templateUrl：
如果现在我们并不是要HTML内容，而是需要一个模板文件来进行整体替换，例子如下：

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

（3）controller：function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
也可以对应的是控制器的名称。

（4）redirectTo：重定向的地址

（5）resolve：当前控制器所依赖的其他模块~

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • AngularJS 路由和模板实例及路由地址简化方法(必看)

    AngularJS 路由和模板实例及路由地址简化方法(必看)

    最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula

  • Angularjs制作简单的路由功能demo

    从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri

  • AngularJS 路由详解和简单实例

    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://r

  • AngularJS监听路由的变化示例代码

    话不多说,我们下面直接来看实现的示例代码 [一]Angular 路由状态发生改变时可以通过' $stateChangeStart '.' $stateChangeSuccess '.' $stateChangeError '监听,通过注入'$location'实现状态的管理 代码示例如下: function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$s

  • AngularJS路由删除#符号解决的办法

    AngularJS路由删除#符号解决的办法 最近做一个web应用,有个需求需要删除angular路由中的#号. 例如: http://example.com/ http://example.com/#/about http://example.com/#/contact 需要改成 http://example.com/ http://example.com/about http://example.com/contact 这个是angular默认自带的,所以想要删除需要配置一下: $locati

  • 使用AngularJS对路由进行安全性处理的方法

     简介 自从出现以后,AngularJS已经被使用很长时间了. 它是一个用于开发单页应用(SPA)的javascript框架. 它有一些很好的特性,如双向绑定.指令等. 这篇文章主要介绍Angular路由安全性策略. 它是一个可用Angular开发实现的客户端安全性框架. 我已经对它进行了测试. 除了保证客户端路由安全性外,你也需要保证服务器端访问的安全性. 客户端安全性策略有助于减少对服务器进行额外的访问. 然而,如果一些人采用欺骗浏览器的手段访问服务器,那么服务器端安全性策略应当能够拒绝未授

  • AngularJS路由实现页面跳转实例

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo

  • 使用Vue-Router 2实现路由功能实例详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能. 推荐使用npm安装. npm install v

  • AngularJS通过ng-route实现基本的路由功能实例详解

    AngularJS通过ng-route实现基本的路由功能实例详解

    本文实例讲述了AngularJS通过ng-route实现基本的路由功能.分享给大家供大家参考,具体如下: 为什么需要前端路由~ (1)AJAX不会留下History历史记录 (2)用户无法通过URL进入应用指定的页面(书签或者分享等) (3)AJAX对于SEO是一个灾难 1.一般情况下,我们访问网页的时候,是通过url地址. 比如我们访问一个网页:https://www.baidu.com/index/fix.html 在AngularJS中通过"#"来进行不同页面的路由,比如: ht

  • Zend Framework教程之路由功能Zend_Controller_Router详解

    本文实例讲述了Zend Framework教程之路由功能Zend_Controller_Router用法.分享给大家供大家参考,具体如下: Zend Framework的路由提供了两个主要功能路由和创建路由. Zend_Controller_Router的Route类和相应Route目录下的类定义常见的路由操作. 接口Zend_Controller_Router_Interface,类Zend_Controller_Router_Abstract和Zend_Controller_Router_R

  • AngularJS学习笔记之表单验证功能实例详解

    本文实例讲述了AngularJS学习笔记之表单验证功能.分享给大家供大家参考,具体如下: 一.执行基本的表单验证 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="../../js/angular.min.js" type="

  • AngularJS自定义表单验证功能实例详解

    AngularJS自定义表单验证功能实例详解

    本文实例讲述了AngularJS自定义表单验证功能.分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max). 在自定义的指令中,我们可以添加我们的验证方法到ngModelController的$validators对象上.为了取得这个c

  • AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr

  • AngularJs表单验证实例详解

    AngularJs表单验证实例详解

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="

  • AngularJS 中ui-view传参的实例详解

    Angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路由传参</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" c

  • vue-router 路由基础的详解

    vue-router 路由基础的详解 今天我总结了一下vue-route基础,vue官方推荐的路由. 一.起步 HTML <div id="myDiv"> <h1>简单路由</h1> <router-link to="/foo">Go to foo</router-link> <router-link to="/bar">Go to bar</router-link&g

  • Vue-router的使用和出现空白页,路由对象属性详解

    Vue-router的使用和出现空白页 2018.08.28 更新 vue-router:前端路由系统--改变视图的同时不会向后端发出请求 1. hash 2.history 2018.06.25 更新 get到一个新技能 import Vue from 'vue' import Router from 'vue-router' import api from '../lib/service' //接口文档 Vue.use(Router) const router = { mode: 'hist

随机推荐