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. oracle exp 无法导出空表

    oracle exp 无法导出空表   select 'alter table '|| a.table_name ||' allocate extent;' from user_tables a wh ...

  2. 學習Extjs比較好的資源

    http://www.qeefee.com  學習mvc extjs等比較好 还有就是extjs文档 要多看extjs文档中的方法源码 egg:图片 点击format.js看源码如何定义

  3. jquery Mobile入门—多页面切换示例学习

    1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码代码如下: &l ...

  4. nginx发布antd-pro项目（别人发的，未测试）

    server { listen ; server_name localhost; #charset koi8-r; charset utf-; #access_log logs/host.access ...

  5. Selenium封装

    import os from selenium import webdriver from selenium.webdriver.common.by import By from selenium.w ...

  6. 安装及使用supervisor

    用途有一个进程需要每时每刻不断的跑,但是这个进程又有可能由于各种原因有可能中断.当进程中断的时候,希望能自动重新启动它.此时,我就需要使用到了Supervisor. 前言supervisor管理的进程 ...

  7. 【腾讯敏捷转型No.8】你爱上手机QQ了么？

    上一篇文章<QQ邮箱如何利用敏捷做到中国第一>,“QQ邮箱之母”马化腾带领QQ邮箱团队,从流量思维向产品思维转变,“QQ邮箱之父”张小龙也是在这个敏捷转型过程中,剔除固有的成见,激发对优秀 ...

  8. Java中的冒泡排序

    Java中的冒泡排序排序的第一种思想:将第一个值与后面的值相比较,如果第一个值比其他值小,那么将较大的值与第一个换位置,然后继续比较直至所有的数比较完成.这样就可以保证第一个数是最大数.然后将第二个数 ...

  9. rman备份报错，全zero错误处理一例（bbed）

    问题:某数据库在执行rman全备的时候,发现alert日志中有报错,报错提示, file 10,block 305076全部为zero,内容全零,处理过程如下 分析处理: 1. 这个问题可能是 系统或 ...

  10. --oracle删除数据库表（无主键）中重复的记录

    --oracle删除数据库表(无主键)中重复的记录 1,  CREATE TABLE newtable as SELECT distinct * FROM T_SYSTEM_MENU_PRIV; 2, ...