Angular 路由route实例代码

AngularJS 路由 routing

能够从页面的一个视图跳转到另外一个视图，对单页面应用来讲是至关重要的。当应用变得越来越复杂时，我们需要一个合理的方式来管理用户在使用过程中看到的界面。AngularJS的做法是将视图分解成布局和模板视图，并且根据用户当前访问的URL来展示对应的视图。

本文对 AngularJS routing 做一简单示例，并提及其涉及的一些概念。

一、布局页面

引用scripts：

 <script src="../Scripts/jquery-1.9.1.min.js"></script>
 <script src="../Scripts/angular.min.js"></script>
 <script src="../Scripts/angular-route.min.js"></script>

页面的布局比较简单：

<div>
   <ul>
     <li><a href="#page1">go page 1</a></li>
     <li><a href="#page2">go page 2</a></li>
     <li><a href="#other">to other page</a></li>
   </ul>
 </div>
 <div ng-view></div>

ng-view是由ngRoute模块提供的一个特殊指令，其告诉AngularJS把模板渲染到何处。这个例子中，我们将需要渲染的内容放到 下面的 div 中。上面的三个 a 链接分别指向了三个视图view。

二、模板页面

创建两模板页面，分别叫 Subpage_1.html 和 Subpage_2.html。

3、路由规则 routing config

angular.module("myRouteApp", ["ngRoute"])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when("/page1", {
        templateUrl: "Subpage_1.html"
      })
      .when("/page2", {
        templateUrl: "Subpage_2.html"
      })
      .otherwise({
        redirectTo: "/"
      });
  }]);

把 ngRoute 模块在我们的应用中当作依赖加载进来。用 config 函数在模块或应用中定义路由，使用AngularJS提供的when和otherwise两个方法来定义应用的路由。

templateUrl:

应用会根据 templateUrl 属性所指定的路径通过XHR读取视图（或者从$templateCache中读取）。如果能够找到并读取这个模板，AngularJS将模板的内容渲染到具有ng-view指令的DOM元素中。

redirectTo:

如果redirectTo属性的值是一个字符串，那么路径会被替换成这个值，并根据这个目标路径触发路由变化。如果redirectTo属性的值是一个函数，那么路径会被替换成函数的返回值，并根据这个目标路径触发路由变化。

运行结果

点击 go page 1

点击 go page 2

以上这篇Angular 路由route实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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

  • Angular2 (RC4) 路由与导航详解

    基础知识 1.<base href> 大多数带路由的应用都要在 index.html 的 <head>标签下添加一个 <base>元素. 2.导入路由库 import { ROUTER_DIRECTIVES } from '@angular/router'; 3.配置 首选方案是用带"路由数组"的provideRouter工厂函数([provideRouter(routes)])来启动此应用. app.routes.ts import { provi

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

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

  • AngularJs ng-route路由详解及实例代码

    前提 首先需要在页面引入angular和angular-route,注意要在angular-route之前引入angular <script src="../../bower_components/angular/angular.js"></script> <script src="../../bower_components/angular-route/angular-route.js"></script> 这主要是

  • 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默认自带的,所以想要删除需要配置一下: $locationProvider.html5Mode(t

  • angular中使用路由和$location切换视图

    我们可以利用angular的$route服务来定义这样一种东西:对于浏览器所指向的特定URL,angular会加载并显示一个模板,并实例化一个控制器为模板提供内容. 在应用中,你可以通过调用$routeProvider服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可. 伪代码如下: 复制代码 代码如下: var someModule = angular.module('somemodule',[...module dependencies...]) someModule.c

  • 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入门教程之路由与多视图详解

    在这一步,你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用. 请重置工作目录: git checkout -f step-7 注意到现在当你转到app/index.html时,你会被重定向到app/index.html#/phones并且相同的手机列表在浏览器中显示了出来.当你点击一个手机链接时,一个手机详细信息列表也被显示了出来. 步骤6和步骤7之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 多视图,路由和布局模板 我们的应用正慢慢发展起来并且变得逐

  • Angular 路由route实例代码

    Angular 路由route实例代码

    AngularJS 路由 routing 能够从页面的一个视图跳转到另外一个视图,对单页面应用来讲是至关重要的.当应用变得越来越复杂时,我们需要一个合理的方式来管理用户在使用过程中看到的界面.AngularJS的做法是将视图分解成布局和模板视图,并且根据用户当前访问的URL来展示对应的视图. 本文对 AngularJS routing 做一简单示例,并提及其涉及的一些概念. 一.布局页面 引用scripts: <script src="../Scripts/jquery-1.9.1.min

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • AngularJS之页面跳转Route实例代码

    AngulagJs的页面使用Route跳转 1.除了引用AngularJs.js外,还要引用路由JS, "~/Scripts/angularjs/angular-route.js" 2.通过$routeProvider定义路由,示例 var testModule = angular.module('testModule', ['ngRoute']); testModule.config(['$routeProvider', function ($routeProvider) { $ro

  • nodeJS实现路由功能实例代码

    nodeJS实现路由功能实例代码

    前面的话 本文将使用NodeJS实现较复杂应用的路由功能 结构 项目结构如下 代码如下 功能 [router.js] // 加载所需模块 var http = require('http'); var url = require('url'); var fs = require('fs'); var host = '127.0.0.1'; var port = 8080; http.createServer(function(req,res){ var pathname = url.parse(

  • Vue路由守卫案例代码

    目录 Vue路由守卫 全局路由守卫 全局前置守卫 全局后置守卫 实例代码: 独享守卫 组件内守卫 总结 Vue路由守卫 路由守卫,简单理解来说就是,当用户要进行一些操作时,我需要用户的一些信息或数据或行为,我判断过后,才会同意用户进行操作,说到这里,我想大家心里都或多或少有点理解了吧,官方一点的解释就是进行操作的鉴权,当操作与之条件匹配时,操作成功,当操作与之不匹配时,操作终止,作用就是是对路由进行权限控制. 在Vue中,路由守卫分为三种:全局路由守卫.独享路由守卫以及组件内路由守卫 全局路由守

  • 使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码

    使用 Angular RouteReuseStrategy 缓存组件 Cache components with Angular RouteReuseStrategy RouteReuseStrategy provider 允许我们控制 Angular 路由和组件生命周期的行为. 当我们在组件间切换的时候,Angular都会销毁上一个组件,并且创建一个新的组件.在大多数情况下,我们可能不想让它这样工作,因为每次加载一个组件,可能会有很多类似HTTP请求一样的昂贵的操作. 这时候就需要RouteR

  • Angular+Bootstrap+Spring Boot实现分页功能实例代码

    Angular+Bootstrap+Spring Boot实现分页功能实例代码

    需要用到的js angular.js(用angular.min.js会导致分页控件不显示) ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由,所以讲js以及css文件的应用都放在一个主html,请同学们在html页面中添加以上文件 在开始之前,我先简单介绍下分页的原理. 分页的实质其实就是一条sql语句, 比如查找第二页,即第16到第30条数据 在MySQL中是select * fr

  • vue-router 实现导航守卫（路由卫士）的实例代码

    导航守卫 导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router

  • Angular动态添加、删除输入框并计算值实例代码

    Angular动态添加.删除输入框并计算值实例代码 摘要: 在学习群中交流时,有人分享了一个动态添加输入框的方法,我在其基础上进行了一些改进 这个功能本身并不复杂,但还是要注意,每个ng-model的对象必须是不同的,这样才能把它们分隔开. 下面是完整代码: JS: angular.module("myApp",[]) .controller("inputController",function($scope){ $scope.items=[]; //初始化数组,以

  • Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi

随机推荐