通过ng-view和ngRouter控制页面显示内容：

html:

 <body ng-app="AngularStore">

 <div class="container-fluid">

     <div class="row-fluid">

         <div class="span10 offset1">

             <h1 class="well">

                 <a href="default.html">

                     <img src="img/logo.png" height="60" width="60" alt="logo" alt=""/>

                 </a>

                 Angular Store

             </h1>

             <div ng-view></div>

         </div>

     </div>

 </div>

js:

 var storeApp = angular.module('AngularStore', ['ngRoute'])                  //新版本的angular必须添加'ngRouter'，也需要引用ng-router.js

     .config(['$routeProvider', function ($routeProvider){

         $routeProvider

             .when('/',{                                                     //此种情况，在ng-view处将会显示partials/store.html中的内容

                 templateUrl:'partials/store.html',

                 controller:storeController

             })

             .when('/store',{                                        //此种情况，在ng-view处将会显示partials/store.html中的内容，下面的根据路径显示不同内容

                 templateUrl:'partials/store.html',

                 controller:storeController

             })

             .when('/products/:productSku',{

                 templateUrl:'partials/product.html',

                 controller:storeController

             })

             .when('/cart',{

                 templateUrl:'partials/shoppingCart.html',

                 controller:storeController

             })

             .otherwise({

                 redirectTo:'/store'

             });

     }]);

angular 的ng-view，ngrouter的更多相关文章

  1. Angular: 执行ng lint后如何快速修改错误

    当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...

  2. ANGULAR 使用 ng build --prod 编译报内存错误的解决办法

    如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...

  3. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  4. angular Error: [ng:areq]

    在使用augularjs的时候,爆了个错误: 后来经过对比,原来是我的<html>标签多了点东西

  5. Angular实现递归指令 - Tree View

    在层次数据结构展示中,树是一种极其常见的展现方式.比如系统中目录结构.企业组织结构.电子商务产品分类都是常见的树形结构数据. 这里我们采用Angular的方式来实现这类常见的tree view结构. ...

  6. [译] 关于 Angular 依赖注入你需要知道的

    如果你之前没有深入了解 Angular 依赖注入系统,那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商,每一个组件都有它自己的注入器,延迟加载模块有它自己的注入器. 但是,仅 ...

  7. angular.js，IE7,8,9兼容性的处理

    转........... 这段时间详细了解了谷歌新出的MVVM框架angular.js,并直接在本人所从事的项目中使用了.但是使用新东西都是有风险的,这不,采用了新框架的页面IE7,8各种显示不出来… ...

  8. 大话ASP.NET(第二篇,Angular结构篇--翻译)

    AngularJS API Docs Welcome to the AngularJS API docs page. These pages contain the AngularJS referen ...

  9. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

随机推荐

  1. Spring框架学习(二)

    一.依赖注入的三种注入方式 Spring框架为我们提供了三种注入方式:set注入.构造方法注入和接口注入. 1.set注入 规律:无论给什么赋值,配置文件中<property>标签的nam ...

  2. 68. 蓄水池抽样(Reservoir Sampling)

    [本文链接] http://www.cnblogs.com/hellogiser/p/reservoir-sampling.html 问题起源于编程珠玑Column 12中的题目10,其描述如下: H ...

  3. 在线聊天室的实现(2)--基于Netty 4.x的Echo服务器实现

    前言: 就如前文所讲述的, 聊天室往往是最基本的网络编程的学习案例. 本文以WebSocket为底层协议, 实现一个简单的基于web客户端的Echo服务. 服务器采用Netty 4.x来实现, 源于其 ...

  4. 移动互联网实战--资源类APP的数据存储处理和优化

    前言: 对于资源类的APP, 其音频/图形占据了APP本身很大的比例. 如何存储和管理这些资源文件, 成了一个颇具挑战性的难点. 移动端的碎片化, 高中低端手机的并存, 需要开发者不光是具备基础的存储 ...

  5. 20160621-BAPI 更改外向DN&更改拣配

    参考代码转自:http://blog.sina.com.cn/s/blog_4c66402b01012lgr.html 感谢. 测试一把,再做总结. 1.更改外向交货单: 2.更改内向交货单. htt ...

  6. MetaPhlAn 2：宏基因组进化分析

    描述 MetaPhlAn是分析从物种水平分辨率宏基因组鸟枪法测序数据的微生物群落(细菌,古细菌,真核细胞和病毒)的组成的计算工具.从版本2.0,MetaPhlAn还能够确定具体的菌株(在将样品含有先前 ...

  7. 2009年到2013年甲子园ED

    2009年 2010年  最喜欢的一个!看过N遍 2011年 也不错! 2012年  超级好听啊~^_^比10年的还好,看过N+1遍……o(╯□╰)o 2013年春季甲子园 2013年夏季 印象最深的 ...

  8. appserv升级php

    安装thinkphp的时候提示必须要php5.3及以上 本地测试服务器使用的是appserv集成环境 所以要单独升级php 首先到官网下载http://php.net/downloads.php wi ...

  9. poj3461 字符串匹配 熟悉kmp算法第一题

     题意:  计算一个字符串在另一个字符串中出现的次数. #include<cstdio> #include<cstring> #include<algorithm> ...

  10. 综合使用union和limit区分结果并限制返回结果集的条数

    limit , 这里的limit限制了返回的union(合并)后的结果集,