<!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. JS省份联级下拉框

    <script type="text/javascript"> var china=new Object();china['北京市']=new Array('北京市区' ...

  2. 洛谷P1522 牛的旅行

    题目描述 农民 John的农场里有很多牧区.有的路径连接一些特定的牧区.一片所有连通的牧区称为一个牧场.但是就目前而言,你能看到至少有两个牧区通过任何路径都不连通.这样,Farmer John就有多个 ...

  3. Linux虚拟地址空间布局以及进程栈和线程栈总结

    原文链接:http://blog.csdn.net/freeelinux/article/details/53782986[侵删] 本文转自多个博客,以及最后有我的总结.我没有单独从头到尾写一个总结的 ...

  4. hdu 5142(数学-进制转换)

    NPY and FFT Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. hdu 畅通工程系列题目

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1232 并查集水. #include <stdio.h> #include <iost ...

  6. 在16aspx.com上下了一个.net程序,怎么修改它的默认登录名和密码?

    正常应该有个login.aspx文件,找到登入按钮事件,查看验证用户名密码事件,这个验证就有去搜索用户表,然后在这个用户表修改用户名密码就行了.不排除其他表有用用户名关联

  7. Guava源码学习(一)Optional

    基于版本:Guava 22.0 Wiki:Using and avoiding null 0:Optional简介 null在很多场景下会引发问题,NullPointerException困扰过无数的 ...

  8. STL+Floyd【p1690】贪婪的Copy

    Description Copy从卢牛那里听说在一片叫yz的神的领域埋藏着不少宝藏,于是Copy来到了这个被划分为个区域的神地.卢牛告诉了Copy这里共有个宝藏,分别放在第Pi个(1<=Pi&l ...

  9. Count of Smaller Numbers After Self -- LeetCode

    You are given an integer array nums and you have to return a new counts array. The counts array has ...

  10. 2017 China Collegiate Programming Contest Final (CCPC 2017)

    题解右转队伍wiki https://acm.ecnu.edu.cn/wiki/index.php?title=2017_China_Collegiate_Programming_Contest_Fi ...