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 ...
随机推荐
- 【Cocos2d-x游戏开发】浅谈游戏中的坐标系
无论是开发2D还是开发3D游戏,首先必须弄清楚坐标系的概念.在Cocos2d-x中,需要了解的有OpenGL坐标系.世界坐标系和节点坐标系. 1.UI坐标系 IOS/Android/Windows ...
- python程序设计语言笔记 第一部分 程序设计基础
1.1.1中央处理器(CPU) cpu是计算机的大脑,它从内存中获取指令然后执行这些指令,CPU通常由控制单元和逻辑单元组成. 控制单元用来控制和协调除cpu之外的其他组件的动作. 算数单元用来完成数 ...
- HBase 压缩算法设置及修改
Compression就是在用CPU换IO吞吐量/磁盘空间,如果没有什么特殊原因推荐针对Column Family设置compression,下面主要有三种算法: GZIP, LZO, Snappy, ...
- ACM 16进制的简单运算
16进制的简单运算 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 现在给你一个16进制的加减法的表达式,要求用8进制输出表达式的结果. 输入 第一行输入一个正整 ...
- ACM 素数
素数 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 走进世博园某信息通信馆,参观者将获得前所未有的尖端互动体验,一场充满创想和喜悦的信息通信互动体验秀将以全新形式呈 ...
- 51Nod 1256 乘法逆元 Label:exgcd
1256 乘法逆元 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < K < N且K ...
- [知识点]Trie树和AC自动机
// 此博文为迁移而来,写于2015年5月27日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w1s8.html 1.前 ...
- [深入浅出WP8.1(Runtime)]浮出控件(Flyout)
4.15 浮出控件(Flyout) 浮出控件(Flyout)是一个轻型的辅助型的弹出控件,通常会作为提示或者要求用户进行相关的交互来使用.Flyout控件与Windows Phone里面的弹出框Mes ...
- C语言中常量
C语言中常量 不具有数据类型的常量------宏常量 宏常量定义:用一个标识符号来表示的常量,又称为符号常量. 宏定义: #define 标识符 字符串 ----- ...
- RTC实时时钟
作者:宋老师,华清远见嵌入式学院讲师. 1.1 RTC介绍 在 一个嵌入式系统中,通常采用RTC 来提供可靠的系统时间,包括时分秒和年月日等,而且要求在系统处于关机状态下它也能够正常工作(通常采用后备 ...