Angular Js Unexpected token :

Question

I am a beginner to Angular js.I am not sure as to why this error is appearing in my script file. My code looks like this:

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>

Error Snapshot:

Error

enter image description here

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

For routing, you should run your site on a local development server. Read more here

edited May 23 '17 at 12:14

Community

1
1

answered Jun 02 '15 at 10:21

adamjld

310
1
9

Igor Popov · Accepted Answer · 2015-06-02T11:44:36.470

1

There's two mistakes:

you declared controllerAs and redo the same in html template.

You should have tutor-Extension.html as

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

and in directive you should write

controllerAs: 'ext'

Another issue (syntax error) can be solved by removing new line between return and object declaration. JS engine iterprets your code as if you return nothing and then has a block statement

app.directive('tutorExtension',function(){ return {

Please find a working sample here http://plnkr.co/edit/YocWRgKtCzlV0SRRpHK9

edited Jun 02 '15 at 11:44

answered Jun 02 '15 at 10:45

Igor Popov

2,084
16
18

It worked on that link but when I ran your code locally, I got this error saying "XMLHttpRequest cannot load file tutor-Extension.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." – Ajay Jun 02 '15 at 11:34
Error message suggests CORS rule violation. Do you have tutor-Extension.html hosted not at the same location as the rest of your code? – Igor Popov Jun 02 '15 at 11:37
I checked and it's a standard problem if opening your html directly, not via web server http://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes – Igor Popov Jun 02 '15 at 11:38
It worked when I ran this page via web server.Thanks! – Ajay Jun 02 '15 at 11:43

score 1 · Answer 3 · answered Jun 02 '15 at 10:51

There seems only white space problem.

Your code as below:

(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'}
];   

})();

Change it as below: See I remove only the white space from return and opening bracket and next statement :)

(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'}
];

})();

Always remember to blank spaces creates issue so try to avoid it , you can also look into deep here

Angular Js Unexpected token :

3 Answers3