编写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. Python3 list与循环练习（购物车）

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- # Author;Tsukasa product_list = [ ('Iphone',5800), (' ...

  2. boost::operators

    boost 的 operators 提供了comparison operators.arithmetic operators.operators for iterators 操作.虽然使用 C++ 的 ...

  3. RabbitMQ (二) 简单队列

    参考:https://blog.csdn.net/vbirdbest/article/details/78583480 简单队列的模型: P : 生产者,即 Producer C : 消费者,即 Co ...

  4. [BZOJ4772]显而易见的数论(数论)

    4772: 显而易见的数论 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 76  Solved: 32[Submit][Status][Discuss ...

  5. 【动态规划】【记忆化搜索】CODEVS 1011 数的计算 2001年NOIP全国联赛普及组

    设答案为f(n),我们显然可以暴力地递归求解: f(n)=f(1)+f(2)+……+f(n/2). 但是n=1000,显然会超时. 考虑状态最多可能会有n种,经过大量的重复计算,所以可以记忆下来,减少 ...

  6. 【贪心】【二维偏序】【权值分块】bzoj1691 [Usaco2007 Dec]挑剔的美食家

    既然题目中的要求满足二维偏序,那么我们很自然地想到将所有东西(草和牛)都读进来之后,对一维(美味度)排序,然后在另一维(价值)中取当前最小的. 于是,Splay.mutiset.权值分块什么的都支持查 ...

  7. 前端基础-JavaScript的基本概述和语法

    1.JavaScript概述 2.JavaScript引入方式 3.JavaScript语言规范 4.JavaScript语言基础 5.JavaScript数据类型 6.JavaScript运算符 7 ...

  8. 将Java程序打jar包并运行

    1)接着上篇博客继续说手动编译之后,将代码打成jar包,然后直接“java -jar lz.jar"运行不成功的问题.还是先上代码: 这个是Demo类: package org.lz.dem ...

  9. SpringBoot下文件上传与下载的实现

    原文:http://blog.csdn.net/colton_null/article/details/76696674 SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传 ...

  10. ztree jquery 树 控件

    插件地址:http://www.ztree.me 数据:[{"id":1,"pId":-1,"name":"根目录"}, ...