rails/angular ui router issue

Question

I've been doing a thinkster tutorial on combining rails and angular. I've been doing it steadily, but have been halted by an issue with the ui.router. The moment I place ['ui.router'] into my angular module it messes up my page. Any help would be greatly appreciated.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>My Angular App!</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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.10/angular-ui-router.js"></script>
    <script src="js/vendor/angular.min.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="flapperNews" ng-controller="MainCtrl">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">

        <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>
          </div>

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

            <div class="form-group">
              <input type="text" placeholder="Title" ng-model="title"></input>
              <input type="text" placeholder="Link" ng-model="link"></input>
            </div>
            <button type="submit">Post</button>
          </form>
        </div>
      </div>
  </body>
</html>

angular.module('flapperNews', ['ui.router'])
.factory("posts", [function(){
var o = {
posts: []
};
  return o;
}])
.controller('MainCtrl', [
'$scope',
 "posts",
function($scope, posts){
  $scope.test = 'Hello world!';
  $scope.posts = posts.posts;
  $scope.posts = [
    {title: "post 1", upvotes: 5},
    {title: "post 2", upvotes: 2},
    {title: "post 3", upvotes: 15},
    {title: "post 4", upvotes: 9},
    {title: "post 5", upvotes: 4}
  ];
  $scope.addPost = function(){
    if(!$scope.title || $scope.title === "") {return; }
    $scope.posts.push({
      title: $scope.title,
      link: $scope.link,
      upvotes: 0
    });
    $scope.title = "";
    $scope.link = "";
  };
   $scope.incrementUpvotes = function(post) {
    post.upvotes += 1;
  };
}]);

taxicala · Accepted Answer · 2015-10-22 21:14:46Z

1

My guess is, that you already have the module flapperNews declared, and you are loosing the dependencies that where previously added. Check if elswehere (maybe in app.js) you have another code like this:

angular.module('flapperNews', [/** other deps**/]);

If you have it, just add ui.router to that module declaration.

Remember that if you pass a second parameter to angular.module, you will declare/redeclare that module. If you only pass the first parameter, the method will act as a getter and retreive the module.

answered Oct 22, 2015 at 21:14

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

rails/angular ui router issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related