<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp">
<div ng-controller="firstController"> 这是本页面 <!--第一种引入方式-->
<div ng-include="url"></div> <!--第二种方式引入文件-->
<div ng-include="tpl"></div>
<script type="text/ng-template" id="myTpl">
这是模板
</script>
</div>
</body>
<script src="angular/angular.js"></script>
<script type="text/javascript">
var app=angular.module("myApp",[]); app.controller('firstController',function($scope){
/*第一种方式,直接引入外部的模板文件,,,在上面的ng-app中的div引入ng-include*/
$scope.url="demo04.html"; /*在上面的ng-app内部定义script标签,定义id,type属性,并且在$scope挂载id,在div中ng-include=变量名*/
$scope.tpl="myTpl";
}) </script>
</html>

在网页的开发中,模板的引入是少不了的,angular中提供两种模板的引入方式,一种是外部文件的模板,另外一种是内部script标签的方式去引入。  

ionic准备之angular基础——模板引入(7)的更多相关文章

  1. ionic准备之angular基础———服务provider 和 factory和service(9)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ionic准备之angular基础——格式化数据以及过滤器(8)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ionic准备之angular基础——dom操作相关(6)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ionic准备之angular基础——$watch,$apply,$timeout方法(5)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ionic准备之angular基础——run方法(4)

    可以看到整个angular.module对象具有以下各种属性和方法 <!DOCTYPE html> <html lang="en"> <head> ...

  6. ionic准备之angular基础——继承(3)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Angular基础---->AngularJS的使用(一)

    AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...

  8. Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器

    Bootstrap 3 与 4 差别很大,目录文件结构.所引入的内容也不同,这里说说一下 Bootstrap 引入的文件.网页模板和兼容性问题.本网站刚刚搭建好,正好发一下文章原来测试网站. Boot ...

  9. angular 缓存模板 ng-template $templateCache

    由于浏览器加载html模板是异步加载的,如果加载大量的模板会拖慢网站的速度,这里有一个技巧,就是先缓存模板. 使用angular缓存模板主要有三种方法: 方法一:通过script标签引入 <sc ...

随机推荐

  1. 1257 背包问题 V3——分数规划

    N个物品的体积为W1,W2......Wn(Wi为整数),与之相对应的价值为P1,P2......Pn(Pi为整数),从中选出K件物品(K <= N),使得单位体积的价值最大. Input 第1 ...

  2. Js String 属性扩展

    String.prototype.startsWith = function (startStr) {  var d = startStr.length;  return (d >= 0 &am ...

  3. MFC中GetParent()的作用(转)

    原文转自 https://bbs.csdn.net/topics/390540690 1.假如创建一个非模态的窗口,在如下两种做法里任选一种.(1) chatting.m_lpDlg = new CC ...

  4. matlab默认字体设置

      Monospaced Plain 10 SansSerif Plain 10 这是默认设置.希望能帮到你!

  5. tcpreplay 流量拆分算法研究

    1.1  算法目的 现在网络架构一般是Client-Server架构,所以网络流量一般是分 C-S 和 S-C 两个方向.tcpdump等抓包工具获取的pcap包,两个流向的数据没有被区分.流量方向的 ...

  6. 使用 Python 开始你的机器学习之旅【转】

    转自:https://linux.cn/article-8582-1.html 编译自:https://opensource.com/article/17/5/python-machine-learn ...

  7. Video for Linux Two API Specification Revision 2.6.32【转】

    转自:https://www.linuxtv.org/downloads/legacy/video4linux/API/V4L2_API/spec-single/v4l2.html Video for ...

  8. Linux内存管理之mmap详解 【转】

    转自:http://blog.chinaunix.net/uid-26669729-id-3077015.html 一. mmap系统调用 1. mmap系统调用 mmap将一个文件或者其它对象映射进 ...

  9. Scala学习随笔——深入类和对象

    函数化对象(又称方程化对象)指的是所定义的类或对象不包含任何可以修改的状态. 本篇随笔就是着重记录函数化对象.定义了一个有理数类定义的几个不同版本,以介绍 Scala 类定义的几个特性:类参数和构造函 ...

  10. hdu 5146(水题)

    Sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...