转自：https://www.cnblogs.com/best/tag/Angular/

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

$routeProvider.when(url, {

    template: string,

    templateUrl: string,

    controller: string, function 或 array,

    controllerAs: string,

    redirectTo: string, function,

    resolve: object<key, function>

});

参数说明：

  • template:

    如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

    .when('/computers',{template:'这是电脑分类页面'})

  • templateUrl:

    如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

    $routeProvider.when('/computers', {
    
    templateUrl: 'views/computers.html',
    
});

    以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

  • controller:

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

  • controllerAs:

    string类型，为controller指定别名。

  • redirectTo:

    重定向的地址。

  • resolve:

    指定当前controller所依赖的其他模块。

实例

 <html>

 <head>

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

 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

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

 <script type="text/javascript">

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

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

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

 .config(function ($routeProvider) {

     $routeProvider.

     when('/home', {

         templateUrl: 'embedded.home.html',

         controller: 'HomeController'

     }).

     when('/about', {

         templateUrl: 'embedded.about.html',

         controller: 'AboutController'

     }).

     otherwise({

         redirectTo: '/home'

     });

 });

 </script>

 </head>

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

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

       <h1> Home </h1>

   </script>

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

       <h1> About </h1>

   </script>

   <div>

     <div id="navigation">

       <a href="#/home">Home</a>

       <a href="#/about">About</a>

     </div>

     <div ng-view="">

     </div>

   </div>

 </body>

 </html>

45.angular路由设置的更多相关文章

  1. angular路由详解：

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  2. angular路由配置用法

      在如今,很多事用于HTML5嵌套在webview,成为(伪)app,用a链接来跳转,简单页面来说的话,速度还是可以的,但是应用越来越多,是用不流畅,当然原生的app像安卓以及IOS来说的话,跳转是 ...

  3. angular路由参数说明

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...

  4. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  5. Angular路由守卫 canDeactivate

    目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...

  6. angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  7. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. ICBC中的路由设置

    才去的中国工商银行,用身份证叫了A0076的号,前边还有26个人,闲来无聊果断拿出手机收取wifi.有两个ssid为ICBC的路由,信道分别是1号和6号,还好不需要密码,不过一会就连接上了. 那我先上 ...

  9. Controller里写自己需要的Action，参数的名字必须和路由设置的参数名一致

    Controller里写自己需要的Action,参数的名字必须和路由设置的参数名一致,如果参数不一致,传过去为null

随机推荐

  1. apk去广告工具(利用apktool去除apk文件里的广告)

    基本知识 apk安装包的文件结构 以知名桌面软件“LauncherPro”为例,apk安装包文件目录: 文件目录如下: - META-INF - res - anim - color - drawab ...

  2. Cordova 5 架构学习 Weinre远程调试技术

    手机上的页面不像桌面开发这么方便调试.能够使用Weinre进行远程调试以方便开发.本文介绍windows下的安装与使用. 安装 使用npm安装.能够执行: ###npm config set regi ...

  3. iptables 防火墙 只允许某IP访问某端口、访问特定网站

    iptables 防火墙 只允许某IP访问某端口.访问特定网站 1.先备份iptables /var/tmp 需要开80端口,指定IP和局域网 下面三行的意思: 先关闭所有的80端口 开启ip段192 ...

  4. bzoj1830: [AHOI2008]Y型项链(LCP+贪心)

    1830: [AHOI2008]Y型项链 题目:传送门 简要题意: 给出三个字符串,可以对任意字符串进行操作,每次操作都可以再其中一个字符串的末尾删除或添加一个字符,求最小操作数使得所有的字符串相同 ...

  5. nyoj--8--一种排序(排序，水题)

    一种排序 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数:现 ...

  6. ionic2集成极光推送

    ionic2集成极光推送: ionic2api:https://ionicframework.com/docs/ 极光推送官网:https://www.jiguang.cn android-怎么注册极 ...

  7. oracle 11g not in 与not exists 那个高效？

    网络上很多谣言是后面跟小表用not in,后面跟大表用not exists,难道真的是这样子的嘛? 情况下面测试: 1.先用小表测试(1000条记录和一张8万条记录的表): SQL> creat ...

  8. luogu 1558 色板游戏

    写这篇博客不是为了总结我的算法,而是为了纪念让我爆零的套路..... 色板游戏 色板长度为\(L\),\(L\)是一个正整数,所以我们可以均匀地将它划分成\(L\)块\(1\)厘米长的小方格.并从左到 ...

  9. java中对象和对象引用的区别

    1.何谓对象? 在Java中有一句比较流行的话,叫做“万物皆对象”,这是Java语言设计之初的理念之一.要理解什么是对象,需要跟类一起结合起来理解.下面这段话引自<Java编程思想>中的一 ...

  10. Net Core链接数据库

    原文 在Windows下,相信大家分分钟都可以搞定.而初次接触.net core + mysql可能需要注意些细节.首先打开vs2017新建一个asp.net core项目(选Web应用程序), 然后 ...