I have off the shelf app framework. Index.html contains this
<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- MetsiMenu -->
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<!-- SlimScroll -->
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Peace JS -->
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<!-- Main Angular scripts-->
<script src="js/angular/angular.min.js"></script>
<script src="js/plugins/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
<script src="js/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<!-- Our application's scripts -->
<script src="js/controllers.js"></script>
and in js/controllers.js, I have
angular
.module('inspinia')
.controller('MainCtrl', MainCtrl)
and my controller is
function MainCtrl($scope, $http, $interval, $state, $location)
when I try to inject UI bootstrap by chaning it to
.module('inspinia', ['ui.bootstrap'])
I get
"Error: [$injector:unpr]
http://errors.angularjs.org/1.3.7/$injector/unpr?p0=%24stateProvider%20%3C-%20%24state%20%3C-%20MainCtrl
I am sure that it is something very simple, but I can't see what.
Seems like you are using $state API service inside your controller so you also need to also include ui.router with it.
So while asking for $state dependency, injector doesn't able to find asked dependency inside angular DI container $injector/unpr?p0=%24stateProvider in MainCtrl
angular
.module('inspinia', ['ui.bootstrap', 'ui.router'])
Related
Controller is not recognizing - AngularJS error
I've a controller defined in controllerPloyee.js called controllerPloyee which was working before i added the ngRoute and made to route. The error that shows is
angular.min.js:127 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.7.8/$controller/ctrlreg?p0=controllerPloyee
I've checked the documentation and another questions with the same error, but doesn't help.
Index.html
<html ng-app="ployee">
<head>
<!--Angular-->
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<!--JS-->
<script src="assets/js/moduloPloyee.js"></script>
<!--Controllers-->
<script src="assets/js/controllers/controllerPloyee.js"></script>
<!--Services-->
<script src="services/routeConfig.js"></script>
</head>
<body>
<div ng-view></div>
<div ng-include="'view/footer.html'"></div>
</body>
</html>
routeConfig.js
angular.module('ployee', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/login', {
templateUrl: "view/login.html",
controller: "controllerPloyee"
}).when('/',{
templateUrl: "view/login.html",
controller: "controllerPloyee"
}).otherwise({redirectTo: "/login"})
})
controllerPloyee.js
angular.module('ployee').controller('controllerPloyee', function($scope){
});
The script that creates the module needs to be placed before the others:
<!--Angular-->
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<!-- IMPORTANT needs to be place here -->
<script src="services/routeConfig.js"></script>
<!--JS-->
<script src="assets/js/moduloPloyee.js"></script>
<!--Controllers-->
<script src="assets/js/controllers/controllerPloyee.js"></script>
<!--Services-->
̶<̶s̶c̶r̶i̶p̶t̶ ̶s̶r̶c̶=̶"̶s̶e̶r̶v̶i̶c̶e̶s̶/̶r̶o̶u̶t̶e̶C̶o̶n̶f̶i̶g̶.̶j̶s̶"̶>̶<̶/̶s̶c̶r̶i̶p̶t̶>̶
The statement angular.module('ployee', ['ngRoute']) creates a new module. The statement angular.module('ployee') retrieves the module for further configuration.
When the module is created after the controller script, the controller is lost. This is why the script that creates the module needs to be placed before other scripts which add controllers, services, filters, directives, constants, etc.
A module is a container for your app.
Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module.
From the Docs:1
Creation versus Retrieval
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
For more information, see
AngularJS angular.module Function API Reference
AngularJS angular.Module Type API Reference
AngularJS Developer Guide - modules
I'm fairly new to AngularJS, and I'm attempting to set up routing on my basic app.
My app.js:
var app = angular.module("StarWarsApp", ['ngRoute', 'ne.swapi']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
My index.html:
<head>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="StarWarsApp" \>
<div class="container">
<div ng-view></div>
</div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<!-- Services -->
<script type="text/javascript" src="js/services/charactersList.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
</body>
</html>
When I load home.html directly, I see the contents of it properly, but it won't appear in my ng-view and I can't figure out why. I'm sure I missed something very basic, but I've no idea. Any ideas?
What you posted works correctly without your controller, service, and ne.swapi, so the error is likely there. However the code for your controller & service was not posted here.
One idea I have from referencing the ne.swapi documentation-check that you are loading 'swapi' after $scope in the controller if you are using ne.swapi. Again, since your controller was not posted I am not sure if this is causing the issue.
app.controller("Test", function($scope, swapi){
$scope.test = "Hey";
});
I have a working plunker here, I hope referencing it will help you find the error. https://plnkr.co/edit/9hD490m7nZxSTQPDTN0J?p=preview
Issues Found:
There is an unexpected character in the body tag. Remove that first.
Also, you have added the 'ne.swapi' dependency in app.js. So, its script should be added before inserting app.js.
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Also, it would be good to add scripts in the bottom of the body tag. Otherwise. it might affect the page rendering speed. This is a suggestion. This won't cause the issue you have now.
I'm getting the following error trying to load the Firebase module in my angular.module function
Here is my web page:
<!doctype html>
<html class="no-js" lang="" >
<head>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"> </script>
<!-- build:js scripts/vendor/modernizr.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body ng-app="assetMgr">
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!--<script src="scripts/controllers/mainCtrl.js"></script>
<script src="scripts/services/api.js"></script>
<script src="scripts/directives/assets.js"></script> --->
<!-- endbuild -->
</body>
</html>
Here is angular.module code:
'use strict';
var app = angular.module('assetMgr', ['Firebase']);
I'm lost as to why I'm getting this error. Any help would be greatly appreciated.
Thank you in advance.
Angular module are case sensitive, change Firebase to firebase and you should be all set
'use strict';
var app = angular.module('assetMgr', ['firebase']);
You are doing everthing correct Its just the name of firebase. You will need to change it to firebase instead of Firebase.
I have installed phantomjs (coz i'm trying to get the system to make my website in angular crawlable), and i'm stuck on a "nomod" error which occurs only on phantomjs server (the live version works perfectly fine).
<html lang="{{lang}}" itemscope itemtype="http://schema.org/WebPage" ng-app="myApp" class="no-js">
<base href="/">
<head>
<meta name="fragment" content="!">
</head>
<body>
....
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
........
<!-- endbower -->
<script></script>
....
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
loading controllers
....
<!-- endbuild -->
</body>
</html>
For the app.js
'use strict';
angular
.module('myApp', [
'ngAnimate',
'ngAria',
....
])
.filter()....
.config(function ($routeProvider, $stateProvider, $urlRouterProvider, $authProvider, UIRouterMetatagsProvider) {....})
.config(function($locationProvider) {
// use the HTML5 History API
$locationProvider.html5Mode(true);
requireBase: false;
$locationProvider.hashPrefix('!')
});
When i access from phantomjs ng-app is called before myApp being initialized and i tried to start the app with manual bootstrapping without success.
If i try to load the controllers without calling ng-app I still get the error because myApp module is somehow created after all controllers have been loaded.
Hope someone can help...
Thank you very much.
I was also getting the nomod error. In my case it was because my controller had the "const" declaration in it.
Changing "const" to "var" resolved the problem.
My error was:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myAppName&p1=[$injector:nomod] http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myAppName
Here is a related post explaining the problem with PhantomJS (via Karma) and "const".
https://github.com/karma-runner/karma/issues/1621
I have the following view rendered from my express server index.html
<section ng-view></section>
<!-- Load local libraries -->
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/dummy/dummy.client.module"></script>
<script type="text/javascript" src="/dummy/dummy.client.controller"></script>
<script type="text/javascript" src="/dummy/dummy.client.route"></script>
<!-- Bootstrap AngularJS application -->
<script type="text/javascript" src="/application.js"></script>
I manually bootstrap it with application.js file:
var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'dummy'])
mainApplicationModule.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
if (window.location.hash === '#_=_') window.location.hash = '#!';
// Manually bootstrap the AngularJS application
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
Then in dummy.client.module.js:
angular.module('dummy', [])
in dummy.client.controller.js:
angular.module('dummy').controller('DummyController', ['$scope', function($scope) {
$scope.text = 'hi what '
}])
dummy.client.route.js:
angular.module('dummy').config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'dummy/dummy.client.view.html'
})
}])
dummy.client.view.html:
<section ng-controller="DummyController">
<textarea ng-bind="text"></textarea>
</section>
I get an empty page. the controller is not invoked (i use alert('hi') to test)
If i don't use ngRoute, i.e. append all the js files in the index.html page, it's working instead of using ngRoute and ng-view, it works
error message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module dummy due to:
Error: [$injector:nomod] Module 'dummy' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0-build.3042+sha.76e57a7/$injector/nomod?p0=dummy
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:120:12
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:215:17
at ensure (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:139:38)
at module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:213:14)
at angular.module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:686:31)
at angular.module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1019:38)
at http://localhost:3000/lib/angular/angular.js:3877:22
at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
at http://localhost:3000/lib/angular/angular.js:3878:40
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=dummy&p1=Error%3A%…t%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.js%3A3878%3A40
at http://localhost:3000/lib/angular/angular.js:78:12
at http://localhost:3000/lib/angular/angular.js:3905:15
at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
at http://localhost:3000/lib/angular/angular.js:3878:40
at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
at createInjector (http://localhost:3000/lib/angular/angular.js:3811:11)
at doBootstrap (http://localhost:3000/lib/angular/angular.js:1444:20)
at Object.angular.resumeBootstrap (http://localhost:3000/lib/angular/angular.js:1467:5)
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=app&p1=Error%3A%20…p%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.js%3A1467%3A5)angular.js:78 (anonymous function)angular.js:3905 (anonymous function)angular.js:325 forEachangular.js:3871 loadModulesangular.js:3811 createInjectorangular.js:1444 doBootstrapangular.js:1467 angular.resumeBootstraphint.js:535 maybeBootstrap
[Edit]:
I have tried another module and still not working:
article.client.module.js:
angular.module('article', [])
article.client.route.js:
angular.module('article').config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl:'article/list-article.client.view.html'})
}
]);
article.client.controller:
angular.module('article').controller('ArticleController', ['$scope', function($scope) {
$scope.text = 'hi'
}
])
list-article.client.view.html:
<section ng-controller="ArticleController">
<textarea ng-bind="text"></textarea>
</section>
application.js:
//var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'dummy']);
var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'article']);
//var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'article', 'user', 'index']);
mainApplicationModule.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
if (window.location.hash === '#_=_') window.location.hash = '#!';
// Manually bootstrap the AngularJS application
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
<section ng-view></section>
<!-- Load local libraries -->
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>
<!--<script type="text/javascript" src="/dummy/dummy.client.module.js"></script>-->
<!--<script type="text/javascript" src="/dummy/dummy.client.controller.js"></script>-->
<!--<script type="text/javascript" src="/dummy/dummy.client.route.js"></script>-->
<!-- Load the articles module -->
<script type="text/javascript" src="/article/article.client.module.js"></script>
<script type="text/javascript" src="/article/article.client.controller.js"></script>
<script type="text/javascript" src="/article/article.client.route.js"></script>
<!--<script type="text/javascript" src="/article/article.client.resource.js"></script>-->
<!-- Bootstrap AngularJS application -->
<script type="text/javascript" src="/application.js"></script>
I commented out the dummy module. same error as before
[Edit 2]:
if i change the folder name to article2 or anything other than 'article', then it works.
I think you are missing .js in the script include. Because of which dummy module is failed to initialize and consequently you get the mentioned error.
<script type="text/javascript" src="/dummy/dummy.client.module.js"></script>
<script type="text/javascript" src="/dummy/dummy.client.controller.js"></script>
<script type="text/javascript" src="/dummy/dummy.client.route.js"></script>
extended answer to extended question...
Now, there are two more problems here
article module is getting initialized as you are using ngRouteProvider in article module without adding ngRoute dependency.
//You need to add ngRoute dependency in order to use $ngRouteProvider
angular.module('article', ['ngRoute']);
for this you also need to include angular-route.js
refer : https://docs.angularjs.org/api/ngRoute
You are using ngResource in application.js but I do not see you are including angular-resource.js
refer: https://docs.angularjs.org/api/ngResource