angular ngRoute小例子

ngRoute学习小例子

单页面应用中可以使用ng-view，当修改ng-view的template时可以实现一个页面html中展示不同内容（div部分）。

例如index.html中包含ng-view

 1 <!DOCTYPE HTML>
 2 <html ng-app="app">
 3 <head>
 4 <script src="./bower_components/angular/angular.js"></script>
 5 <script src="./bower_components/angular-route/angular-route.js"></script>
 6 </head>
 7 <body>
 8 <h1>angularJS</h1>
 9 <div ng-view></div>
10 <script type="text/javascript">
11 var module = angular.module(‘app‘,[‘ngRoute‘]);
12 module.config([‘$routeProvider‘,function($routeProvider){
13 $routeProvider
14     .when(‘/t2‘,{
15           templateUrl: ‘t2.html‘,
16           controller:""
17         })
18     .when(‘/t3‘,{
19           templateUrl: ‘t3.html‘,
20           controller:""
21         })
22 }]);
23 </script>
24 </body>
25 </html>

t2.html

1 <div><h1>t2</h1>
2 </div>

t3.html

1 <div><h1>t3</h1>
2 </div>

实现效果如上。

时间： 2024-12-28 14:31:31

angular ngRoute小例子的相关文章

laravel 数据库操作小例子

public function demo() { $res = null; //insert数据插入 //$user=array('username'=>'joy','password'=>'123456','age'=>23); //$res = DB::table('users')->insert($user); /* 数据查询 $res = DB::table('users')->where('username','joy')->get(); $res = DB:

spring小例子-springMVC+mybits整合的小例子

这段时间没更博,找房去了... 吐槽一下,自如太坑了...承诺的三年不涨房租,结果今年一看北京房租都在涨也跟着涨了... 而且自如太贵了,租不起了.. 突然有点理解女生找对象要房了.. 搬家太受罪了... 今天更一下springMVC整合mybits形成最简单的网站demo. 大概效果就是这样的:左边是数据库查询结果,右边是页面访问结果: 首先,一个简单的springMVC小例子可以看这个http://www.cnblogs.com/xuejupo/p/5236448.html 这是在这

cmake 之一个小例子

cmake,比手写makefile更好的选择安装cmake,此部分略过一.新建一个工程这里我是在windows下使用eclipse新建了一个c工程(PS:我一般新建一个Makefile类型的工程,这样比较干净) 二.建立必要的文件夹我的工程目录: D:\code\cpp\cmakestudy\test>tree /f 卷软件的文件夹 PATH 列表卷序列号为 0006-17B7 D:. │ .cproject │ .project │ CMakeLists.txt │ ├─bin

简述人脸特异性识别&&一个基于LBP和SVM的人脸识别小例子

原谅我用图片,MAC在Safari里给文章进行图文排版太麻烦啦~ 本文适合初入计算机视觉和模式识别方向的同学们观看~ 文章写得匆忙,加上博主所知甚少,有不妥和勘误请指出并多多包涵. 本文Demo的代码由HZK编写,特征点由月神和YK选择和训练. 转载请注明 copyleft by sciencefans, 2014 为了方便大家学习,附上高维LBP的核心代码 1 ################################################### 2 # 3 # 4 # NO

COM2 --- 小例子

在COM1 的小例子中,,我们大概知道什么是组件类 ,什么是接口了.这小节呢,我们来实现一下由一个组件类去实现两个接口的过程. 新建项目: 我们的解决方案的名字是 ComDemoCode ,项目名字是 MathToolKit 这表示我们的项目自动生成的 DLL 的名字就是 MathToolKit(数学工具包). 我们的继承关系有必要给大家先列出来,让大家看看在这里面,IPrimerMath接口提供 + - * / % 五个基本运算方法,IAdvanceMath接口提

python try小例子

#!/usr/bin/python import telnetlib import socket try: tn=telnetlib.Telnet('10.67.21.29',60000) except socket.error, e: print e exit(1) tn.set_debuglevel(1) tn.write('quit'+'\n') print 'ok' socket.error为错误类型 e为对象 python try小例子,布布扣,bubuko.com

C/C++ New与Delete （小例子）

转自:http://blog.csdn.net/chenzujie/article/details/7011639 先来看两段小程序: 1). #include <iostream.h> #include <String.h> void main(void) { char *str1 = "just have fun"; char *str2 = "happy day"; char *sTmpPtr = new char[255]; char

一个php多态性的小例子

多态性在 OO 中指 "语言具有以不同方式处理不同类型对象的能力",但 PHP 是弱类型语言,在这一点上就比较弱,仅有 instance of 可以用于判断对象的类型多态性的优点:让代码更接近生活中的真实情况一下是一个非常简单的多态性例子,描述在电脑上安装不同操作系统,linux, OS X, windows 和 computer 是两种不同类型的对象. interface os{ function name(); function creator(); } class linux

用两个小例子来解释单例模式中的“双重锁定”

学习单例模式时,好多人都不太理解双重锁定.学完后突然想到一个很有趣的例子. 单例模式结构图: 代码: Singleton类 class Singleton { private static Singleton instance; private static readonly object syncRoot = new object(); //程序运行时创建一个静态只读的进程辅助对象 private Singleton() { } //用private修饰构造方法,防止外界利用new创建此类实例