angular 的ng-view，ngrouter
通过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的更多相关文章
- Angular: 执行ng lint后如何快速修改错误
当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...
- ANGULAR 使用 ng build --prod 编译报内存错误的解决办法
如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...
- Angular CLI ng常用指令整理
一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...
- angular Error: [ng:areq]
在使用augularjs的时候,爆了个错误: 后来经过对比,原来是我的<html>标签多了点东西
- Angular实现递归指令 - Tree View
在层次数据结构展示中,树是一种极其常见的展现方式.比如系统中目录结构.企业组织结构.电子商务产品分类都是常见的树形结构数据. 这里我们采用Angular的方式来实现这类常见的tree view结构. ...
- [译] 关于 Angular 依赖注入你需要知道的
如果你之前没有深入了解 Angular 依赖注入系统,那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商,每一个组件都有它自己的注入器,延迟加载模块有它自己的注入器. 但是,仅 ...
- angular.js，IE7,8,9兼容性的处理
转........... 这段时间详细了解了谷歌新出的MVVM框架angular.js,并直接在本人所从事的项目中使用了.但是使用新东西都是有风险的,这不,采用了新框架的页面IE7,8各种显示不出来… ...
- 大话ASP.NET(第二篇,Angular结构篇--翻译)
AngularJS API Docs Welcome to the AngularJS API docs page. These pages contain the AngularJS referen ...
- 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular
现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...
随机推荐
- Python框架、库以及软件资源汇总
转自:http://developer.51cto.com/art/201507/483510.htm 很多来自世界各地的程序员不求回报的写代码为别人造轮子.贡献代码.开发框架.开放源代码使得分散在世 ...
- [转]http://makefiletutorial.com/
Intro This makefile will always run. The default target is some_binary, because it is first. some_bi ...
- Git 一次性 pull push 所有的分支
/********************************************************************************* * Git 一次性 pull pu ...
- C&C++ recap
大一时候学过C++,可惜忘得差不多了,之后也很少用过.当时使用的是windows系统,使用的还是visual C++.当时对计算机并不感冒,也没好好学.最近在R的学习中遇到瓶颈,觉得要捡起曾经的C/C ...
- Linux压缩那些事儿
tar简介 Linux的压缩命令的源文件只能有一个,这意味在压缩之前不得不先将要压缩的所有文件打包成一个包,然后再压缩包,这样来完成对多个文件的压缩.所以在了解解压缩之前就必须先了解打包命令. Lin ...
- cocos2d-x 3.2 listview scorllview 等容器在小米华为等部分手机显示泛白解决
感觉记不住,代码贴上以免以后难找 在proj.android\src\org\cocos2dx\cpp\AppActivity.java 中的 public class AppActivity ext ...
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- OC 中 类目、延展和协议
Category : 也叫分类,类目. *是 为没有源代码的类 扩充功能 *扩充的功能会成为原有类的一部分,可以通过原有类或者原有类的对象直接调用,并且可继承 *该方法只能扩充方法,不能扩充实例变量 ...
- HDU 4465 数值计算，避免溢出
数学,数值计算,求期望 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4465题目描述:有两个盒子,每个中有n个糖果,(n<10^5)每次任选一 ...
- httpd启动脚本
#!/bin/bash # chkconfig: - . /etc/rc.d/init.d/functions if [ -f /etc/sysconfig/httpd ]; then . /etc/ ...