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:'[email protected]'},
{name:'xyz',email:'[email protected]'},
{name:'pqr',email:'[email protected]'}
];


})();

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

Igor Popov · Accepted Answer · 2015-06-02 11:44:36Z

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 2, 2015 at 11:44

answered Jun 2, 2015 at 10:45

Igor Popov

2,16417 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ajay Over a year ago

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."

Igor Popov Over a year ago

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 Over a year ago

I checked and it's a standard problem if opening your html directly, not via web server stackoverflow.com/questions/27742070/…

Ajay Over a year ago

It worked when I ran this page via web server.Thanks!

Community · Accepted Answer · 2017-05-23 12:14:27Z

1

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

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jun 2, 2015 at 10:21

adamjld

3101 silver badge9 bronze badges

Comments

developer · Accepted Answer · 2015-06-02 10:51:51Z

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:'[email protected]'},
{name:'xyz',email:'[email protected]'},
{name:'pqr',email:'[email protected]'}
];   

})();

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:'[email protected]'},
{name:'xyz',email:'[email protected]'},
{name:'pqr',email:'[email protected]'}
];

})();

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

Collectives™ on Stack Overflow

Angular Js Unexpected token :

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related