• 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. BZOJ4112 : [Wf2015]Pipe Stream

    枚举答案,考虑将速度区间等长地划分成若干个小区间. 设$n_i$表示$i$次敲击能得到的区间数,$v_i$表示$i$次敲击之后答案落在$[v1,v_i]$之间,则$n_0=1,v_0=v2$. 因为对 ...

  2. vwampserver2.5-apache2.4.9允许外部访问的配置

    打开..\wamp\bin\apache\apache2.4.9\conf\httpd.conf配置文件, <Directory "c:/wamp/www/">    ...

  3. Spoj 10628. Count on a tree 题解

    题目大意: 给定一棵n个点的树,每个点有一个权值,m个询问,每次询问树上点x到点y的路径上的第k小数. 思路: dfs后给每个节点一个dfs序,以每个点在他父亲的基础上建立主席树,询问时用(点x+点y ...

  4. ubifs扩展性分析

    文件系统的可扩展性,主要考察flash规模变大时对文件系统性能的影响,主要考察指标有: mount时间 访问时间 检查修复时间 最大文件大小 最大文件系统大小 最大文件个数   mount时间     ...

  5. BZOJ1485: [HNOI2009]有趣的数列

    Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<…&l ...

  6. CF #371 (Div. 2) C、map标记

    1.CF #371 (Div. 2)   C. Sonya and Queries  map应用,也可用trie 2.总结:一开始直接用数组遍历,果断T了一发 题意:t个数,奇变1,偶变0,然后与问的 ...

  7. GridView合并表头、多重表头（转）

    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { switch (e.Row.RowType) ...

  8. C# 窗体位置 Show和ShowDialog（转）

    CenterParent 窗体在其父窗体中居中. CenterScreen 窗体在当前显示窗口中居中,其尺寸在窗体大小中指定. Manual 窗体的位置由 Location 属性确定. Windows ...

  9. php归档函数（按时间）实现

    今日开发本站需要用到按时间归档文章的功能,即按文档发布时间将文章文类,以实现检索和统计功能,于是自己写了一个, 现分享给大家,相信大家工作和学习中有可能会用到,实现原理很简单,即取出文章发布时间戳的年 ...

  10. android-数据存储之远程服务器存储

    一.如何编码实现客户端与服务器端的交互 <一>JDK内置原生API HttpUrlConnection <二>Android内置的包装API HttpClient浏览器 < ...