Angular 缓存view后出现无法找到view(‘can not find view’)错误

环境:angularjs,grunt

问题:grunt对js/css/html进行合并,压缩,发布后,在index页面出现’can not find view’错误

分析

  1. 查看html文件确实存在
  2. 查看grunt配置,是否包含相关html文件(这里用grunt-angular-templates插件
  3. 将html文件换存到$templateCache中)
  4. 查看合并后的script.js文件是否已经cache html文件
  5. 查看压缩后的script.js文件是否包含需要的html文件
  6. 查看缓存的html文件路径和在directive中调用的文件路径是否一致

原因并解决:
在directive定义中对html的引用使用绝对路径,例如

而在缓存后的文件中,第一个’/’没有了,例如

解决办法就是在引用html文件时使用相对路径

Angular 缓存view后出现无法找到view(‘can not find view’)错误

破解同源策略,ajax请求本地文件

正如“same origin policy”所定义,处于安全考虑,两个不同域(例如kingscow.com访问goashton.com)是不能相互访问(敏感)信息的。同理,通过ajax访问本地文件(非服务器方式)也是禁止的。

我尝试在angular component中访问templateUrl指定的模版文件,然而angular机制是通过ajax读取的,也就导致出现如下图情形:
screen-shot-2016-10-26-at-10-12-01

当然,最好的方式是遵守SOP同源策略,搭建server来运行这段代码。如果非(jue)要(jiang)ajax访问本地文件,也是可以的,方法如下

FIREFOX

打开一个新tab,地址栏输入about:config,搜索security.fileuri.strict_origin_policy,点击将value改为false,如下图
screen-shot-2016-10-26-at-11-06-57输入命令打开网页 open -a firefox -g index.html

CHROME

Chrome没有提供直接的配置方式,可以在控制台下打开chrome并禁止安全策略,按如下步骤

1. 完全关闭chrome,进入控制台(以mac iIterm为例)
2. open -a Google\ Chrome -g –args –disable-web-security –user-data-dir
3. open -a Google\ Chrome -g ./index.html
步骤二打开chrome浏览器,并关闭安全模式,chrome会有安全提示,如下图。步骤三打开带有ajax请求的本地文件(替换index.html)
screen-shot-2016-10-26-at-10-50-50

最后强调一次,正确使用ajax的方式是在server下。

破解同源策略,ajax请求本地文件