I am creating an angularJS app, and decided to separate the controllers into multiple files. This is what I have:
For declaring the module, I have one file with the below content:
File: controllers.js
angular.module('starter.controllers', []);
and one of the other controllers I am using is called ConnectionsController:
File: ConnectionsController.js
angular.module('starter').controller('ConnectionsController', ['$scope', '$http', function($scope, $http){
}]);
In the app.js, I have the following:
File: app.js
var app = angular.module('starter', ['ionic', 'starter.controllers', 'ConnectionsController','starter.MoreOptionsController','starter.OrdersController', 'starter.ProfileManagementController', 'starter.UserAccessController', 'starter.services']);
When I run the application, it triggers an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ConnectionsController due to:
Error: [$injector:nomod] Module 'ConnectionsController' 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.
What am I doing wrong in declaring the controllers or linking them to app.js file?
Thanks,
Update: Index.html content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/ConnectionsController.js"></script>
<script src="js/OrdersController.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
The error is self-explanatory: you don't have module ConnectionsController. Note, that when you declare main application module like
angular.module('starter', [
'ionic',
'starter.controllers',
'ConnectionsController',
// etc ...
]);
it means that module starter depends on several other modules, in your case ionic, starter.controllers, ConnectionsController. However, ConnectionsController is the controller name it's not a module. So you don't have to list it as module dependency.
Related
I want to use routing and AngularJS in Ionic V1.
when I compile my program it prints out this error message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module ionic due to:
[$injector:modulerr] Failed to instantiate module ngSanitize due to:
[$injector:unpr] Unknown provider: $filterProvider
http://errors.angularjs.org/1.2.10/$injector/unpr?p0=%24filterProvider
minErr/<#http://localhost:8100/js/angular/angular.js:78:12
createInjector/providerCache.$injector<#http://localhost:8100/js/angular/angular.js:3544:19
getService#http://localhost:8100/js/angular/angular.js:3671:39
loadModules/<#http://localhost:8100/js/angular/angular.js:3625:45
forEach#http://localhost:8100/js/angular/angular.js:303:11
loadModules#http://localhost:8100/js/angular/angular.js:3614:12
loadModules/<#http://localhost:8100/js/angular/angular.js:3621:40
forEach#http://localhost:8100/js/angular/angular.js:303:11
loadModules#http://localhost:8100/js/angular/angular.js:3614:12
loadModules/<#http://localhost:8100/js/angular/angular.js:3621:40
as well as:
Uncaught TypeError: angular.module(...).info is not a function
The project can be found under: codesandbox.io/s/stupefied-pine-px3iq
my index.html:
<!DOCTYPE html >
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular-mocks.js"></script>
<script src="js/angular/angular-route.js"></script>
<script src="js/angular/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/app_module.js"></script>
<script src="js/controller/SensorCtrl.js"></script>
<script src="js/controller/StartCtrl.js"></script>
<script src="js/service/state_route.js"></script>
<script src="js/service/draw.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-nav-view></ion-nav-view>
</ion-content>
</ion-pane>
</body>
</html>
my app module:
var app = angular.module('app', ['ionic']);
my roting config:
app.config(function ($stateProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'template_startseite.html'
})
.state('sensoren',{
url:'/sensoren',
templateUrl: 'template_sensorwerte.html'
});
});
when I try the routing, then it only shows http://localhost:8100/ but not http://localhost:8100/index.html
so maybe this is why the routing doesn't work. But the error message shows that ionic isn't instantiated, do you have any ideas what I can do?
edit:
here is a picture of what the app shows on screen
edit2:
tmhao2005 pointed out that <script src="lib/ionic/js/ionic.bundle.js"></script> was missing, it now works perfectly.
For all who might encounter the same problem:
The problem seems to have been the 'ionic' in my app modue var app = angular.module('app', ['ionic']);
So I switched from the <ion-nav-view></ion-nav-view> to <div ng-view></div>
And from $stateProvider.state to $routeProvider.when
now it seems to work again, the routing function works too.
Would be nice to know why the 'ionic' didn't work though.
I`m new in AngularJS
I`m getting this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' 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.
this is index.html file:
<!doctype html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-controller="FirstCtrl">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">{{first.greeting}}</div>
<script src="angular.js"></script>
<script src="app/app.js"></script>
<script src="js/main.js"></script>
</body>
</html>
and this is app.js file:
var app = angular.module("app", ["ui.router"]).controller("FirstCtrl", function FirstCtrl(){
var first = this;
first.greeting = "First";
});
Please help me to solve this issue
You're not loading in the ui-router script, I don't know if you have it locally or using a cdn, you just need to add it in your index.html there
for example, by adding-
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
in your index.html (this is a cdn link)
Fixed by following steps:
Installed angular-ui-router via npm
npm install angular-ui-router#0.2.18 --save
Then load the script in index.html (angular 1.5.0)
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="angular.js"></script>
This is just the core angular library, you need to either download and host the latest angular ui router library or pull it in from a CDN
see here for more details: https://github.com/angular-ui/ui-router
Can be installed via nuget
PM > Install-Package Angular.UI.UI-Router
I'm trying to load a module called ChapterCtrl but am not being able to because of the Module Unavailable error. Other modules are being loaded as expected. When running the site it causes the links to crash. However, on removing ChapterCtrl from the list of dependencies in the app module I've found that the site is working fine.
Here is the code for the ChapterCtrl.js file:
angular.module('ChapterCtrl', []).controller('ChapterController', function($scope) {});
Here is the app.js file:
angular.module('soulFront', ['ngRoute', 'appRoutes', 'MainCtrl', 'PageCtrl', 'PageService', 'ChapterCtrl', 'ChapterService']);
Here is the Page.js file for comparison:
angular.module('PageCtrl', []).controller('PageController', function($scope) {});
I've tried going through the Error Reference page but was unable to find any fix/solution to the issue. Any suggestion is appreciated. Thanks
Edit
Here is a snippet of the index.html file:
<!--CSS-->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!--JS-->
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.js"></script>
<!--ANGULAR CUSTOM-->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/PageCtrl.js"></script>
<srcipt src="js/controllers/ChapterCtrl.js"></srcipt>
<script src="js/services/PageService.js"></script>
<script src="js/services/ChapterService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
I have developed an AngularJs, RequireJs application with PHP as back-end and is hosted on WAMP server.
Server machine name is "ICC-Server" and alias is "iccportal" and domain is "ip.bombay".
When I access the portal with http://iccportal.ip.bombay on IE10 and Chrome it works well.
But If I try to access the same portal without domain name (http://iccportal), I get following error.
SCRIPT5009: 'angular' is undefined
app.js, line 4 character 1
SCRIPT5009: 'angular' is undefined
main.js, line 6 character 5
I am not sure if issue with requirejs or WAMP.
Please guide.
Following is the code snippet for main.js and app.js
Main.js
require(["app"], function (app) {
// Following line is more important else angular js will not work
angular.bootstrap(document.getElementsByTagName("body")[0], ["wkPortal"]);
});
app.js
(function (define, angular) {
"use strict";
// enable/disable logs
define(["components/home/homeController","components/home/homeService"], function (homeController, homeService) {
var app = angular.module("wkPortal", ["ngRoute", "ngSanitize"]);
// register home controller
app.controller("HomeController", homeController);
// register home service
app.service("HomeService", homeService);
return app;
}
);
}(define, angular));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<title>ICC Portal</title>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/MetroJs.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div ng-view></div>
<!-- JS -->
<!-- load jquery -->
<script src="assets/js/jquery-2.1.0.js" type="application/javascript"></script>
<script src="assets/js/jquery-ui.js" type="application/javascript"></script>
<script src="assets/js/jquery.validate.js" type="application/javascript"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.js" type="application/javascript"></script>
<!-- load angular -->
<script src="assets/js/angular.min.js" type="application/javascript"></script>
<script src="assets/js/angular-animate.js" type="application/javascript"></script>
<script src="assets/js/angular-cookies.js" type="application/javascript"></script>
<script src="assets/js/angular-route.js" type="application/javascript"></script>
<script src="assets/js/angular-touch.js" type="application/javascript"></script>
<script src="assets/js/angular-sanitize.js" type="application/javascript"></script>
<script src="assets/js/MetroJs.js" type="application/javascript"></script>
<!-- application app -->
<script data-main="app/main" src="assets/js/require.js"></script>
</script>
</body>
</html>
Thanks,
Indrajit
The problem can be caused by an older document-mode.
Try going to developer tools (F12), and manually changing the document-mode.
If that works, check why your site forces an older document mode.
A likely cause may be the following line in your HTML head section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
How Internet Explorer Chooses Between Document Modes: Link
You should not explicitly import AngularJS if you are using RequireJS. In this case Angular should be loaded by RequireJS and you should bootstrap your application manually. Google a little about it and you will find the solution.
I've inherited an angular project, and it's having problems loading the ui-bootstrap-tpls modules.
For each directive it's trying to use from bootstrap, I get something similar to the following:
Error: [$compile:tpload] Failed to load template: template/datepicker/popup.html
I've read about the need to include the tpls version of the ui-bootstrap lib. (ui-bootstrap-tpls-0.10.0.js (instead of ui-bootstrap.js)), but having done that as well as every permutation of module injected into my module as a dependency (ui.bootstrap, ui.bootstrap.tpls, template/datepicker/datepicker.html'), but I can't beat it.
Here're my includes:
<html class="no-js" ng-app="hiringApp">
<head>
<meta charset="utf-8">
<title>#ViewBag.Title</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="layout" content="IRLayout">
<!-- styles IRLayout-->
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
<!-- BootStrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- font-awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="#Url.Content("~/content/css/layout.css")">
<link rel="stylesheet" href="#Url.Content("~/content/css/normalize.css")">
<link rel="stylesheet" href="#Url.Content("~/content/css/main.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/css/Upload.css")">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/styles.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/site-specific.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/rating.css")">
<!-- Upload -->
#*<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/Upload.css")">*#
<!-- Header Scripts-->
<!-- Jquery & Jquery UI -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="#Url.Content("~/Scripts/Vendor/underscore-min.js")"></script>
<!-- BootStrap -->
<!-- Validate -->
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<!-- Analytics -->
<script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>
<!-- Angular -->
<!--
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="#Url.Content("~/Scripts/app.js")"></script>
<script src="#Url.Content("~/Scripts/controllers.js")"></script>
<script src="#Url.Content("~/Scripts/directives.js")"></script>
<script src="#Url.Content("~/Scripts/filters.js")"></script>
<script src="#Url.Content("~/Scripts/services.js")"></script>
<script>
angular.module("hiringApp").constant("$userProvider", #Model.User.SystemRoles);
angular.module("hiringApp").constant("$jobProvider", '');
</script>
<!-- Upload -->
<script src="#Url.Content("~/content/js/plupload.full.js")"></script>
<script src="#Url.Content("~/content/js/UploadImage.js")"></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
<script src="~/Content/js/audio/irAudioRecorder.js"></script>
#RenderSection("script", required: false)
</head>
Here's my app module:
var hiringApp = angular.module('hiringApp', ['ui.router', 'ngAnimate', 'ngResource', 'filters', 'ui.bootstrap', 'ui.bootstrap.tpls']);
Here's the error:
GET http://localhost:54720/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:8539
7Error: [$compile:tpload] Failed to load template: template/tooltip/tooltip-popup.html
http://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28)
at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24)
I just wanna post my solution for this error.
include the tpls version of ui.bootstrap
src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
apparently the none tpls version doesn't include those templates.
when you inject it into you app, make sure you inject ui.bootstrap and not ui.bootstrap.modal
angular.module("shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);
for more info rtfm ;)
I had a very similar issue and was able to resolve it thanks to your comment, Glenn. Therefore I would like to wrap this up into a more general answer that is hopefully helpful to many others:
If UI Bootstrap templates fail to load and you have already double-checked that you have included the right module from the right JS file (and only it) into your app, check if the template cache is disabled/broken for some reason.
There are multiple ways to disable or clear the cache, and one may not be aware that this is happening at all.
In my case modal dialogs weren't opening with error messages like Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html.
I had started off from a great template project downloaded from the JBoss Developer page, which had the following lines included in the app definition:
var xpApp = angular.module('kitchensink', ['ui.bootstrap',...])
.config(... {
/*
* Use a HTTP interceptor to add a nonce to every request to prevent MSIE from caching responses.
*/
$httpProvider.interceptors.push('ajaxNonceInterceptor');
...
.factory('ajaxNonceInterceptor', function() {
// This interceptor is equivalent to the behavior induced by $.ajaxSetup({cache:false});
var param_start = /\?/;
return {
request : function(config) {
if (config.method == 'GET') {
// Add a query parameter named '_' to the URL, with a value equal to the current timestamp
config.url += (param_start.test(config.url) ? "&" : "?") + '_=' + new Date().getTime();
}
return config;
}
}
});
Once I removed the interceptor, the modal dialogs were showing.
I also had this issue but I was only using the tpls version of ui.bootstrap.
In my case the issue was a cache busting module ngCacheBuster.
In the network tab I could see there was cachebuster parameter at the end of the resource call:
/template/window.html?cb=4889764132
In this case, bootstrap did not look into its templatecache but decided to load the file from this location, which of course did not exist.
I solved this by whitelisting all calls to the templates folder from the cachebusting mechanism.
I hope this will be helpful to anyone experiencing this problem and using cachebusting.
Include ui.bootstrap.tpls right below ui.bootstrap
make sure you have included not only ui-bootstrap.js, as well ui-bootstrap-tpls.js
For me it was the interceptor that was producing the error i had to add the below code to make it ignore the calls that are not made to my api:
if (config.url.indexOf('templates/') == 0 || config.url.indexOf('uib/') == 0)
{
console.log('ignoring '+config.url);
return config;
}
Yep. I solved this issue like this.. and by including ui-bootstrap-tpls.js
angular.module('mainModule', ['ui.bootstrap', 'sub-module']);
angular.module('sub-module', ['ui.bootstrap.modal']);
However i am not sure if other cases like template-caching will cause the issue or not. At least not for me..