Question

我正在尝试以角度加载模板，但收到错误：

无法加载资源：net :: ERR_FILE_NOT_FOUND angular.js：102错误： [$编译：tpload] http://errors.angularjs.org/1.3.15/ $编译/ tpload？P0 =页％2Fhome.html 在错误（本机）在file：/// C：/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js：6：417 at file：/// C：/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:137:25 at file：/// C：/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:112:113 at n。$ eval（file：/// C：/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:126:15） at n。$ digest（file：/// C：/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:123:106） at n。$ apply（file：/// C：/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:126:293） at l（file：/// C：/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:81:240）在M（file：/// C：/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:85:342）在XMLHttpRequest.e（file：/// C：/Users/Abu-Mustaqiima/Documents/AngularJS/WeatherApp/Video1/Starter/angular.js:86:418）

这是我的index.html

<!DOCTYPE html>
<html lang="en-us" ng-app="weatherApp">
    <head>
        <title>AngularJS Weather Forecast SPA</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">

        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em !important;
            }
        </style>

        <!-- load angular via CDN -->
        <script src="http://code.angularjs.org/1.3.0-rc.2/angular.min.js"></script>
        <script src="http://code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
        <script src="http://code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS Weather</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <div ng-view></div>

        </div>

    </body>
</html>

// MODULE
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource']);

// ROUTES
weatherApp.config(function ($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'pages/home.htm',
        controller: 'homeController'
    })

    .when('/forecast', {
        templateUrl: 'pages/forecast.htm',
        controller: 'forecastController'
    })

});

// CONTROLLERS
weatherApp.controller('homeController', ['$scope', function($scope) {

}]);

weatherApp.controller('forecastController', ['$scope', function($scope) {

}]);

我尝试使用WAMP服务器加载页面，但仍然得到相同的错误。

Answer 1

目前，您的模板协议包含file://，无法通过您的浏览器访问。

您需要在某些服务器（如IIS，WAMP等）上托管您的代码。将整个代码目录粘贴到服务器上，以便处理代码。其他明智的代码看起来很好。

因此，网址应为http://或https://，然后您的模板将直接从服务器获取。

Answer 2

在URL中使用https或http。例如：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

无法加载模板AngularJS

2 个答案: