AngularJs练习Demo10 ngInclude

 1 @{
 2     Layout = null;
 3 }
 4
 5 <!DOCTYPE html>
 6
 7 <html>
 8 <head>
 9     <meta name="viewport" content="width=device-width" />
10     <title>ngInclude</title>
11     <script src="~/Scripts/angular.js"></script>
12
13 </head>
14 <body>
15     <div ng-app="myApp">
16         <script type="text/ng-template" id="tpl.html">
17             @*AngularJS定义模板必须放在ng-app内*@
18             Content of the template
19         </script>
20         <script type="text/ng-template" id="tpl2.html">
21             @*AngularJS定义模板必须放在ng-app内*@
22             Content of the template2
23
24         </script>
25         <div ng-controller="firstController">
26             <div ng-include="url"></div>
27             <div ng-include="tpl"></div>
28             <div ng-include src="tpl2"></div>
29         </div>
30
31     </div>
32
33     <script type="text/javascript">
34         var app = angular.module("myApp", []);
35         app.controller("firstController", function ($scope) {
36             $scope.url = "/Angular/ngInclude1";
37             $scope.tpl = "tpl.html";
38             $scope.tpl2 = "tpl2.html";
39         });
40     </script>
41 </body>
42 </html>
时间: 2024-08-26 11:24:23

AngularJs练习Demo10 ngInclude的相关文章

AngularJS Best Practices: ng-include vs directive

For building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the main content is the central DIV which will have its content varying between routes, header and footer will be almost always the same, sidebar can var

前端菜鸟笔记angularjs的nginclude指令

前言 当我们在写一个web应用的时候,很常见的情况就是一个页面的部分内容会在另一个页面用到,如果我们为这里相同的两个页面分别写模板,虽然不是很麻烦,但是这样重复造轮子的行为实在是不可取的,特殊场景除外.这个时候我们容易想到将之前的页面复用,angularjs提供了ng-include指令来满足这样的场景. 原理 ng-include实际是通过一个新生成的子scope来继承父controller中的scope,从而调用父controller中的元素. 在网上看了一个简单的demo如下: <div

AngularJs学习笔记(2)——ng-include

编写html文档的时候,为了实现代码模块化,增加复杂页面的代码可读性和可维护性,我们常常会想到将代码分散写入不同的HTML文件 angularJS里面的ng-include指令结合ng-controller能够很方便的实现这个目的 ng-include 指令用于包含外部的 HTML 文件. ng-include可以作为一个属性,或者一个元素使用 demo示例如下: index.html <!doctype html> <html ng-app="myApp">

AngularJs之九(ending......)

今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. 1 <div ng-app="uapp" ng-controller="uctrl"> 2 <select ng-model="selectcitys" ng-options="x for x in citys">&

AngularJS 简易入门

AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中 注意:建议把脚本放在 <body> 元素的底部.这会提高网页加载速度,因为 HTML 加载不受制于脚本加载. AngularJS 扩展了 HTML

原 ng-include用法分析以及多标签页面的简单实现方式

在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容.如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好把页面代码分开单独管理,controller也可以分开来管理,这样就会显得清楚的多.这里就要使用到Angularjs中个ng-include指令. 一.多标签的编写 首先需要了解需求: 1.同时只能选中一个标签 2.被选中的标签背景色以及自体颜色都将改变. 第一个需求我们可以使用一个fla

【18】AngularJS&#160;包含

AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中包含 HTML 文件 在 HTML 中,目前还不支持包含 HTML 文件的功能. 服务端包含 大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes). 使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器. <?php require("navigation.php");?> 客户端包含 通过 Jav

AngularJS学习篇(二十)

AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: <body ng-app=""> <div ng-include="'test.htm'"></div> </body> test.htm 文件代码: <h1>菜鸟教程</h1> <p>这是一个

初次学习AngularJS

一.指令1.AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序. 稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块. 2.ng-init 指令初始化应用程序数据. ng-init 指令为 AngularJS 应用程序定义