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

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

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. [Swift实际操作]七、常见概念-(10)使用UserDefaults和归档方式存取用户数据实际操作

    在项目开发之中,你会经常需要将一些数据存储在本地,以便记录用户生产的数据或操作习惯.在项目文件夹上带点击鼠标右键.弹出右键菜单.本文将为你演示,存储用户数据的两种常用方式. 选择菜单中的创建新文件选项 ...

  2. 通过sessionStorage来根据屏幕宽度变化来加载不同的html页面

    因为项目需要,分别写了移动端和PC端的两个html页面,现在需要根据不同的屏幕宽度来加载对应的页面. 先说一下本人的思路-- 刚开始我直接在加载页面的时候判断屏幕宽度,然后加载相应的页面,大家是不是也 ...

  3. P1631 序列合并

    P1631 序列合并 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2N2个和,求这N^2N2个和中最小的N个. 对于100%的数据中,满足1<=N<=100000. ...

  4. 【HDU5126】 stars k-d树

    题目大意:有$m$个操作,分两种:在指定三维坐标内加入一个点,询问指定空间内点的数量. 其中$m≤5*10^{4},1≤x,y,z≤10^9$ 这题几乎就是裸的$k-d$树啊.我们动态维护一棵$k-d ...

  5. POJ 2376

    #include<iostream>//by chengdacaizi. #include<stdio.h> #define MAXN 25005 using namespac ...

  6. SQL中文转拼音

    使用下方的函数.. 忘了从哪抄的了..留存一份 如果只要首字母..建议将数据  Left(tableFiled,1) 后传入函数 如果字段是空或者null, 不会报错..返回空 方法体: SET AN ...

  7. 《Android应用性能优化》2——内存、CPU、性能测评

    4.高效使用内存 4.1 说说内存 Android设备的性能主要取决于以下三因素: CPU如何操纵特定的数据类型: 数据和指令需占用多少存储空间: 数据在内存中的布局 4.2 数据类型 int和lon ...

  8. Glide的用法

    最基本用法 glide采用的都是流接口方式 简单的从网络加载图片 Glide.with(context).load(internetUrl).into(targetImageView); 从文件加载 ...

  9. OpenGL12-shader(GLSL)着色语言1（代码已上传)

    OpenGL着色语言(GLSL――OpenGL Shading Language)是用来在OpenGL中着色编程的语言, 也即开发人员写的短小的自定义程序,他们是在图形卡的GPU (Graphic P ...

  10. InterView之PHP（2）

    PHP 理论知识 常用的超全局变量(8个) $_GET ----->get传送方式 $_POST ----->post传送方式 $_REQUEST ----->可以接收到get和po ...