编写html文档的时候，为了实现代码模块化，增加复杂页面的代码可读性和可维护性，我们常常会想到将代码分散写入不同的HTML文件

angularJS里面的ng-include指令结合ng-controller能够很方便的实现这个目的

ng-include 指令用于包含外部的 HTML 文件。

ng-include可以作为一个属性，或者一个元素使用

demo示例如下：

index.html

<!doctype html>

<html ng-app="myApp">

<head>

  <meta charset="UTF-8">

  <title>demo</title>

  <!-- angularjs引用 -->

  <script type="text/javascript" src="angular/angular.min.js" charset="utf-8"></script>

  <script type="text/javascript" src="subPage.controller.js" ></script>

</head>

<body ng-controller="myCtrl">

    <div ng-include="'subPage.html'"></div>

    <!-- 路径里面必须带上单引号 -->

</body>

</html>

subPage.html

<div id="subPage">

    <label>{{title}}<label>

    <input ng-model="value">

    <img src="eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" style="width:400px;height:200px" />

</div>

subPage.controller.js

var app = angular.module('myApp',[]);

app.controller("myCtrl",function($scope){

    $scope.title="类型";

    $scope.value="图片";

});

直接在google浏览器上运行index.HTML，报错

XMLHttpRequest cannot load file:///D:/learn/include.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

提示很明显：不能跨域访问。通过上面的错误提示，可以看到:使用ng-include指令的时候，会用到AJAX请求XMLHttpRequest

像ng-include这样的指令，必须要有web容器的支持。直接用浏览器打开的index.html，并没有通过web容器访问，所以存在跨域访问问题

解决方法：

1.将代码部署到tomcat或者iis等web容器下，通过http访问即可

2.可以使用前端开发神器webstorm，该工具运行html的时候，会自动启动内置的web容器

在iis中发布出来，运行，又出现了中文乱码问题，如下：

原因应该是HTML中指定了<meta charset="utf-8">，但是我的文件全部是用editplus编辑的，默认保存的格式是UTF-8

改格式，运行，还是有部分中文乱码，百般查询，结果大概如下：

于是在webstorm中打开文件，右键菜单中重新修改编码格式，如下：

finally，over！

PS：本来是嫌webstorm太过笨重，占用内存太高炸鸡吃不消，才转而使用editplus直接编辑代码，结果还是得用到这个所谓的前端神器，玩我呢。。。

AngularJs学习笔记（2）——ng-include的更多相关文章

  1. AngularJs学习笔记--IE Compatibility 兼容老版本IE

    原版地址:http://docs.angularjs.org/guide/ie Internet Explorer Compatibility 一.总括 这文章描述Internet Explorer( ...

  2. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...

  3. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  4. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  7. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  8. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  9. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

  10. AngularJs学习笔记--Managing Service Dependencies

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...

随机推荐

  1. (2)Python 变量和运算符

    一.python变量特点 python是弱类型语言,无需声明变量可以直接使用并且变量的数据类型可以动态改变 二.变量命名规则 1.不能使用python关键字 2.不能数字开头 3.不能包含空格 4.不 ...

  2. HDU 2473 Junk-Mail Filter 【并查集删除】

    Junk-Mail Filter Time Limit: 15000/8000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  3. 51nod 1240 莫比乌斯函数【数论+莫比乌斯函数】

    1240 莫比乌斯函数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 莫比乌斯函数,由德国数学家和天文学家莫比乌斯提出.梅滕斯(Mertens)首先使用 ...

  4. POJ 2068 Nim（博弈论）

    [题目链接] http://poj.org/problem?id=2068 [题目大意] 给出两队人,交叉放置围成一圈,每个人能取的石子数有个上限,各不相同 轮流取石头,取到最后一块石头的队伍算输,问 ...

  5. 【kmp算法】poj2185 Milking Grid

    先对每行求出所有可能的循环节长度(不需要整除). 然后取在所有行中都出现了的,且最小的长度为宽. 然后将每一行看作字符,对所有行求next数组,将n-next[n](对这些行来说最小的循环节长度)作为 ...

  6. 【单调队列】bzoj2096 [Poi2010]Pilots

    用两个单调队列维护序列中的最大值和最小值即可. poi~ #include<cstdio> #include<algorithm> using namespace std; i ...

  7. 【二分】bzoj2083 [Poi2010]Intelligence test

    v[x]记录了x值的出现位置序列. 对每个b中的元素,每次在v[b[i]]中二分. 因此要记录上一次二分到了a数组的哪个位置. #include<cstdio> #include<v ...

  8. 【块状链表】AutSky_JadeK的块状链表模板+总结(STL版)

    Part 1.块状链表.   定位 插入 删除 数组 O(1) O(n) O(n) 链表 O(n) O(1) O(1) 对于线性表的以上常见操作来说,数组和链表都无法有效地解决.但是,若我们将链表的每 ...

  9. Java多线程——ReentrantReadWriteLock源码阅读

    之前讲了<AQS源码阅读>和<ReentrantLock源码阅读>,本次将延续阅读下ReentrantReadWriteLock,建议没看过之前两篇文章的,先大概了解下,有些内 ...

  10. Python的hashlib

    Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常用16进制 ...