Question

所以我有这个简单的Angular应用程序，我正在尝试运行，但是这个错误不断被抛出：SyntaxError：意外的令牌：D。

以下是代码：

HTML

<!DOCTYPE html>
<html lang="en" ng-app="spring-learning">
<head>
    <base href="/">
    <title>Index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>

    <script src="angular/app.js"></script>
    <script src="angular/routes.js"></script>
    <script src="angular/controllers/index.js"></script>
</head>
<body>
    <header>
        <!-- Header bar-->
    </header>

    <main>
        <div ng-controller="IndexCtrl">
            <a href="xml" >To XML</a>
            <p>Greeting: {{ greeting }}</p>
            <p>The ID is {{greeting.id}}</p>
            <p>The content is {{greeting.content}}</p>
        </div>
        <p>Index</p>
    </main>
</body>
</html>

JS

'use strict';

var app = angular.module('spring-learning', ['ngRoute', 'ngResource']);

app.config([
    '$httpProvider', function($httpProvider) {
        var authToken;
        //authToken = $("meta[name=\"csrf-token\"]").attr("content");
        $httpProvider.defaults.headers.common["X-CSRF-TOKEN"] = authToken;
        //$httpProvider.interceptors.push('InterceptorService');
    }
]);


app.controller('IndexCtrl', [
    '$scope', '$rootScope', '$location', '$http', function($scope, $rootScope, $location, $http) {

        $http.get("rest").
            success(function(data, status, headers, config) {
                console.log(JSON.parse(data));
                $scope.greeting = data;
            }).
            error(function(data, status, headers, config) {

            });
    }
]);

app.config([
    '$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider.when('xml', {
            templateUrl: 'templates/xml.html',
            controller: 'XmlCtrl'
        }).when('phones/:phoneId', {
            templateUrl: 'partials/phone-detail.html',
            controller: 'PhoneDetailCtrl'
        }).otherwise('/');

        $locationProvider.html5Mode(true);
    }
]);

在$ httpProvider配置中已经注释掉了一些行，因为它们似乎在这里不起作用，但是当我在Ruby on Rails开发中使用它们时就会这样做。

但就此而言，当我删除部分$http.get(...)时，错误将消失。我无法理解我的语法在get方法中出了什么问题。

Answer 1

您必须在get方法中返回JSON。它应该看起来像：

{ id: 1, content: 'somthing I want to say', header: 'Hello' }

此控制器的HTML代码：

 <div ng-controller="IndexCtrl">
    <a href="xml" >To XML</a>
    <p>Greeting: {{ greeting.header }}</p>
    <p>The ID is {{greeting.id}}</p>
    <p>The content is {{greeting.content}}</p>
 </div>

您的JSON存在一个问题。如果greeding（服务器响应）是一个文本，那么表达式greeting.id和greeting.content将会失败，因为它们不是JS对象或JSON的。

如果您的rsponse是JSON，则{{greeting}}会打印[对象]。

提示：如果您的服务器响应类型是Text，并且您不知道如何将其更改为JSON，则可以使用JSON.parse，如下所示：

 $scope.greeting = JSON.parse(data);
 console.log($scope.greeting);

意外的令牌：用$ http.get（）抛出的D

1 个答案: