AngularJs练习Demo16 ngRoute

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7     <script src="../Scripts/angular.min.js"></script>
 8     <script src="../Scripts/angular-route.min.js"></script>
 9 </head>
10 <body>
11     <div ng-app="myApp">
12         <div ng-controller="firstController">
13             {{text}}
14         </div>
15         <script type="text/javascript">
16             var app = angular.module("myApp", [‘ngRoute‘]);
17             app.config([‘$routeProvider‘, function ($routeProvider) {
18                 $routeProvider.when("/aaa/:num", {
19                     template: ‘<p>首页的内容</p>{{name}}‘, //templateUrl
20                     contorller:"Aaa"
21                 }).when("/bbb", {
22                     template: "<p>学员的内容</p>{{name}}",
23                     contorller:"Bbb"
24                 }).when("/ccc", {
25                     template: "test.html",
26                     contorller:"Ccc"
27                 }).otherwise({
28                      redirectTo:"/aaa"
29                 });
30             }]);
31         </script>
32
33     </div>
34 </body>
35 </html>
时间: 2024-12-21 10:02:11

AngularJs练习Demo16 ngRoute的相关文章

AngularJs练习Demo17 ngRoute

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <script src="../Scri

angularjs之插件ngRoute和ngAnimate

使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果. 如果有使用过swiper,就知道这个效果是怎么样的. 代码: <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src=&quo

理解AngularJS ngRoute

一般来说,我们认为AngularJS是一套前端的MVC框架.那么,为了实现视图的中转,肯定会涉及到路由的概念.这里我们就来说说有关AngularJS的路由--ngRoute. 序 个人了解到AngularJS,是由于在寻找可以动态利用Ajax从服务器端取得部分页面这一功能而找到EmberJS,而后又根据EmberJS找到的AngularJS.而在AngularJS中,实现这一功能的,就是ngRoute. 所以,个人与AngularJS的结缘,是由于ngRoute一点也不为过. 理解 Angula

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比. ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入. 1 <script src="lib/angular-route.js"></sc

[AngularJS] AngularJS系列(2) 中级篇之路由

目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on('$locationChangeStart', prepareRoute); $rootScope.$on('$locationChangeSuccess', commitRoute); 在ui-router中 listener = listener || $rootScope.$on('$locat

springmvc4开发rest

Spring MVC 4 RESTFul Web Services CRUD Example+RestTemplate Created on: August 11, 2015 | Last updated on: March 12, 2017 websystiqueadmin In this post we will write a CRUD Restful WebService using Spring MVC 4, and write a REST client with RestTempl

$routeParams $route.current.params

params 参数的意思 <a href="Book/Scarlet/?name=liu">Scarlet Letter</a><br/>   在js中写{{$routeParams.name}}得到的值为liu $routeParams加"."后得到的值为?后面传的参数.可以"."出来 $route.current.params 和 $routeParams 有个先后顺序, $routeParams有从上一个

AngularUI Router 概要【转】

通过AngularJS来创建SPA(single page application),要想让页面导航看起来跟一般Web页面一样的话,路由相当重要.AngularUI Router是AngularUI 团队开发的一个AngularJS路由模块,相比AngularJS的标准路由ngRoute,它更灵活,基于state而不是URL在一个页面中加载多个View并保持View的层次,Nested States & Views以及Multiple & Named Views.UI-Router被认为是

angular -- $routeParams API翻译

原api出处: https://docs.angularjs.org/api/ngRoute/service/$routeParams $routeParams 可以获取当前路径参数. 需要ngroute模块被安装. 路径参数是$location.search()和$location.path()的组合. 当$route被匹配的时候,路径参数就会被获取. 在参数名称冲突的情况下,路径参数优先于搜索参数. $routeParams服务保证当路由发生变化时,$routeParams对象的id不会变化