angularJs之template指令
template:
如果我们只需要在ng-view 中插入简单的HTML 内容，则使用该参数：
.when('/computers',{template:'这是电脑分类页面'})templateUrl:
如果我们只需要在ng-view 中插入HTML 模板文件，则使用该参数：
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
例 template指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular. min.js"></script>
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive><!-- E元素-->
<div class="runoob- directive"></div><!-- C样式-->
<div runoob-directive></div><!-- A属性-->
<!-- directive: runoob-directive --><!- - M注释-->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "ACEM",//A属性C样式E元素M注释
replace : true,
template : "<h1>自定义指令222!</h1>"=======页面中显示的是这里的内容，包括标签，如果这里的标签与内容越来越多，会难以维护。
};
});
</script>
</body>
</html>
====以上指令内容是被标签包围起来的，如果标签越来越多，维护不方便，书写也困难，解决以上问题，将template的内容写在一个页面上，这里的内容不再是内容，而是一个页面的地址。
也就相当于路由的页面跳转的这个功能了
angularJs之template指令的更多相关文章
- AngularJS中的指令全面解析（转载）
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 你知道用AngularJs怎么定义指令吗？
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
- Ⅵ.AngularJS的点点滴滴-- 指令
指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...
- angularJS之使用指令封装DOM操作
angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义 ...
- AngularJS创建新指令 - 基本功能
指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init ...
- [转]你知道用AngularJs怎么定义指令吗？--很详细
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
- AngularJS SPA Template For Visual Studio
单页面应用程序(SPA)[使用JavaScript.CSS和HTML强大的功能,可以构建一个单页面应用程序(SPAs)],它提供了丰富的用户体验页面.导航技术和AJAX提供必要的功能,而不用重新加载页 ...
- 使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
随机推荐
- 连连看[HDU1175]
连连看 Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- HDU5331 : Simple Problem
因为是二分图,所以最大独立集$=$总点数$-$最大匹配. 因为是树,所以具有贪心性质,设$f_i$表示$i$是否与其孩子匹配,$a_i$表示$i$的孩子里$f$为$0$的个数,则$f_i=[a_i&g ...
- HDU 3074 (线段树+模P乘法)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3074 题目大意:单点更新.维护序列乘法.mod 1000000007. 解题思路: 10000000 ...
- Java 文件和byte数组转换
/** * 获得指定文件的byte数组 */ private byte[] getBytes(String filePath){ byte[] buffer = null; try { File fi ...
- [WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化
11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依 ...
- 【wikioi】1041 Car的旅行路线
题目链接 算法:最短路(数据弱,Floyd也能过) 惨痛的教训:此题我至少提交了20次,原因在于= =太草率和粗心了,看到那个多少组数据以为是城市的数量,导致数组开得小小的= =.(对不起,wikio ...
- 【Oracle】ORA-28000: the account is locked-的解决办法
ORA-28000: the account is locked第一步:使用PL/SQL,登录名为system,数据库名称不变,选择类型的时候把Normal修改为Sysdba;第二步:选择myjob, ...
- BZOJ4515: [Sdoi2016]游戏
Description Alice 和 Bob 在玩一个游戏. 游戏在一棵有 n 个点的树上进行.最初,每个点上都只有一个数字,那个数字是 123456789123456789. 有时,Alice 会 ...
- msnodesql的使用
msnodesql的安装 npm install msnodesql 使用msnodesql写的增删改查 var sql=require('msnodesql'); var conn_str= ...
- Java 中的转义字符
注意斜杠方向,为键盘右上角的斜杠 \t 在当前编辑位置插入一个 tab \b 在当前编辑位置插入一个空格 \n 换行(在当前编辑位置插入 a newline) \r 在当前编辑位置插入一个回车 ...