AngularJS路由使用案例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>AngularJS路由使用案例</title>

         <script type="text/javascript" src="../js/angular.min.js"></script>

         <script type="text/javascript" src="../js/angular-route.min.js"></script>

     </head>

     <body ng-app="myapp">

         <div>

             <h1>在你我他学习吧，你可以学习到如下技术：</h1>

             <a href="#/JAVAEE"></a>

             <a href="#/AngularJS"></a>

             <a href="#/EasyUI"></a>

             <a href="#/MySQL"></a>

         </div>

         <!--路由加载后，更新变化的内容-->

         <div ng-view></div>

         <div>

             <h1>footer</h1>

         </div>

     </body>

     <script type="text/javascript">

         //定义myapp模块

         var myapp = angular.module("myapp",["ngRoute"]);

         //配置模块的路由

         myapp.config(["$routeProvider",function($routeProvider){

             $routeProvider.when('/JAVAEE',{

                 templateUrl:'javaee.html'

             }).when('/AngularJS',{

                 templateUrl:'angularjs.html'

             }).when('/EasyUI',{

                 templateUrl:'easyui.html'

             }).when('/MySQL',{

                 templateUrl:'mysql.html'

             }).otherwise({

                 redirectTo:'JAVAEE'

             });

         }]);

     </script>

 </html>

javaee.html代码：

<h1>javaee</h1>

angularjs.html代码：

<h1>angular</h1>

easyui.html代码：

<h1>easyui</h1>

mysql.html代码：

<h1>mysql</h1>

AngularJS路由使用案例的更多相关文章

  1. AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...

  2. Angularjs路由需要了解的那点事

    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...

  3. 【转】AngularJS路由和模板

    1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...

  4. AngularJS路由和模板

    前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...

  5. AngularJS路由跳转

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...

  6. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  7. AngularJS进阶(二)AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

  8. angularjs路由path方式实现原理探究

    angularjs路由 https://angular.io/guide/router 通过URL解释, 来定位客户端生成的浏览器端视图. 你可绑定路由到页面的链接上, 当用户点击链接, 可以浏览到相 ...

  9. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

随机推荐

  1. sqlSugar的使用---入门

    一,新建.net core  web项目 二.  项目引入包:sqlSugarCore 三.创建两个表:user,   department 四. 新建model(不一定需要与table相同,使用[S ...

  2. Spring Security（十四）：5.4 Authorize Requests

    Our examples have only required users to be authenticated and have done so for every URL in our appl ...

  3. AI tensorflow MNIST

    MNIST 数据 train-images-idx3-ubyte.gz:训练集图片 train-labels-idx1-ubyte.gz:训练集图片类别 t10k-images-idx3-ubyte. ...

  4. ExFilePicker的使用 — 获取本地图片资源并用RecyclerView展示出来

    代码其实很简单,所以就不多进行文字说明,直接上完整的代码: 第一步:在app/build.gradle添加需要使用到的依赖库:(这里对引用的版本冲突问题作了处理,详情请看链接:https://www. ...

  5. linux驱动之中断处理过程C程序部分

    当发生中断之后,linux系统在汇编阶段经过一系列跳转,最终跳转到asm_do_IRQ()函数,开始C程序阶段的处理.在汇编阶段,程序已经计算出发生中断的中断号irq,这个关键参数最终传递给asm_d ...

  6. eclipse svn合并小结

    合并时候,当前在哪个分支上,哪个分支即为“主干” 弱化主干 分支的概念.svn原则上并没有主干 分子 主 从的概念.从一个项目衍生(分支)出来的版本,都可以是主,也可以是从. 版本之间互相合并原理 文 ...

  7. java redis 分页查询数据

    package com.liying.tiger.test; import java.util.List; import org.springframework.context.Application ...

  8. 从源码看Spring Security之采坑笔记（Spring Boot篇）

    一:唠嗑 鼓捣了两天的Spring Security,踩了不少坑.如果你在学Spring Security,恰好又是使用的Spring Boot,那么给我点个赞吧!这篇博客将会让你了解Spring S ...

  9. 初步学习Xamarin的感受

    一直仰慕Xamarin的大名,最近抽空去浅学了一下. 最后有一种这东西不咋地,又有一种这东西还不错的感觉 先说下为什么不咋地? 如果在公司项目使用Xamarin.forms这个东西.按照国内APP设计 ...

  10. 小程序解决方案 Westore - 组件、纯组件、插件开发

    数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...