这是小编的一些学习资料，理论上只是为了自己以后学习需要的，但是还是需要认真对待的

以下内容仅供参考，请慎重使用学习

AngularJS“路由”的定义概念

AngularJS最近真的很火，很多同事啊同学啊朋友都在用，这不推荐我学习，听到这个名字就十分火热的去了

什么是AngularJS就不做说明了，这个东西还是很有趣的

在这里推荐一下学习网站，菜鸟教程，虽然里面的教程很多都很浅显，而且好多也没有说明，但是对于入门确实很不错的选择

1.什么是AngularJS的路由呢？

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用

 http://mibear.com/#/first

 http://mibear.com/#/second

 http://mibear.com/#/third

上面是它的展现形式，# 号之后的内容是不是像服务端请求的样子呢，其实在请求的时候是会被浏览器忽略掉的。 而我们需要的就是在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

2.路由的配置实例

 <html>

 <head>

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

 <!--导入angular以及路由文件angular-route.js-->

 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>

 <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

     <script type="text/javascript">

         //把元素值（比如输入域的值）绑定到应用程序。

         angular.module('ngRouteExample', ['ngRoute'])

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

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

         .config(function ($routeProvider) {

             $routeProvider.

             when('/a1', {

                 templateUrl: 'a1.html',

                 controller: 'a1'

             }).

             when('/a2', {

                 templateUrl: 'a2.html',

                 controller: 'a2'

             }).

             otherwise({

                 redirectTo: '/a2'

             });

         });

 </script>

 </head>

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

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

               <h1> Home </h1>

           </script>

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

               <h1> About </h1>

           </script>

           <div>

             <div id="navigation">

               <a href="#/a1">这是a1</a>

               <a href="#/a2">这是a2</a>

             </div>

             <div ng-view="">

             </div>

           </div>

     </body>

 </html>

3.解析

 //包含了ngRoute 模块的

 angular.module('routingDemoApp',['ngRoute'])
 //使用 ngView 指令，用来显示路由切换的页面

 <div ng-view></div>
 //路由配置设置其中之一

 .config(function ($routeProvider) {

             $routeProvider.

             when('/a1', {

                 templateUrl: 'a1.html',

                 controller: 'a1'

             }).

             when('/a2', {

                 templateUrl: 'a2.html',

                 controller: 'a2'

             }).

             otherwise({

                 redirectTo: '/a2'

             });

         });

 //templateUrl，在 ng-view 中插入 HTML 模板文件的地址

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

 //redirectTo，重定向的地址，可以是你想最开始加载的页面
  <script type="text/ng-template" id="a1.html">

               <h1> Home </h1>

           </script>

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

               <h1> About </h1>

           </script>

 //这里的加载内容可以使本地的HTML文件链接，然后删掉这部分js就好

本地的HTML文件直接建立两个为a1.html,a2.html就好了，路径要正确(这里是放在同目录下)

4. 效果样式

那么最后的样子是如何的呢

点击不同的标签，下面的<div ng-view="">就会加载不同的页面，这里的页面可以是本地页面。

[AngularJS] “路由”的定义概念、使用详解——AngularJS学习资料教程的更多相关文章

  1. 第7.15节 Python中classmethod定义的类方法详解

    第7.15节  Python中classmethod定义的类方法详解 类中的方法,除了实例方法外,还有两种方法,分别是类方法和静态方法.本节介绍类方法的定义和使用. 一.    类方法的定义 在类中定 ...

  2. Java基础-变量的定义以及作用域详解

    Java基础-变量的定义以及作用域详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.字面量 常量(字面量)表示不能改变的数值(程序中直接出现的值).字面量有时也称为直接量,包 ...

  3. 《Node.js开发实战详解》学习笔记

    <Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...

  4. zz详解深度学习中的Normalization，BN/LN/WN

    详解深度学习中的Normalization,BN/LN/WN 讲得是相当之透彻清晰了 深度神经网络模型训练之难众所周知,其中一个重要的现象就是 Internal Covariate Shift. Ba ...

  5. 命令创建.net core3.0 web应用详解（超详细教程）

    原文:命令创建.net core3.0 web应用详解(超详细教程) 你是不是曾经膜拜那些敲几行代码就可以创建项目的大神,学习了命令创建项目你也可以成为大神,其实命令创建项目很简单. 1.cmd命令行 ...

  6. Spring MVC 学习总结（二）——控制器定义与@RequestMapping详解

    一.控制器定义 控制器提供访问应用程序的行为,通常通过服务接口定义或注解定义两种方法实现. 控制器解析用户的请求并将其转换为一个模型.在Spring MVC中一个控制器可以包含多个Action(动作. ...

  7. spring-搭建-概念-配置详解-属性注入

    1 spring介绍  三层架构中spring位置 spring一站式框架 正是因为spring框架性质是属于容器性质的. 容器中装什么对象就有什么功能.所以可以一站式. 不仅不排斥其他框架,还能帮其 ...

  8. .NET 云原生架构师训练营（模块二 基础巩固 RabbitMQ Masstransit 详解）--学习笔记

    2.6.7 RabbitMQ -- Masstransit 详解 Consumer 消费者 Producer 生产者 Request-Response 请求-响应 Consumer 消费者 在 Mas ...

  9. Kubernetes 部署策略详解-转载学习

    Kubernetes 部署策略详解 参考:https://www.qikqiak.com/post/k8s-deployment-strategies/ 在Kubernetes中有几种不同的方式发布应 ...

随机推荐

  1. 【JS深入学习】——函数创建和重载

    今天做一个关注/取消的功能,由于需要向后台发送请求,想通过控制用户点击发送的频次减少不必要的请求,即在一定时间内,用户点击多次但只发送一次数据,自然而然想到了使用[函数节流]. function th ...

  2. Linux中MySQLl单实例源码编译安装

    MySQL5.5以后源码安装要用cmake 1.3 安装相关包(cmake) 1.3.1 cmake软件 cd /home/Public/tools/ tar xf cmake-2.8.8.tar.g ...

  3. FlexMonkey实战

    文章来源:http://www.cnblogs.com/raol/p/flexmonkey.html 我的有道云笔记:http://note.youdao.com/share/?id=22b79669 ...

  4. Redhead安装VMware Tools

    Redhead安装VMware Tools VMware Tools 是款插件,便于在图形化界面中移动鼠标和复制拖动文件,对于redhead等命令符界面用处不大. 2.挂载光盘安装方法

  5. 【xsy1122】 路径 点分治+trie

    题目大意:给你一棵n个点的树,树边上有边权,对于每一个点,你要求出经过该点的所有的路径中,路径异或和最大的值. 数据范围:$n≤10^5$,边权$≤10^9$. 我们考虑枚举每一条路径,显然这个是会T ...

  6. QuantLib 金融计算——基本组件之 Currency 类

    目录 QuantLib 金融计算--基本组件之 Currency 类 概述 构造函数 成员函数 如果未做特别说明,文中的程序都是 python3 代码. QuantLib 金融计算--基本组件之 Cu ...

  7. (转)mysql5.7 根据二进制文件mysqlbinlog恢复数据库 Linux

    原文:http://blog.csdn.net/qq_15058425/article/details/61196085 1.开始mysqlbinlog日志功能 先找打my.cnf文件的位置: 2.编 ...

  8. Jmeter环境搭建

    一.工具描述 Apache JMeter是 100 %的 java 桌面应用程序.它可以被用来测试包括基于静态和动态资源程序的性能,例如静态文件, Java Servlets , Java  对象,数 ...

  9. PMP备考指南之第二章：项目运作环境

    本文已同步至 GitHub/Gitee/公众号,感兴趣的同学帮忙点波关注~ 第二章:项目运作环境 1. 事业环境因素.组织过程资产 事业环境因素 Enterprise Environmental Fa ...

  10. 恶性bug解决，Encoding 1252 data could not be found. Make sure you have correct international codeset assembly installed and enabled

    百度是没有的,google了下 这句话的意思是编码1252没找到,确保程序及是国际化格式 发生在我使用unity读取xlsx文件,在编辑器运行正常,但是发布出来不正常,报错 解决方案: 链接:http ...