<!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. USACO silver P1

    原题概述题意: 共有N个数,每个数的个数为ai,ai的总和为M,将每2个数进行配对,要求使配对之后2数的和的最大值最小,并输出最小值. 这不就是裸的贪心么..实在是水题啊, 不过如果假如有一个人要一个 ...

  2. C++ MFC std::string转为 std::wstring

    std::string转为 std::wstring std::wstring UTF8_To_UTF16(const std::string& source) { unsigned long ...

  3. libevent源码分析之信号处理

    新看看官方demo的libevent如何使用信号 int called = 0; static void signal_cb(int fd, short event, void *arg) { str ...

  4. gitlib 安装

    参考文件https://www.cnblogs.com/rslai/p/9109624.html

  5. python接口自动化10-token登录【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...

  6. poj 1106(半圆围绕圆心旋转能够覆盖平面内最多的点)

    Transmitters Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4955   Accepted: 2624 Desc ...

  7. ros move_base costmap 理解和实现动态窗口法避障

    以下大部分内容参考自 ros_by_example_hydro_volume_1.pdf local costmap 是怎么生成的?跟三维点云有什么关系? global costmap在没有全局地图下 ...

  8. [jquery] 给动态生成的元素绑定事件 on方法

    用底下的方法尝试了好多次都失败 $('.del').on('click',function(){ alert('aa'); })// 失败!! 终于在准备放弃前看到一篇博文说的方法 $(documen ...

  9. 树链剖分【P3833】 [SHOI2012]魔法树

    Description Harry Potter 新学了一种魔法:可以让改变树上的果子个数.满心欢喜的他找到了一个巨大的果树,来试验他的新法术. 这棵果树共有N个节点,其中节点0是根节点,每个节点u的 ...

  10. [BZOJ2095]Bridges

    最大值最小,是二分 转化为判定问题:给定一个混合图,问是否存在欧拉回路 首先,有向图存在欧拉回路的充要条件是每个点的入度等于出度,现在我们有一个混合图,我们要做的就是给其中的无向边定向,使得它变成有向 ...