ng-include 可以引入外部的文件到当前视图中。这样可以增强复用性。 最简单的用法  <div ng-include src="'/public/template/tpl.html'"></div> 这样直接把tpl.html加载当前视图中了。 我们还可以使用如下定义个模板。id是模板名。如这里是"tpl/tpl1"

<script type="text/ng-template" id="tpl/tpl1">

       <p>我是模板内容</p>

</script>

这样的话可以直接使用ng-include="'tpl/tpl1'"。来调用这个模块。

官网文档：script

在使用时要注意的几点：

1. 引入ng-include="'tpl/tpl1'"。因为模板名是字符串，要是单引号括起来，如果写成ng-include="tpl/tpl1" 会将tpl/tpl1解析成变量，导致引入无效。

2. 使用ng-include src="'url'"  src属性中的地址不能跨域。ng默认只能是同一域名和http协议下的文件才能成功引入。这里涉及到跨域就不讨论了。

See the Pen Angular ng-include学习 by finley (@mafeifan) on CodePen.

Angular ng-include 学习实例的更多相关文章

  1. angular指令深度学习篇

    angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...

  2. Ant学习实例

    ant   目录(?)[+] Ant学习实例 安装Ant 基础元素 project元素 target元素 property元素 完整示例   Ant学习实例 1.安装Ant 先从http://ant. ...

  3. Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

    Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...

  4. Angular 5.x 学习笔记(1) - 模板语法

    Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...

  5. Angular之filter学习

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们 ...

  6. gulp + angular + requirejs 简单学习

    一.安装gulp(已经安装了node环境) npm  install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx&q ...

  7. 史上最全的Angular.js 的学习资源

    Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...

  8. React入门最好的学习实例－TodoList

    前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好 ...

  9. zTree学习实例

    今天做完一个zTree的实例,供有需要的学习! 效果图如下:

随机推荐

  1. thinkphp3.2.3代码审计

    <?php namespace Home\Controller; use Think\Controller; class UserController extends Controller { ...

  2. 【小游戏】flappy pig

    (1)这款游戏的画面很简单:一张背景图,始终就没有变过: (2)这款游戏的对象只有俩:一个小鸟(有三种挥动翅膀的状态)以及一对管道(有管道向上和向下两个方向): http://www.cnblogs. ...

  3. 复习静态页面polo-360

    1.ps快捷键 ctrl+1 恢复到100% ctrl+0 适应屏幕大小 ctrl+r 显示标尺 辅助线的利用 矩形框--图像--裁剪:文件存储为web所用格式,注意选格式. 1个像素的平铺 雪碧图的 ...

  4. leetcode 20 括号匹配

    class Solution { public: bool isValid(string s) { stack<char> result; for(char c:s){ if(c == ' ...

  5. rocket-console控制台安装

    1.下载 github地址:https://github.com/apache/rocketmq-externals 2.选择稳定版本: 3.下载到本地:       环境需求 maven  jdk ...

  6. 生产者-消费者模型-线程安全队列Queue

    #python3 #product new data into the queue #comsume data from the queue from queue import Queue impor ...

  7. 阿里云阿里免费ssl wap网站在手机微信、手机浏览器无法访问

    图片可以访问,样式无法显示 https://css.cnbuses.com/css/wap/gonggong.css 1,怀疑是开了代理访问. 关闭后还是访问空白. 2.在手机浏览器打开,提示该网站的 ...

  8. java核心技术-多线程之引导概念

    前两篇文章分别讲了,Java线程相关基础概念以及线程的内存模型,本节作为后续章节的引导,个人认为对于学习后面的只是还是比较重要.好了,既然说了多线程,那么首先要弄清以下几个问题: 1. 什么是多线程? ...

  9. rpm与yum，at与crontab，sed命令使用

    1.简述rpm与yum命令的常见选项,并举例. rpm——软件包管理系统,它使得在Linux下安装.升级.删除软件包的工作变得容易,并且具有查询.验证软件包的功能. 1)安装选项 命令格式: rpm ...

  10. WebGl 旋转（矩阵变换）

    代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...