javascript - Error using ui-router: "$injector:modulerr" -
i following angularjs tutorial: learn build modern web apps angular , rails thinkster , faced 1 problem.
after making inline template have blank page , error $injector:modulerr following details:
failed instantiate module flappernews due to: error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=...) @ error (native) @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:6:450 @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:34:97 @ array.foreach (native) @ q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:7:280) @ e (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:33:207) @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:33:284 @ array.foreach (native) @ q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:7:280) @ e (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:33:207 here code.
module:
# app.js var app = angular.module('flappernews', ['ui-router']); app.config(['$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) { $stateprovider.state('home', { url: '/home', templateurl: '/home.html', controller: 'mainctrl' }); $urlrouterprovider.otherwise('home'); }]); view:
# index.html <!doctype html> <html> <head> <title>thinkster's angularjs tutorial</title> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body ng-app="flappernews"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <ui-view></ui-view> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> <script src="app.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></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}} upvotes <span style="font-size: 20px; margin-left: 10px;"> <a ng-href="post.link" ng-show='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 new post</h3> <div class="form-group"> <input type="text" placeholder="title" class="form-control" ng-model="title"> </div> <div class="form-group"> <input type="text" placeholder="link" class="form-control" ng-model="link"> </div> <button type="submit" class="btn btn-primary">post</button> </form> </script> </body> </html>
module name 'ui.router' not 'ui-router'.
simply change line to:
var app = angular.module('flappernews', ['ui.router']);
Comments
Post a Comment