angularjs - Getting error while include multiple controller in Angular js -
i new angular js. trying build web apps angular , rails thinkster. have made index page on had load home template, home template carries 2 field i.e title , link of post , submit button. on submitting title , link added array , displays on home page. have added another template post, in facility comment on particular post after including post template , controller app not running. me in solving problem.
index.html file contain :
<html> <head> <title>flapper news</title> <link href="bootstrap.min.css" rel="stylesheet"> <script src="angular.min.js"></script> <script src="app.js"></script> <script src="angular-ui-router.js"></script> <style> .glyphicon-thumbs-up { cursor:pointer } </style> </head> <body ng-app="flappernews" ng-controller="mainctrl"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <ui-view> </ui-view> </div> </div> <script type="text/ng-template" 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}} - {{comment.author}} <span style="font-size:20px; margin-left:10px;"> {{comment.body}} </span> </div> <form ng-submit="addcomment()" style="margin-top:30px;"> <h3>add new comment</h3> <div class="form-group"> <input type="text" class="form-control" placeholder="comment" ng-model="body"></input> </div> <button type="submit" class="btn btn-primary">post</button> </form> </script> <script type="text/ng-template" 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> <span> <a href="#/posts/{{$index}}">comments</a> </span> </div> <form ng-submit="addpost()" style="margin-top:30px;"> <h3>add 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> </body app.js contain :
angular.module('flappernews', ['ui.router']) .config([ '$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) { $stateprovider .state('home', { url: '/home', templateurl: '/home.html', controller: 'mainctrl' }); $stateprovider .state('posts', { url: '/posts/{id}', templateurl: '/posts.html', controller: 'postsctrl' }); $urlrouterprovider.otherwise('home'); }]) .factory('posts', [function(){ var o = { posts: [ {title: 'post 1', link: 'link1',upvotes: 5}, {title: 'post 2', link: 'link2',upvotes: 2}, {title: 'post 3', link: 'link3',upvotes: 15}, {title: 'post 4', link: 'link4',upvotes: 9}, {title: 'post 5', link: 'link5',upvotes: 4} ] }; return o; }]) .controller('postsctrl', [ '$scope', '$stateparams', 'posts', function($scope, $stateparams, posts){ $scope.post = posts.posts[$stateparams.id]; $scope.addcomment = function(){ if($scope.body === '') { return; } $scope.post.comments.push({ body: $scope.body, author: 'user', upvotes: 0 }); $scope.body = ''; }; }]); .controller('mainctrl', [ '$scope', 'posts', function($scope, posts){ $scope.posts = posts.posts; $scope.addpost= function(){ if(!$scope.title || $scope.title === '') { alert("field can't left blank"); return; } $scope.posts.push({ title: $scope.title , link: $scope.link, upvotes: 0, comments: [ { author: 'joe', body: 'cool post!', upvotes: 0 }, { author: 'bob', body: 'great idea wrong!', upvotes: 0 } ] }); $scope.title=''; $scope.link=''; }; $scope.incrementupvotes= function(post){ post.upvotes += 1; }; }]); any idea doing wrong?
`
try below app.js. have removed semicolon.
angular.module('flappernews', ['ui.router']) .config([ '$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) { $stateprovider .state('home', { url: '/home', templateurl: '/home.html', controller: 'mainctrl' }); $stateprovider .state('posts', { url: '/posts/{id}', templateurl: '/posts.html', controller: 'postsctrl' }); $urlrouterprovider.otherwise('home'); }]) .factory('posts', [function(){ var o = { posts: [ {title: 'post 1', link: 'link1',upvotes: 5}, {title: 'post 2', link: 'link2',upvotes: 2}, {title: 'post 3', link: 'link3',upvotes: 15}, {title: 'post 4', link: 'link4',upvotes: 9}, {title: 'post 5', link: 'link5',upvotes: 4} ] }; return o; }]) .controller('postsctrl', [ '$scope', '$stateparams', 'posts', function($scope, $stateparams, posts){ $scope.post = posts.posts[$stateparams.id]; $scope.addcomment = function(){ if($scope.body === '') { return; } $scope.post.comments.push({ body: $scope.body, author: 'user', upvotes: 0 }); $scope.body = ''; }; }]) .controller('mainctrl', [ '$scope', 'posts', function($scope, posts){ $scope.posts = posts.posts; $scope.addpost= function(){ if(!$scope.title || $scope.title === '') { alert("field can't left blank"); return; } $scope.posts.push({ title: $scope.title , link: $scope.link, upvotes: 0, comments: [ { author: 'joe', body: 'cool post!', upvotes: 0 }, { author: 'bob', body: 'great idea wrong!', upvotes: 0 } ] }); $scope.title=''; $scope.link=''; }; $scope.incrementupvotes= function(post){ post.upvotes += 1; }; }]);
Comments
Post a Comment