Angular Js 意外令牌：答案

【问题标题】：Angular Js Unexpected token :Angular Js 意外令牌：
【发布时间】：2023-03-12 16:54:01
【问题描述】：

我是 Angular js 的初学者。我不确定为什么这个错误会出现在我的脚本文件中。我的代码如下所示：

angularExample.html

<!DOCTYPE html>
<html ng-app="Tutorial">
  <head>
    <link rel="stylesheet" type="text/css" href="scripts/bootstrap.min.css" />
    <script type="text/javascript" src="scripts/angular.min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
  </head>
  <body>
     <tutor-extension></tutor-extension>
  </body>
</html>

app.js

(function(){

var app=angular.module('Tutorial',[]); 

app.directive('tutorExtension',function(){
    return
    {
        restrict: 'E',
        templateUrl: 'tutor-Extension.html',
        controller: function(){
                this.reviews=courseReviews;
                },
        controllerAs: 'extended'
    };
});

var courseReviews=[
{name:'abc',email:'abc@abc.com'},
{name:'xyz',email:'xyz@abc.com'},
{name:'pqr',email:'pqr@abc.com'}
];


})();

tutor-Extension.html

<div ng-controller="extended as ext">
<ul ng-repeat='review in ext.reviews'>
     <li>{{review.name}}</li>
     <li>{{review.email}}</li>
</ul>
</div>

错误快照：

【问题讨论】：

标签： angularjs

【解决方案1】：

有两个错误：

您在 html 模板中声明了 controllerAs 并重做。

你应该有tutor-Extension.html

<div>
  <ul ng-repeat='review in ext.reviews'>
     <li>{{review.name}}</li>
     <li>{{review.email}}</li>
  </ul>
</div>

在指令中你应该写

controllerAs: 'ext'

另一个问题（语法错误）可以通过删除返回和对象声明之间的新行来解决。 JS 引擎迭代你的代码，就好像你什么都不返回，然后有一个块语句

app.directive('tutorExtension',function(){ 返回 {

请在http://plnkr.co/edit/YocWRgKtCzlV0SRRpHK9 找到工作样本

【讨论】：

它在那个链接上工作，但是当我在本地运行你的代码时，我收到这个错误，说“XMLHttpRequest 无法加载文件tutor-Extension.html。跨源请求仅支持协议方案：http、数据, chrome, chrome-extension, https, chrome-extension-resource。”
错误消息表明违反了 CORS 规则。你有没有托管在与其他代码不同的位置的tutor-Extension.html？
我检查过，如果直接打开您的 html，而不是通过网络服务器 stackoverflow.com/questions/27742070/…，这是一个标准问题
当我通过网络服务器运行此页面时它工作正常。谢谢！

【解决方案2】：

似乎只有空白问题。

您的代码如下：

(function(){

var app=angular.module('Tutorial',[]); 

app.directive('tutorExtension',function(){
    return
    {
        restrict: 'E',
        templateUrl: 'tutor-Extension.html',
        controller: function(){
                this.reviews=courseReviews;
                },
        controllerAs: 'extended'
    };
});

var courseReviews=[
{name:'abc',email:'abc@abc.com'},
{name:'xyz',email:'xyz@abc.com'},
{name:'pqr',email:'pqr@abc.com'}
];   

})();

如下更改：请参阅我仅从返回和左括号以及下一条语句中删除空格:)

(function(){

var app=angular.module('Tutorial',[]); 

app.directive('tutorExtension',function(){
    return {
        restrict: 'E',
        templateUrl: 'tutor-Extension.html',
        controller: function(){
                this.reviews=courseReviews;
                },
        controllerAs: 'extended'
    };
});

var courseReviews=[
{name:'abc',email:'abc@abc.com'},
{name:'xyz',email:'xyz@abc.com'},
{name:'pqr',email:'pqr@abc.com'}
];

})();

始终记住空格会产生问题，因此请尽量避免，您也可以深入了解here

【讨论】：

【解决方案3】：

对于路由，您应该在本地开发服务器上运行您的站点。 Read more here

【讨论】：