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">
<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的更多相关文章
- AngularJs学习笔记--IE Compatibility 兼容老版本IE
原版地址:http://docs.angularjs.org/guide/ie Internet Explorer Compatibility 一.总括 这文章描述Internet Explorer( ...
- AngularJs学习笔记--Understanding Angular Templates
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
- AngularJs学习笔记--Managing Service Dependencies
原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...
随机推荐
- 创建展开行明细编辑表单的 CRUD 应用
http://www.runoob.com/jeasyui/jeasyui-app-crud3.html jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用 当切换数据网格 ...
- CSS 从入门到放弃系列：CSS的选择器和优先级
CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...
- 卡特兰数 3134 Circle
3134 Circle 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 在一个圆上,有2*K个不同的结点,我们 ...
- small test on 5.30 morning T3
经典的等价类计数问题,我们设 f(x) 为环长为 x 的时候的花环种类,那么答案显然等于 1/n * Σf( gcd (i,n) * [gcd(i,n)!=1] * [i>=0&&a ...
- 【kd-tree】bzoj1176 [Balkan2007]Mokia
裸题不多说,注意在sqrt(n*log(n))次插入后重构树以保持深度. #include<cstdio> #include<cmath> #include<algori ...
- 【神奇の做法】bzoj2456 mode
题解:http://www.tuicool.com/articles/BfQBzif #include<cstdio> using namespace std; int n,x,ans,t ...
- 找出分数最高的前两个学生 Exercise05_09
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:找出分数最高的前两个学生 * */ public class Exerci ...
- matlab和c混合编程
参考: http://blog.sciencenet.cn/blog-620659-579885.html http://baike.baidu.com/link?url=HnHd3lU9mcVXwh ...
- winform treeView 数据绑定
转载:http://www.jetwu.cn/archives/737 winform treeView 数据绑定 private void Form1_Load(object sender, Eve ...
- [HTML/CSS]uploadify自定义按钮样式
概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你 ...