I'm trying to build a single page blogging site using AngularJS and I have encountered the following error message:
"Uncaught Error: [$injector:modulerr] Failed to instantiate module spBlogger due to:
Error: [$injector:modulerr] Failed to instantiate module spBlogger.posts due to:
Error: [$injector:unpr] Unknown provider: $stateProvider"
I'm not sure why this is happening although the $stateProvider service is already injected. Can you please help me identify why I'm getting this error message?
postModule.js contents:
'use strict'
angular.module('spBlogger.posts', ['spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
angular.module('spBlogger.posts')
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$stateProvider.state('allPosts', {
url: '/posts',
templateUrl: 'modules/posts/views/posts.html',
controller: 'PostController'
});
$stateProvider.state('singlePost', {
url: '/posts/:id/:permalink',
templateUrl: 'modules/posts/views/singlePost.html',
controller: 'PostDetailsController'
});
}]);
index.html contents:
<!doctype html>
<html lang="en" ng-app="spBlogger">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="modules/posts/css/posts.css">
</head>
<body>
<div class="container">
<br/>
<div class="jumbotron text-center">
<h1>The Single Page Blogger</h1>
<p>One stop blogging solution</p>
</div>
<div ui-view> The angular ui-view should be displayed here!</div>
<div class="row footer">
<div class="col-xs-12 text-center">
<p>The Single Page Blogger
<app-version/>
</p>
</div>
</div>
</div>
</body>
<!-- build:js app/built/app.min.js -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-ui-router/angular-ui-router.min.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-cookies.js"></script>
<script src="lib/angular/angular-translate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="modules/posts/postModule.js"></script>
<script src="modules/posts/js/controllers.js"></script>
<script src="modules/posts/js/filters.js"></script>
<script src="modules/posts/js/directives.js"></script>
<script src="modules/posts/js/services.js"></script>
<!-- endbuild -->
</html>
This is the app.js
'use strict'
angular.module('spBlogger', ['ui.router', 'spBlogger.posts', 'spBlogger.controllers', 'spBlogger.directives', 'spBlogger.filters', 'spBlogger.services']);
angular.module('spBlogger').value('version', 'V1.0');
angular.module('spBlogger').run(['state', function (state) {
$state.go('allPosts');
}]);
controllers.js
'use strict'
angular.module('spBlogger.posts.controllers', [])
.controller('PostController', ['$scope', 'postService', function ($scope, postService) {
$scope.getAllPosts = function () {
return postService.getAll();
};
$scope.posts = $scope.getAllPosts();
}])
.controller('PostDetailsConstroller', ['$stateParams', '$state', '$scope', 'postService', function ($stateParams, $state, $scope, postService) {
$scope.getPostById = function (id) {
return postService.getPostById(id);
};
$scope.closePost = function () {
$state.go('allPosts');
};
$scope.singlePost = $scope.getPostById($stateParams.id);
}])
;
You missed to add a dependency to ui.router in your application module:
angular.module('spBlogger.posts', ['ui.router', 'spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
Angular UI Router isn't part of official Angular's distribution but it's an optional module developed by a third-party dev team.
Related
This are my files
app.js for routing
angular
.module('ebookApp', ['ngRoute']).config(config);
function config($routeProvider, $locationProvider){
$routeProvider
.when('/',{
templateUrl: 'angular/ebook-list/ebookList.html',
controller: EbookController,
controllerAs: 'vm'
})
.when('/ebook/:id', {
templateUrl: 'angular/ebook-display/ebookDisplay.html',
controller: EbookController,
controllerAs: 'vm'
});
$locationProvider.html5Mode(true);
}
index.html
<!DOCTYPE html>
<html ng-app="ebookApp">
<head>
<title>Ebook App</title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/custom.css" rel="stylesheet"/>
<base href="/">
</head>
<body>
<div ng-view></div>
<footer class="footer">
<div class="container">
<p class="text-muted text-center">
<img src="/images/fullstacktraining_logo.png" height="26" alt="Full Stack Training"/>
</p>
<p class="text-muted text-center">
<small>© 2016 Full Stack Training Ltd</small>
</p>
</div>
</footer>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="angular/app.js"></script>
<script src="angular/ebook-data-factory/ebook-data-factory.js"></script>
<script src="angular/ebook-list/ebook.list.js"></script>
<script src="angular/ebook-display/ebook.display.js"></script>
</body>
</html>
display.js
angular
.module('ebookApp')
.controller('EbookController',EbookController);
function EbookController($http, $route, $routeParams, ebookDataFactory,) {
var vm = this;
var id = $routeParams.id;
$http.get('/api/ebooks/' + id).then(function(response) {
vm.ebook = response.data;
});
};
list.js
angular
.module('ebookApp')
.controller('EbookController', EbookController);
function EbookController($route, $routeParams, ebookDataFactory) {
var vm = this;
vm.title = 'Ebook App'
ebookDataFactory.ebookList().then(function(response){
vm.ebooks = response.data;
});
}
the code does basically two things that is to show list of ebooks which it successfully does but displaying each one of them it gives the an error like a BLANK PAGE or this GET http://localhost:7080/api/ebooks/undefined 500 (Internal Server Error) the id is in api which does exists but it still gives error. Please help.
I want to insert header and nav bar into index.html
When header and nav bar are in index.html, My app works well.
but seperate these files to html and try to load, ui-view do not load script files.
So logout function does not work when ui-view loaed header.html
On the other hand, css works well.
I tried to follow answers like
Angularjs does not load scripts within ng-view
or
html partial is not loaded into ui-view
but it did not help to fix my problem..
Why this situation occurred?
Please any handsome or pretty developer help me..
These are my code.
app.js
'use strict';
var mainApp = angular
.module('adminApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.router'
]);
mainApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/admin/login');
$stateProvider
.state('root',{
url: '',
abstract: true,
views: {
'headerContainer': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl',
controllerAs: 'header'
},
'navContainer':{
templateUrl: 'views/nav.html',
controller: 'NavCtrl',
controllerAs: 'nav'
}
}
})
.state('root.login', {
...
})
});
index.html
<!DOCTYPE html>
<html ng-app="adminApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<base href="/">
<!-- CSS-->
<link href="bower_components/bootstrap/dist/css/main.css" rel="stylesheet">
<!-- Font-icon css-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- start: Favicon -->
<link href="favicon.ico" rel="shortcut icon">
<!-- end: Favicon -->
</head>
<body class="sidebar-mini fixed" ng-controller="AppCtrl">
<div class="wrapper">
<div ui-view="headerContainer"></div>
<div ui-view="navContainer"></div>
<div ui-view="appContainer"></div>
</div>
<!-- Javascripts-->
<script src="../bower_components/bootstrap/dist/js/jquery-2.1.4.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/bootstrap/dist/js/main.js" ></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/headerCtrl.js"></script>
<script src="scripts/controllers/navCtrl.js"></script>
</body>
</html>
header.html
<header class="main-header hidden-print">
<nav class="navbar navbar-static-top">
<div class="navbar-custom-menu">
<ul class="top-nav">
<li>
<a ng-click="logout();">Logout</a>
</li>
</ul>
</div>
</nav>
</header>
headerCtrl.js
mainApp.controller('HeaderCtrl', function ($scope, $cookieStore) {
$scope.logout = function () {
angular.forEach($cookies.getAll(), function (v, k) {
$cookies.remove(k);
}); // This is for remove all cookies
};
});
main.js
$('.top-nav li a').on('click', function (e) {
console.log('Clicked header li');
});
It seems like you haven't used controller alias while calling logout method
ng-click="header.logout();"
As #pankaj said you need to declare the logout method on your controller alias
ng-click="header.logout();"
And the same applies for your js. You have to reference logout with this keyword since you are using controller as syntax
mainApp.controller('HeaderCtrl', function ($scope, $cookieStore) {
var vm =this;
vm.logout = function () {
angular.forEach($cookies.getAll(), function (v, k) {
$cookies.remove(k);
}); // This is for remove all cookies
};
});
For more Info: AngularJs "controller as" syntax - clarification?
I am currently working in setting up the structure for an angular app and can't get around this error. Below is the complete error message:
Failed to instantiate module app due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=a...)
at Error (native)
at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:6:416
at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:40:60
at q (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:7:355)
at g (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:135)
at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:304
at q (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:7:355)
at g (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:135)
at eb (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:43:164)
at c (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:20:463
My setup is as follows:
index.html
<body ng-app="app">
<header>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
</div>
<footer>
</footer>
<script type="text/javascript" src="assets/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-route/angular-route.min.js"></script>
<!-- Modules -->
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/app.core.js"></script>
<script type="text/javascript" src="app/app.module.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="app/components/homepage/homepageController.js"></script>
app.module.js
angular.module('app', [
'ngRoute',
'app.routes',
'app.core'
]);
app.routes.js
angular
.module('app.routes', ['ngRoutes'])
.config(function($routeProvider) {
$routeProvider
//root route
.when('/', {
templateUrl: 'app/components/homepage/homepageView.html',
controller: 'homepageCtrl'
});
});
app.core.js
angular
.module('app.core', []);
I'm using core for all the controllers, but the issue seems to be with what I am loading in app.module.js...
Can anyone give an idea of what's going wrong?
Here is a plunkr
https://plnkr.co/edit/Uv5fEvVZzmWguu32t4a9
The correct name for ['ngRoutes'] should be ['ngRoute'].
Updated Plunker: https://plnkr.co/edit/8W7QFndiTvtqfHCy6UWt?p=preview
So I'm trying to run an Angular app with a Rails API on Chrome.
I'm trying to render very simple views from their respective controllers.
My users.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/users', {
templateUrl: '/views/users.html',
controller: 'UsersCtrl'
});
}])
.controller('UsersCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('http://localhost:3000/api/users/').success(function(data) {
$scope.users = data.users;
});
$scope.foos = ['foo', 'bar', 'baz'];
}]);
users.html view:
<div ng-controller='UsersCtrl'>
<h1>Users</h1>
<ul ng-repeat="user in users">
<li>{{user.first_name}}</li>
</ul>
<ul ng-repeat="foo in foos">
<li>{{foo}}</li>
</ul>
</div>
The users page renders fine, and I get all the data I want. But when I try to load my main page, I get nothing. No errors, just a blank screen (though the navbar and everything else I have in my index.html loads properly).
My main.js controller:
'use strict';
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
rantlyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/views/main.html',
controller: 'MainCtrl'
});
}])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.awesomeThings = [
'foo',
'bar',
'baz'
];
$scope.addThing = function() {
$scope.awesomeThings.push($scope.newThing);
$scope.newThing = '';
};
}]);
main.html view:
<div ng-controller="MainCtrl">
<form ng-submit='addThing()'>
<div class="form-horizontal">
<input type="text" ng-model="newThing">
<input type="submit" value="Add Thing">
</div>
</form>
<li ng-repeat='thing in awesomeThings'>
{{thing}}
</li>
<h4>Awesome things: {{awesomeThings}}</h4>
<h4>Cool things: {{coolThings}}</h4>
</div>
When I look at the inspector in the Network tab for the "/users" route, it loads users.html. This doesn't happen for the "/" route. I expect it to load main.html, but I get nothing.
The strange thing is, when I copy all of my code from my main.js and just throw it into my users.js, everything works fine. This told me maybe I wasn't loading it properly into the index.html page, but it seems to me that I am.
index.html:
(scripts are at the bottom)
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="rantlyApp">
<header class='nav-header' role='navigation'>
<div class='content'>
<a class="navbar-brand" href="#/">Rantly</a>
<nav>
Rants
Users
Styleguide
Sign Up
</nav>
</div>
</header>
<div class="container">
<div ng-view=""></div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/users.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
</html>
I'm extremely new to Angular so it's quite possible I'm missing a fundamental step in setting up the controllers. Since my code works based purely off of which file I have it in, I have a feeling I'm not configuring something properly in Angular.
Any help is greatly appreciated. Thanks!
When you write
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
You are creating a new module called rantlyApp and removing any old module with the same name. So when the users.js script runs it overwrites what you defined in main.js.
Instead define your module once, and retrieve it with:
var rantlyApp = angular.module('rantlyApp');
Check the documentation.
I used older version of angularJS (1.1.4) for my test project (I want to learn angularJS). When I change angularJS script version to latest I got this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=contactsManager&p1=…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.8%2Fangular.min.js%3A38%3A435)
I don't know what is causing this error... Does someone knows where's the problem?
UPDATE:
After removing .min from angularJS.js I got cleaner error message so here is it:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=%24routeProvide
Here is code:
JS:
//application.js
var app = angular.module('contactsManager', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/contacts',
{
controller: 'ContactsController',
templateUrl: './application/templates/contacts.html'
})
.when('/add-contact',
{
controller: 'ContactAddController',
templateUrl: './application/templates/addContact.html'
})
.when('/edit-contact/:contactId',
{
controller: 'ContactEditController',
templateUrl: './application/templates/editContact.html'
})
.when('/display-contact/:contactId',
{
controller: 'ContactDetailsController',
templateUrl: './application/templates/displayContact.html'
})
.otherwise({ redirectTo: '/contacts' });
});
HTML:
<!DOCTYPE html>
<html data-ng-app="contactsManager">
<head>
<title>Contacts</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-top">
<div class="navbar-inner">
<div class="container">
<h2>Contacts</h2>
</div>
</div>
</div>
<div ng-view class="example-animate-container"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-resource.min.js"></script>
<script src="application/application.js"></script>
<script src="application/controllers/controllers.js"></script>
<script src="application/services/contactsService.js"></script>
</body>
</html>
Newer versions of Angular have ngRoute as a separate module that you have to include in your project.
<script src="//code.angularjs.org/X.Y.Z/angular-route.js"></script>
https://docs.angularjs.org/api/ngRoute
And update your app initialization with an injection of ngRoute
var app = angular.module('contactsManager', ["ngRoute"]);