AngularJS $ http获取服务“ SyntaxError：意外令牌}”问题

曼尼坎丹S

我正在学习AngularJS。-所以，我就在这里经历的AngularJS教程https://docs.angularjs.org/tutorial/step_07。在第7步中，我在使用angularjs $ http服务时遇到语法错误。这是我的应用程序目录结构和文件。

app/
  phone-list/phone-list.component.js
  phone-list/phone-list.module.js
  phone-list/phone-list.template.html
  app.module.js
  phonelist.php
  phonelist.json

电话清单/phone-list.component.js

angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: function PhoneListController($http) {
      var self = this;
      self.orderProp = 'age';

      $http.get('phonelist.json').then(function(response) {
        console.log(response);
        self.phones = response.data;
      });
    }
  });

电话清单/电话清单.module.js

angular.module('phoneList', []);

phone-list / phone-list.template.html

<p>Search: <input ng-model="$ctrl.query" /></p>
<p>
    <select data-ng-model="$ctrl.orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
    </select>
</p>
<ul>
    <li data-ng-repeat="phone in $ctrl.phones | filter: $ctrl.query | orderBy: $ctrl.orderProp">
        <span>{{phone.name}}</span>
        <p>{{phone.snippet}}</p>
    </li>
</ul>

app.module.js

angular.module('phoneCatApp', ['phoneList']);

phonelist.php

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS | Phone List</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script type="text/javascript" src="phone-list/phone-list.module.js"></script>
    <script type="text/javascript" src="phone-list/phone-list.component.js"></script>
    <script type="text/javascript" src="app.module.js"></script>
</head>
<body data-ng-app="phoneCatApp">
    <phone-list></phone-list>
</body>
</html>

phonelist.json

[
  {
    "name": "Nexus S",
    "snippet": "Fast just got faster with Nexus S.",
    "age": 2,
  },
  {
    "name": "Motorola XOOM™ with Wi-Fi",
    "snippet": "The Next, Next Generation tablet.",
    "age": 1,
  },
  {
    "name": "MOTOROLA XOOM™",
    "snippet": "The Next, Next Generation tablet.",
    "age": 4
  }
]

我面临的问题在下面