美文网首页我爱编程
Angular.js使用templateUrl不能访问的本地的解

Angular.js使用templateUrl不能访问的本地的解

作者: JellyCai | 来源:发表于2017-09-22 10:49 被阅读1087次

    在使用Angular.js的时候(这里使用的Chrome浏览器),配置路由时templateUrl无法访问本地文件,报错:

    angular.js:10695 XMLHttpRequest cannot load file:///D:/Angular/demo/Angular16-1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
    

    看下错误代码,大概意思协议方式只支持http, data, chrome, chrome-extension, https这些方式.不支持file也就是文件的方式.
    看下代码:

    a5_7.config(["$routeProvider",function($routeProvider){
        $routeProvider
                .when("/",{
                    controller:"c5_7_1",
                    templateUrl:"Angular16-1.html"
                })
                .when("/view/:id",{
                    controller:"c5_7_2",
                    templateUrl:"Angular16-2.html",
                    publicAccess:true
                })
                .otherwise({
                    redirectTo:"/"
                });
    }]);
    

    解决办法

    1.修改Chrome快捷方式的启动配置

    (1)在开始菜单输入Chrome,可以看到Chrome的快捷方式图标,右键属性打开快捷方式的属性界面.


    Chrome属性

    (2)在快捷方式-目标输入框后加上--allow-file-access-from-files,注意--前面要加空格.


    修改后
    (3)然后重新在开始菜单搜索Chrome,可以看到多出了一个Chrome图标,把修改过的快捷方式发送到桌面,使用修改过的Chrome图标启动Chrome,重新打开页面,然后就可以访问本地file了.
    然后有同学就说了,我不想每次都使用哪个修改过的快捷方式打开Chrome,这样好麻烦啊,我就想右键文件直接打开的时候就ok.既然这样的话,继续往下看.
    2.修改系统默认的Chrome启动方式

    (1)按下Win+R,输入regedit,进入注册表.


    进入注册表

    (2)分别找到[HKEY_CLASSES_ROOT下的ChromeHTML,http,https,在 -- "%1"的前面chrome.exe"的后面添加--allow-file-access-from-files,注意空格.


    修改后
    (3)然后就算你右键直接打开,Angular.js的templateUrl也可以访问本地文件了
    3.直接放在使用http的服务打开

    可以使用tomcat或者http-server等,这里就不解释了.

    相关文章

      网友评论

        本文标题:Angular.js使用templateUrl不能访问的本地的解

        本文链接:https://www.haomeiwen.com/subject/twnxextx.html