AngularJS路由使用案例

AngularJS路由使用案例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>AngularJS路由使用案例</title>
 6         <script type="text/javascript" src="../js/angular.min.js"></script>
 7         <script type="text/javascript" src="../js/angular-route.min.js"></script>
 8     </head>
 9     <body ng-app="myapp">
10         <div>
11             <h1>在你我他学习吧,你可以学习到如下技术:</h1>
12             <a href="#/JAVAEE"></a>
13             <a href="#/AngularJS"></a>
14             <a href="#/EasyUI"></a>
15             <a href="#/MySQL"></a>
16         </div>
17         <!--路由加载后,更新变化的内容-->
18         <div ng-view></div>
19         <div>
20             <h1>footer</h1>
21         </div>
22     </body>
23     <script type="text/javascript">
24         //定义myapp模块
25         var myapp = angular.module("myapp",["ngRoute"]);
26         //配置模块的路由
27         myapp.config(["$routeProvider",function($routeProvider){
28             $routeProvider.when(‘/JAVAEE‘,{
29                 templateUrl:‘javaee.html‘
30             }).when(‘/AngularJS‘,{
31                 templateUrl:‘angularjs.html‘
32             }).when(‘/EasyUI‘,{
33                 templateUrl:‘easyui.html‘
34             }).when(‘/MySQL‘,{
35                 templateUrl:‘mysql.html‘
36             }).otherwise({
37                 redirectTo:‘JAVAEE‘
38             });
39         }]);
40     </script>
41 </html>

javaee.html代码:

<h1>javaee</h1>

angularjs.html代码:

<h1>angular</h1>

easyui.html代码:

<h1>easyui</h1>

mysql.html代码:

<h1>mysql</h1>

原文地址:https://www.cnblogs.com/niwotaxuexiba/p/8125117.html

时间: 2024-11-18 17:30:04

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

angularjs 路由 $routeProvider

Angularjs路由描述:定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中. 主界面index.html <!DOCTYPE html> <html> <head></head> <body> <div ng-app="routeApp"> <h3>路由</h3> <div

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

本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两个部分视图分别对应state1和state2,那state与state1和state2形成了嵌套关系. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolv

AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI-Router的onEnter和onExit事件 AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Rou

AngularJS路由系列(3)-- UI-Router初体验

本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Router初体验4.AngularJS路由系列(4)-- UI-Router的$state服务.路由事件.获取路由参数5.AngularJS路由系列(5)-- UI-Router的路由

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

angularjs路由 https://angular.io/guide/router 通过URL解释, 来定位客户端生成的浏览器端视图. 你可绑定路由到页面的链接上, 当用户点击链接, 可以浏览到相应的应用视图. The browser is a familiar model of application navigation: Enter a URL in the address bar and the browser navigates to a corresponding page. C

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/#/

Angularjs路由需要了解的那点事

我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模板.为了完成这个功能angularjs为我们提供了路由服务($routeProvider). 先看下我们的示例代码,html框架页index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&qu

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

这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同的 URL 访问不同的内容,当然实际应用为在单页面点击不同按钮等加载不同页面 之前有关于angular-route路由的介绍,但是只能一层路由嵌套,如果需要多重嵌套就是不够用了 UI-Router作为AngularUI为开发者提供的其中实用的一个模块,根据URL状态组织和控制界面UI的渲染,不是仅仅

AngularJS路由和模板

前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 AngularJS的思路,做声明式的架构设计时,我们通过指令和路由先设定好,什么样的操作干什么事情,等事件发生时,程序就会知道该干什么了. 今天说一下,AngularJS是如何实现前端路由功能的! 目录 AngularJS路由介绍 路由的代码实现 实现效果截图 1. AngularJS路由介绍 Angula