• 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指令的更多相关文章

  1. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  2. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  3. 你知道用AngularJs怎么定义指令吗？

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  4. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

  5. angularJS之使用指令封装DOM操作

    angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义 ...

  6. AngularJS创建新指令 - 基本功能

    指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init  ...

  7. [转]你知道用AngularJs怎么定义指令吗？--很详细

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  8. AngularJS SPA Template For Visual Studio

    单页面应用程序(SPA)[使用JavaScript.CSS和HTML强大的功能,可以构建一个单页面应用程序(SPAs)],它提供了丰富的用户体验页面.导航技术和AJAX提供必要的功能,而不用重新加载页 ...

  9. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

随机推荐

  1. BZOJ3564 : [SHOI2014]信号增幅仪

    先把所有点绕原点逆时针旋转(360-a)度,再把所有点横坐标除以放大倍数p,最后用随机增量法求最小圆覆盖即可. 时间复杂度期望$O(n)$ #include<cstdio> #includ ...

  2. gulp plugins 插件介绍

    目录 [−] gulp API gulp.src(globs[, options]) gulp.dest(path[, options]) gulp.task(name[, deps], fn) gu ...

  3. ACM: FZU 2150　Fire Game - DFS+BFS+枝剪 或者 纯BFS+枝剪

    FZU 2150 Fire Game Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u ...

  4. [深入浅出Windows 10]布局原理

    5.2 布局原理 很多时候在编写程序界面的时候都会忽略了应用布局的重要性,仅仅只是把布局看作是对UI元素的排列,只要能实现布局的效果就可以了,但是在实际的产品开发中这是远远不够的,你可能面临要实现的布 ...

  5. 查看那个进程占用了端口号（LINUX与AIX）

    在LINUX中: netstat命令 [root@limt ~]# netstat -tulp Active Internet connections (only servers) Proto Rec ...

  6. 《1Q84》--[日]村上春树

    <1Q84>,作者是:村上春树(村长) 故事梗概: 1984年,青豆与天吾皆为30岁,青豆为健身教练但另一面则是暗杀者,将受到极度暴力 的妇女们的丈夫们送至死亡的世界.天吾的职业为升大学的 ...

  7. qt播放器

    播放器 http://blog.csdn.net/foruok/article/details/39005703 图片 http://blog.csdn.net/liyinhuicc/article/ ...

  8. 深入浅出 - Android系统移植与平台开发（六）－ 为Android启动加速

    作者:唐老师,华清远见嵌入式学院讲师. Android的启动速度一直以来是他的诟病,虽然现在Android设备的硬件速度越来越快,但是随着新 版本的出现,其启动速度一直都比较慢,当然,作为程序员,我们 ...

  9. Linux_查看linux并发连接数

    1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态:netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a ...

  10. Handler消息传递机制

    引言: 出于性能优化考虑,Android的UI操作并不是线程安全的,这意味着如果有多个线程并发操作UI组件,可能导致线程安全问题. 为了解决这个问题,Android制定了一条简单的规则:只允许UI线程 ...