通过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. CSS 选择器【详解】

    转自:http://www.cnblogs.com/polk6/archive/2013/07/19/3142142.html CSS 选择器及各样式引用方式介绍 一个好的界面,是一个Web吸引人们最 ...

  2. C#中的var类型

    var关键字是C#3.0开始新增的特性,称为推断类型(其实也就是弱化类型的定义) . VAR可代替任何类型,编译器会根据上下文来判断你到底是想用什么类型,类似 OBJECT,但是效率比OBJECT高点 ...

  3. C#中用schema验证xml的合法性

    class ValidateXML { public string ErrString = string.Empty; public void ValidationEventCallBack(Obje ...

  4. 12-8下午 php语法

    <?php //var_dump(empty($a)); //判断变量是否为空//var_dump(isset($a)); //判断变量是否定义//$a = 10;//unset($a); // ...

  5. bigworld源码分析(5)——BaseApp分析

    BaseApp负载部分,核心代码缺失...网上的源码中都找不到,暂时没办法分析其核心内容,很遗憾,继续寻找吧,等找到了,再继续自己的分析.

  6. EntityFramework 基础的crud

    EntityFramework 基础的crud操作 根据上一张实体映射的demo学习基础的crud操作 1.增加 BlogDbContext dbContext = new BlogDbContext ...

  7. HDFS介绍

    一.HDFS概述 1.HDFS设计思想来源于Google的GFS,是GFS的开源实现. 2.HDFS要解决的问题: -存储超大文件,比如TB级别 -防止文件丢失. 3.HDFS的特点 -可以存储超大文 ...

  8. rsync异机备份

    参考http://www.cnblogs.com/itech/archive/2009/08/10/1542945.html 1.服务器 新建/etc/rsyncd.conf  ->新建/etc ...

  9. C语言实现的Web服务器(转-kungstriving)

    自己研究了好几天终于写出来一个,哈哈,当然也从网上得到了很多的帮助拉.谢谢大家咯!这个版本还不是很完善,但Web服务器的基本框架已经出来了,还有部分的功能需要进行进一步的测试和修改.虽然说C的开发比较 ...

  10. Safari 前端开发调试 iOS 完美解决方案

    转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05      0个评论    来源:Safari ...