<!DOCTYPE html>
<html ng-app="myApp">
<head></head>
<head>
</head>
<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used on diferent view -->
<body ng-controller="MainCtrl as main" class="{{$state.current.data.specialClass}}" landing-scrollspy id="page-top">
<!-- Main view -->
<div ui-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-3.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- Anglar App Script -->
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services/myService.js"></script>
</body>
</html>
I have an angularJS app which was working fine before adding a service.
I am getting the following error.
myService.js:3 Uncaught Reference Error: myApp is not defined
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?
I am tying all the controllers to the module. I have also added the myService file to the index.html
Below is the code that I have in controller:
function MainCtrl($scope, $rootScope, $http, $state, myService){
};
angular
.module('myApp')
.controller('MainCtrl', MainCtrl)
.controller('FinalViewCtrl', FinalViewCtrl);
This is what I have in myService.js
'use strict';
myApp.factory('myService', ['$http', function($http) {
}]);
Let me know if I am missing anything?
Add the myapp variable initiation just above the service code.
var myapp = angular.module('myApp');
myApp.factory('myService', ['$http', function($http) {
}]);
Without the html, it will be hard to tell, but are you adding your JavaScript files in the correct order? You have to make sure that your file with angular.module('myApp') is loaded before any controllers or services. I've had the same error you have when adding my service before my app.
Related
I'm refactoring an old AngularJS project so it's less dumb and bad, separating controllers and exporting data with a factory rather than having all the data inside of one giant controller. I can't get very far, unfortunately, because my main controller isn't working. I've searched SO extensively and none of the issues I've seen matched mine. I also ran it by a senior dev and he couldn't find the issue. Any help is much appreciated. The app did work before my refactoring efforts.
My index.html:
<!DOCTYPE html>
<html ng-app="campSpots">
<head>
<meta charset="utf-8">
<title>Camp Spots</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="mainCtrl">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="components/main.ctrl.js"></script>
</body>
</html>
My factory:
(function(){
"use strict";
angular
.module("campSpots")
.factory("postFactory", function($http){
function getPosts(){
return $http.get('data/posts.json');
};
return {
getPosts: getPosts
};
})
})
And my controller, main.ctrl.js:
(function(){
"use strict";
angular
.module("campSpots")
.controller("mainCtrl", mainCtrl);
mainCtrl.$inject = ['$scope', '$http', 'postFactory'];
function mainCtrl($scope, $http, postFactory){
postFactory.getPosts().then(function(posts){
$scope.posts = posts.data;
})
}
})
You neglected to invoke the function in your IIFE for both the controller and factory.
They should go like this:
(function(){
///code
}());
That last () is missing in your code, so it's not actually running the code blocks.
I'm keep getting this exception in my console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=mainApp&p1=Error%3A…at%20g%20(http%3A%2F%2Flocalhost%2Fcinema%2Fjs%2Fangular.min.js%3A39%3A222)
........ angular.min.js:6
And the html file:
<!DOCTYPE HTML>
<html ng-app="mainApp">
<head>
<title>This cinema...</title>
<!-- ... other tags -->
<script src="js/angular.min.js"></script>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.config(function ($routeProvider) {
});
</script>
<!-- REST of the HTML body, but no angular used below -->
If I remove the mainApp.config(func.... then it's working. I don't know how to set up routes. An empty function with a route provider generates the exception?
According to the documentation:
$routeProvider requires the ngRoute module to be installed.
So, you have to include the following script to your html:
<script src="js/angular-route.min.js"></script>
and add the dependency to your module definition:
var mainApp = angular.module('mainApp', ['ngRoute']);
$routeProvider requires a separate angular module ngRoute. Download angular-route.js, add it to the page, and inject it into the angular.module method
<!DOCTYPE HTML>
<html ng-app="mainApp">
<head>
<title>This cinema...</title>
<!-- ... other tags -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(function ($routeProvider) {
});
</script>
<!-- REST of the HTML body, but no angular used below -->
You can try to using the $routeProvider without a ngRoute module.
See the documentation: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
Try this:
<!DOCTYPE HTML>
<html ng-app="mainApp">
<head>
<title>This cinema...</title>
<!-- ... other tags -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(function ($routeProvider) {
});
</script>
<!-- REST of the HTML body, but no angular used below -->
I have tried to debug my ionic app with no success. I keep getting the error
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.signin due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.3.13/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
I have ensured that the order of my refering of js files is okay. I have also ensured that my angular version is consistent across the libraries.
Below is a snippet of my index.html file
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/restangular/dist/restangular.js"></script>
<script src="lib/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="lib/angular-messages/angular-messages.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- my app's js -->
<script src="js/app.js"></script>
<script src="js/core/core.js"></script>
<script src="js/core/config/config.js"></script>
<script src="js/core/services/authentication/authentication.service.js"></script>
<script src="js/core/services/authentication/base64.service.js"></script>
<script src="js/core/services/authentication/interceptor.service.js"></script>
<script src="js/core/services/authentication/token.service.js"></script>
<script src="js/core/services/error/error.service.js"></script>
<script src="js/routes/layout/layout.js"></script>
<script src="js/routes/layout/layout.route.js"></script>
<script src="js/routes/layout/layout.controller.js"></script>
<script src="js/routes/signin/signin.js"></script>
<script src="js/routes/signin/signin.route.js"></script>
<script src="js/routes/signin/signin.controller.js"></script>
<script src="js/routes/signup/signup.js"></script>
<script src="js/routes/signup/signup.route.js"></script>
<script src="js/routes/signup/signup.controller.js"></script>
</body>
app.js snippet
(function () {
'use strict';
angular.module('app', [
// angular modules
'ngAnimate',
'ngSanitize',
'ngMessages',
// 3rd party modules
'ui.router',
'ionic',
'restangular',
'LocalStorageModule',
'ngCordova',
// app modules
'app.core',
'app.layout',
'app.signup',
'app.signin'
]);
})();
I have read every resource I can find on the ngCookies api. I have also read every resource I could find regarding this injector error.
This is my import stack
<!-- Latest compiled and minified jquery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular.min.js"></script>
<!-- get cookie api support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-cookies.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/angularApp.js"></script>
This is the code for my angularApp
angular.module('flapperNews', ['ui.router','ngCookies'])
.config([
'$stateProvider',
'$urlRouterProvider',
'$cookies',
function($stateProvider, $urlRouterProvider, $cookies) {
I am getting this error:
Uncaught Error: [$injector:modulerr]
I have checked every explanation of this error and still cannot figure out what is going wrong. Any ideas would be appreciated.
"$cookies" is not available during the configuration phase in AngularJS.
Use it in your controllers, services, factories etc.
Like in example or e.g.:
.service('cookiesService', ['$cookies', function($cookies){
console.log($cookies);
}]);
I'm trying to display the configured values author and version in angular value service in html page.Version code is displayed fine but not the author name
Here is the html code
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<div>Author is : <span app-author></span></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
Here is the directive...
angular.module('myApp.directives', []).
directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}])
.directive('appAuthor', ['author', function(author) {
return function(scope, elm, attrs){
elm.text(author);
};
}]);
And here is the service portion where author and version values are configured
angular.module('myApp.services', []).
value('version', '0.1')
.value('author','JIM');
The error i'm getting in developer console is
Error: Unknown provider: authorProvider <- author <- appAuthorDirective
Make sure you are loading those modules (myApp.services and myApp.directives) as dependencies of your main app module, like this:
angular.module('myApp', ['myApp.directives', 'myApp.services']);
plunker: http://plnkr.co/edit/wxuFx6qOMfbuwPq1HqeM?p=preview
bmleite has the correct answer about including the module.
If that is correct in your situation, you should also ensure that you are not redefining the modules in multiple files.
Remember:
angular.module('ModuleName', []) // creates a module.
angular.module('ModuleName') // gets you a pre-existing module.
So if you are extending a existing module, remember not to overwrite when trying to fetch it.