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 ...
随机推荐
- ACM竞赛常用头文件模板-备忘
备忘. #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...
- 前端学习blog
有一些js写的小游戏,很有趣 http://oldj.net
- luogu P1038借教室【Noip提高组2012】
这道题我读完题目的第一感觉是: 这不就是个线段树??用线段树维护区间最小值,检查是否满足订单要求即可判断. 对于修改操作直接在区间上进行. 据说会卡一卡线段树,但是貌似写一个懒标记,连zkw线段树都不 ...
- Codeforces 853C - Boredom
853C - Boredom 题意 给出一个矩阵,每行每列有且仅有一个点.每次询问一个子矩形,问这些点构成的矩形有多少个与给定的矩形相交(两个处于对角线上的点可以组成矩形). 分析 考虑矩形周围 8 ...
- 【转】vector用法
原博地址:http://www.cnblogs.com/wang7/archive/2012/04/27/2474138.html 在c++中,vector是一个十分有用的容器,下面对这个容器做一下总 ...
- POJ 3728 The merchant（并查集+DFS）
[题目链接] http://poj.org/problem?id=3728 [题目大意] 给出一棵树,每个点上都可以交易货物,现在给出某货物在不同点的价格, 问从u到v的路程中,只允许做一次买入和一次 ...
- 【贪心】Codeforces Round #401 (Div. 2) D. Cloud of Hashtags
从后向前枚举字符串,然后从左向右枚举位. 如果该串的某位比之前的串的该位小,那么将之前的那串截断. 如果该串的某位比之前的串的该位大,那么之前那串可以直接保留全长度. 具体看代码. #include& ...
- 【枚举】【二分答案】【分块答案】【BFS】【最大流】【Dinic】bzoj1189 [HNOI2007]紧急疏散evacuate
[法一]枚举Time(0~N*M): S->'.'(1); 'D'->T(Time); '.'->'D'(dis(用BFS预处理,注意一旦到达'D',BFS就不能继续扩展了,注意di ...
- Mac sublime 编译Python UnicodeEncodeError: 'ascii' codec can't encode characters in position 6-8: ordinal not in range(128)
刚学Python,想打印个“hello 张林峰”,代码如下: #!/usr/bin/env python3 # -*- coding: utf-8 -*- print('hello 张林峰') 用su ...
- KVC与KVO的不同
vc 就是一种通过字符串去间接操作对象属性的机制, 访问一个对象属性我们可以 person.age 也可以通过kvc的方式 [person valueForKey:@"age&quo ...