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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>路由</title>

    <script src="angular-1.4.1/angular.min.js"></script>

    <script src="angular-1.4.1/angular-route.min.js"></script><!--载入实现路由的js文件-->

    <script type="text/javascript">

    angular.module('ngRouteExample', ['ngRoute']) //包含了ngRoute模块作为主应用模块的依赖模块

        .controller('HomeController', function ($scope, $route) { $scope.$route = $route;})

        .controller('AboutController', function ($scope, $route) { $scope.$route = $route;})

        .config(function ($routeProvider) { //AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider

                                           // 注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则

            $routeProvider.

            when('/home', {

                templateUrl: 'embedded.home.html', //第一个参数是URL或者URL正则规则 第二个参数是路由配置对象

                controller: 'HomeController'

            }).

            when('/about', {

                templateUrl: 'embedded.about.html',

                controller: 'AboutController'

            }).

            otherwise({

                redirectTo: '/home'

            });

        });

</script>

</head>

<body ng-app="ngRouteExample" class="ng-scope">

<!--当当前页面为embedded.home.html时就输出一个Home页面-->

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

    <h1> Home页面 </h1>

</script>

<!--当当前页面为embedded.about.html时就输出一个About页面-->

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

    <h1> About页面 </h1>

</script>

<div>

    <div id="navigation">

        <a href="#/home">Home</a>

        <a href="#/about">About</a>

    </div>

    <div ng-view=""><!--该div内的HTML内容会根据路由的变化而变化 -->

    </div>

</div>

</body>

</html>

　　运行结果：

AngularJS(16)-路由的更多相关文章

  1. AngularJS的路由、模块、依赖注入

    AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?

  2. AngularJs ui-router 路由的介绍

    AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...

  3. AngularJS笔记---路由视图

    最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...

  4. AngularJs ng-route路由详解

    本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...

  5. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  6. AngularJs ui-router 路由的简单介绍

    之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...

  7. [AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程

    这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...

  8. angularJS的路由！

    angularJS 路由:(分发需求) angularJS 中路由是单独提供的功能模块,ngRoute  也是一个单独发行的文件 可以通过 npm 去安装这个包:angular-route <s ...

  9. 关于angularjs中路由页面强制更新的问题

    有这么一个问题,在页面内路由页面跳转时,第一次跳入路由页面时是正常的,但是第二次会记住第一次时的状态,有时候并不想这样,想强制更新这个路由页面. 有一种方式就是使用 ui-sref-opts功能,我试 ...

随机推荐

  1. tachyon 初识

    一.简介 Tachyon是一个高容错的分布式文件系统,允许文件以内存的速度在集群框架中进行可靠的共享,就像Spark和MapReduce那样.通过利用信息继承,内存侵入,Tachyon获得了高性能.T ...

  2. Docker 底层实现

    基本架构 Docker 采用了 C/S架构,包括客户端和服务端. Docker daemon 作为服务端接受来自客户的请求,并处理这些请求(创建.运行.分发容器). 客户端和服务端既可以运行在一个机器 ...

  3. 再识C中的结构体

    在前面认识C中的结构体中我介绍了结构体的基础知识,下面通过这段代码来回顾一下: #include<stdio.h> #define LEN 20 struct Student{ //定义结 ...

  4. mysql中的longblob类型处理

    longblob 对应的 C#数据类型为 byte[] 1.byte[] 与 string 之间的转换 byte[] bb = Encoding.UTF8.GetBytes(ss); string s ...

  5. MyBatis 环境搭建

    1.为什么我们学习框架? 提高开发效率,框架是别人写好的工具类,我们需要遵循其规则进行操作 2.我们学习哪些框架 A.持久层框架:MyBatis 什么是持久化? 狭义:把数据永久性的保存到数据当中 广 ...

  6. input[type='submit']input[type='button']button等按钮在低版本的IE下面，去掉黑色边框的问题

    今天做一个tabs效果的时候,发现上面的button在低版本下会出现黑色的边框,很难看,于是我整理了下几个去掉黑色边框的办法: 1.在button的外层嵌套一个div,设置button的border: ...

  7. VMware系统运维（十二）部署虚拟化桌面 Horizon View 5.2 Viewcomposer安装

    1.首先打开viewcomposer 2.进入到安装向导 3.点击"Next" 3.接受协议,点击"Next" 4.选择安装位置,点击"Next&qu ...

  8. Umbraco文档类型定义多个template

    利用这个可以同时写PC端和手机端的网站, 在Template中,建立手机端的模板: 在文档类型中,同时选择两个模板,在浏览的时候在URL后加上Template的名称 + .aspx 就可以浏览到你写的 ...

  9. C++字符类型总结区别wchar_t,char,WCHAR

    转至:http://www.360doc.com/content/12/0807/01/9290626_228750141.shtml 1.区别wchar_t,char,WCHAR ANSI:即 ch ...

  10. Oracle数据库作业-6 查询“张旭“教师任课的学生成绩。

    23.查询"张旭"教师任课的学生成绩. select * from score s where cno in ( select cno from course where tno ...