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 ...
随机推荐
- Codeforces 731 C.Socks-并查集+STL(vector+map)
C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- 分享Kali Linux 2017年第29周镜像文件
分享Kali Linux 2017年第29周镜像文件 Kali Linux官方于7月16日发布2017年的第29周镜像.这次维持了11个镜像文件的规模.默认的Gnome桌面的4个镜像,E17.KDE ...
- jQuery的实用技巧
1.禁用页面的右键菜单 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ retu ...
- NOIP2010关押罪犯
题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示 ...
- [BZOJ5461][LOJ#2537[PKUWC2018]Minimax(概率DP+线段树合并)
还是没有弄清楚线段树合并的时间复杂度是怎么保证的,就当是$O(m\log n)$吧. 这题有一个显然的DP,dp[i][j]表示节点i的值为j的概率,转移时维护前缀后缀和,将4项加起来就好了. 这个感 ...
- 【构造】Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) D. Artsem and Saunders
根据那两个式子 g(h(x))=x h(g(x))=f(x) 可以推出来两个新的式子 g(f(x))=g(x) h(x)=f(h(x)) 于是,我们先找到f(x)的所有不动点,有几个不动点,m就是多少 ...
- cocos2dx 3.13 etc1 ClippingNode Bug 修正
void TrianglesCommand::useMaterial() const { if(_stencl){ /*******[solyess] etc1 mask的支持************ ...
- Problem G: 零起点学算法27——等级分制度
#include<stdio.h> int main() { int a,b; while(scanf("%d %d",&a,&b)!=EOF) +a* ...
- 利用位操作进行IP地址的转化
1)IPv4地址是一个32位的二进制数,通常被分割位4个“8位二进制数”,为了方便,通常使用“点分十进制”的形式表示成(a.b.c.d)的形式,其中,a,b,c,d都是0~255之间的十进制整数,另外 ...
- 数据库问题5－SYS.SYSPROCESSES使用和查找死锁
http://blog.sina.com.cn/s/blog_62c4727d0100jc5z.html (一)理論部份 sys.sysprocesses (Transact-SQL) http:// ...