Basic Angular: Uncaught SyntaxError: Unexpected token

Question

I am following a tutorial to create a hackernews/reddit clone and seem to be stuck for some reason the app is not working.

In my browser console I get the following errors:

Uncaught SyntaxError: Unexpected token .               app.js:46 
Uncaught Error: [$injector:modulerr]                   angular.js:3857 http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=flapperNews&p1=Err…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139)

What is happening here? Sorry I am not to familiar with this issue.

I have in app.js

angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: '/home.html',
      controller: 'MainCtrl'
    })
    .state('posts', {
      url: '/posts/{id}',
      templateUrl: '/posts.html',
      controller: 'PostsCtrl'
    })

  $urlRouterProvider.otherwise('home');
}])
.factory('posts', [function(){
  var o = {
    posts: []
  };
  return o;
}])
.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
  $scope.posts = posts.posts;
  $scope.incrementUpvotes = function(post){
    post.upvotes += 1;
  }
  $scope.addPost = function(){
    if(!$scope.title || $scope.title === '') { return; }
    $scope.posts.push({
      title: $scope.title, 
      link: $scope.link,
      upvotes: 0
    });
    $scope.title = '';
    $scope.link = '';
  };
}]);
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'$posts',
function($scope, $stateParams, posts) {
  $scope.posts.push({
    titile: $scope.title,
    link: $scope.link,
    upvotes: 0,
    comments: [
      {author: 'Joe', body: 'Cool post!', upvotes: 0},
      {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
    ]
  });
  $scope.post = posts.posts[$stateParams.id];
}]);

index.html looks like this:

<html>
  <head>
    <title>My Angular App!</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
    <script src="app.js"></script>
    <style> .glyphicon-thumbs-up { cursor:pointer } </style>
  </head>
  <body ng-app="flapperNews">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <ui-view></ui-view>
      </div>
    </div>

    <script type="text/ng-templates" id="/home.html">

        <div class="page-header">
          <h1>Flapper News</h1>
        </div>

        <div ng-repeat="post in posts | orderBy: '-upvotes'">
          <span class="glyphicon glyphicon-thumbs-up"
          ng-click="incrementUpvotes(post)"></span>
          {{post.upvotes}}
          <span style="font-size:20px; margin-left:10px;">
            <a ng-show="post.link" href="{{post.link}}">  
              {{post.title}}
            </a>
            <span ng-hide="post.link">
              {{post.title}}
            </span>
          </span>
        </div>

        <form ng-submit="addPost()" style="margin-top:30px;">
          <h3>Add a new post</h3>

            <div class="form-group">
              <input type="text"
                class="form-control"
                placeholder="Title"
                ng-model="title"></input>
            </div>
            <div class="form-group">
              <input type="text"
              class="form-control"
              placeholder="Link"
              ng-model="link"></input>
            </div>
            <button type="submit" class="btn btn-primary">Post</button>
        </form>
      </script>

      <script type="text/ng-templates" id="/posts.html">
        <div class="page-header">
          <h3>
            <a ng-show="post.link" href="{{post.link}}">
              {{post.title}}
            </a>
            <span ng-hide="post.link">
              {{post.title}}
            </span>
          </h3>
        </div>

        <div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
          <span class="glyphicon glyphicon-thumbs-up"
            ng-click="incrementUpvotes(comment)"></span>
          {{comment.upvotes}} - by {{comment.author}}
          <span style="font-size:20px; margin-left:10px;">
            {{comment.body}}
          </span>
        </div>
      </script>

  </body>
</html>

When I remove the ; from line 46 I get the following weird thing in my console. It's seems like its stuck in a loop with continuous error messages.

angular.js:9959 Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///Users/Javier/codez/flapper_news/index.html#/home' cannot be created in a document with origin 'null' and URL 'file:///Users/Javier/codez/flapper_news/index.html'.
    at Error (native)
    at te.k.url (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:39:227)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:91:187
    at k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:112:319)
    at k.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:109:392)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:113:100)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:18:239
    at Object.d [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:36)
    at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:18:147)
    at cc (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:18:356)(anonymous function) @ angular.js:9959(anonymous function) @ angular.js:7298k.$digest @ angular.js:12410k.$apply @ angular.js:12699(anonymous function) @ angular.js:1418d @ angular.js:3917c @ angular.js:1416cc @ angular.js:1430Xc @ angular.js:1343(anonymous function) @ angular.js:21773a @ angular.js:2549(anonymous function) @ angular.js:2822q @ angular.js:325c @ angular.js:2821
angular.js:8467 XMLHttpRequest cannot load file:///home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I treid that, update question with what happens when I remove ; on line 46 — Javier
– Javier, Commented Mar 31, 2016 at 8:55

Tarun Dugar · Accepted Answer · 2016-03-31 08:48:56Z

5

Remove the ; just above your PostsCtrl controller definition:

}]) //here
.controller('PostsCtrl'

The ; is interfering with the chaining of the controller.

answered Mar 31, 2016 at 8:48

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

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

4 Comments

Javier Over a year ago

Hey I had tried that but that gave me another error. I added description of error on the question above at the end.

Tarun Dugar Over a year ago

that should be a separate question.

Javier Over a year ago

Can you help? I edited question to make it this questions.

Tarun Dugar Over a year ago

Looks like a server issue, but I am not sure. Best bet would be to ask as a separate question along with detailing what you use in the server etc.

Nichola · Accepted Answer · 2016-03-31 18:44:41Z

1

Try to open your application under a server, IIS or Apache, don't just open the index.html in your browser

answered Mar 31, 2016 at 18:44

Nichola

5422 silver badges8 bronze badges

Collectives™ on Stack Overflow

Basic Angular: Uncaught SyntaxError: Unexpected token

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related