<!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. 编写Shell脚本的最佳实践，规范二

    需要养成的习惯如下: 代码有注释 #!/bin/bash # Written by steven # Name: mysqldump.sh # Version: v1.0 # Parameters : ...

  2. 嵌入式Linux下Camera编程--V4L2【转】

    转自:http://blog.csdn.net/fwqlzz/article/details/51126653 版权声明:本文为博主原创文章,未经博主允许不得转载. USB video class(又 ...

  3. C++11 lambda表达式（19篇C++11文章）

    C++11引入了lambda表达式,使得程序员可以定义匿名函数,该函数是一次性执行的,既方便了编程,又能防止别人的访问. Lambda表达式的语法通过下图来介绍: 这里假设我们定义了一个如上图的lam ...

  4. jmeter 多机负载压测与服务器性能监测

    环境: jmeter: apache-jmeter-3.3 jdk: 负载生成: 被测机: 一. 多机负载压测: 概述: 1.修改jmeter.properties配置文件 remote_hosts= ...

  5. 【原创】SSIS-执行包任务调用子包且子包读取父包变量

    背景: 有时候需要将一个个开发好的独立的ETL包串接起来形成一个独立而庞大的包,如:每家分公司都开发不同的ETL包,最后使用执行包任务来将这些分公司的包给串联起来形成一个独立而完整运行的ETL包,此时 ...

  6. OpenCV和Boost C++库的安装

    关于一般的安装步骤,此博客给出了详细的OpenCV的安装.一个步骤也不要落下,应该是不会出问题的. 主要的坑在Boost. 不知什么原因,我的电脑装boost_1_62_0-msvc-14.0-64, ...

  7. 牛客网 暑期ACM多校训练营（第二场）J.farm-STL(vector)+二维树状数组区间更新、单点查询 or 大暴力？

    开心.jpg J.farm 先解释一下题意,题意就是一个n*m的矩形区域,每个点代表一个植物,然后不同的植物对应不同的适合的肥料k,如果植物被撒上不适合的肥料就会死掉.然后题目将每个点适合的肥料种类( ...

  8. （10）java基础知识-字符串

    String s和 new String 的区别 String s1="hello"; String s2= new String("hello"); Stri ...

  9. Python的程序结构[1] -> 方法/Method[1] -> 静态方法、类方法和属性方法

    静态方法.类方法和属性方法 在 Python 中有三种常用的方法装饰器,可以使普通的类实例方法变成带有特殊功能的方法,分别是静态方法.类方法和属性方法. 静态方法 / Static Method 在 ...

  10. 同时上传参数及图片到 Web Api

    方法一:利用 FormData JS: function uploadFileAndParam() { var url = "http://localhost:42561/api/uploa ...