Question

我是AngularJS的新手（下面是我第一个应用的开头），所以请耐心等待。

随着选择控件的显示，该应用程序似乎正常工作。

但是当我在浏览器中运行应用程序时，我在控制台中收到此错误： SyntaxError：语法错误

如果我用这个替换programList.html HTML，则不会发生错误并且代码本身会显示：

var test = 'OK';

我确定我犯了一个基本错误，但请帮帮我。

--------------------- index.html ---------------------
<!DOCTYPE html>
<html lang="en" data-ng-app="myPublicRadioApp">
<body data-ng-cloak data-ng-controller="appController">
    <section class="content" data-ng-view></section>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
    <script src="app/myPublicRadioApp/app.js"></script>
    <script src="app/myPublicRadioApp/views/programList.html"></script>
    <script src="app/myPublicRadioApp/controllers/programListController.js"></script>
</body>
</html>

--------------------- app.js ---------------------
(function () {
    var app = angular.module('myPublicRadioApp', ['ngRoute']);

    app.config(['$routeProvider', function ($routeProvider) {
        var viewBase = 'app/myPublicRadioApp/views/';

        $routeProvider
            .when('/programList', {
                controller: 'ProgramListController',
                templateUrl: viewBase + 'programList.html',
                controllerAs: 'plc'
            })
            .otherwise({ redirectTo: '/programList' });
    }]);

    app.controller('appController', function ($scope, $document) {
        $scope.appTitle = 'My Public Radio';
        $scope.appSubTitle = 'Making it easier to enjoy public radio online.';
        $document[ 0 ].title = $scope.appTitle;
    });
}());

--------------- programListController.js -----------------
(function() {
    var injectParams = ['$http'];

    var ProgramListController = function ($http) {
        var plc = this;
    };

    ProgramListController.$inject = injectParams;

    angular.module('myPublicRadioApp').controller('ProgramListController', ProgramListController);
}());

---------------- programList.html ---------------
<div>
    <header>
        <label>
            Choose program:
            <select>
                <option>one</option>
                <option>two</option>
                <option>three</option>
            </select>
        </label>
    </header>
</div>

Answer 1

您不需要这一行：

<script src="app/myPublicRadioApp/views/programList.html"></script>

Angular将处理加载此HTML部分，因为您在此处指定了它：templateUrl: viewBase + 'programList.html',。

引发错误是因为浏览器正在将HTML文件作为脚本加载并将其解释为JavaScript，这显然不是。

为什么我的简单AngularJS视图模板出现但浏览器有语法错误？

1 个答案: