I followed a tutorial on how to organize and Angular project. I have a ng directory that contains all my controllers, services and my routes.js. This is then bundled all together into an app.js by my gulp config.
My module.js is like this:
var app = angular.module('app', [
'ngRoute',
'ui.bootstrap'
]);
Here's a bit of my routes.js:
angular.module('app')
.config(function ($routeProvider) {
.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
});
Here's what my working LoginCtrl looks like:
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
$scope.login = function(username, password) {
...
}
})
The tutorial didn't make use of any Angular modules and I wanted to try one out. I added ui.bootstrap to my page from a CDN and try to change the LoginCtrl to:
angular.module('app')
.controller('LoginCtrl', function($scope, $uibModal, UserSvc) {
...
})
But this throws me the following error:
"Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
What is causing this error? In every tutorial I find this seems to be how they load a module, the only difference I see is that the tutorial don't seem to be using a router.
PS: Note that if I use an empty module list [] I get the exact same error. If I use a non-existing module ['helloworld'] I get an errorModule 'helloworld' is not available'. So I'm concluding that my `ui.bootstrap' module is indeed available.
EDIT: Plunker fiddle here: http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview
angular route is another module you should not only include but also use like this
in the app module creation
means DI of route
angular.module('app', ['ngRoute']);
Please go through the angular route doc
Remove ['ui.bootstrap'] form controller. You should add dependencies only one time but you add it twice so the second dependency list override the first one.
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
... })
your routes snippet looks wrong, you should be hanging the when call off $routeProvider and maybe declare $routeProvider as an injected val if it's not being picked up e.g.
angular.module('app')
.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
}]);
I have checked your link. I think there is a serious issue with angular and ui bootstrap version.In ui-boostrap dashboard, it is written that 0.12.0 is the last version that supports AngularJS 1.2.x. I have tried with all combinations but it doesn't work with your angular version.
I suggest you to change angular version to latest and ui-bootstrap version to latest so it will work.
Please check out this working Plukr
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script> //change this to latest also.
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap.min.js'></script>
<script src='./app.js'></script>
If you want to go with your angular version only. I'd request you to do some R&D. Try with different versions of ui-bootstrap. still if it doesn't work you can make PR.
Related
Error: [$compile:multidir] Multiple directives [statbox, statbox] asking for template on:
(On console)
Inside index.html
<script src="js/dashboard/dashboard.module.js"></script>
<script src="js/dashboard/dashboard.component.js"></script>
<script src="js/dashboard/statbox.component.js"></script>
Inside dashboard.module.js
var dashboardModule = angular.module('dashboard', ['ngRoute']);
Inside dashboard.component.js
angular.module('dashboard').component('dashboard', {
templateUrl: 'templates/dashboard/dashboard.template.html',
controller: ['$scope', '$routeParams', '$http', '$rootScope', '$log', function DashboardController($scope, $routeParams, $http, $rootScope, $log) {
...stuff NOT REFERENCING STATBOX by any means...
}]
});
Inside statbox.component.js
angular.module('dashboard').component('statbox', {
templateUrl: 'templates/dashboard/statbox.template.html',
controller: ['$http', '$rootScope', '$log', function StatboxController($http, $rootScope, $log) {
... some random get request ...
}]
});
And inside app.js
var app = angular.module('buttonMasher', ['ngRoute', 'dashboard', ...]);
Inside dashboard.template.html
... stuff ...
<div id="history">
... stuff ...
<p><b>Statbox</b></p>
<statbox></statbox>
</div>
Inside statbox.template.html
<div id="statbox">
<p>{{$ctrl.statboxText}}</p>
What am I doing wrong and why do I get this multiple directives error?
Whenever I comment out <script src="js/dashboard/statbox.component.js"></script>
from the index.html everything works but statbox controller is not getting loaded.
(Full project is here: Github: carloworks/masher - One can clone and run spring with profile "dev" enabled.)
Error: [$compile:multidir] Multiple directives [statbox, statbox]
asking for template on
Most likely it's because you included the .js twice in your index.html and the compiler at the time of binding the directive doesn't know which template to choose.
you should check:
the compiled html page to see if you included twice statbox.js
make sure you don't have multiple spots in your code where you
define the same .component('statbox',{})
Late to the party here but in my case it happened because I stupidly named the directive the same thing as the variable that was being passed into it so when the directive was being used it was trying to recursively include itself!
I had this issue with Typescript. I renamed some ts files and visual studio (2015) kept the old generated js files. Somehow, angular used both new and old js files, and I ended up with this error. I did a clean (which deletes all generated js files), build and it worked!
Question Background:
I am using AngulaJS's UI Router for the first time to create two views within my app.
The Issue:
Plunker link: https://plnkr.co/edit/2XAKa6mDCUyzyOPz2CNK
I feel I'm missing something simple here but I cannot get any route to render the specified html templates set in the app.js.
Eventually I want the Update.html template to render when the submit fucntion of the home.html (search()) is clicked but first off I need to be able to actually render a single view which I currently cannot.
I would expect on-load for the route to render up the home.html page but it wont:
Any help sorting this will be much appreciated.
app.js:
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('update', {
url: '/update',
templateUrl: 'Update.html',
controller: 'UpdateController'
})
}])
Looking at your plunker briefly, it looks like your controller files are creating new angular apps with the same name. They were overriding each other so the .config() block didn't exist in the final app. I have updated the controller files in this plunker and it seems to be rendering the first ui view fine:
https://plnkr.co/edit/cdpWWOaBJWL3dONtIXzv?p=preview
Notice in the controller files, the angular.module('app') no longer has the second argument ['ui-bootstrap'] which was causing a new angular app to be created for each controller file. Check it out here in the angular docs.
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.
Hope this helps!
I have found on stackoverflow a good example of how to create Tabs using AngularJS and Bootstrap, but I have a problem. The original code is using an old library of Angular (1.0.4) and if I switch to the current one (1.4.7) the script does not work anymore.
Here is the original code on Plunker
Here is the original Post
Here is what I've tried so far to change:
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/jobs', {
templateUrl: 'jobs-partial.html',
controller: JobsCtrl
})
.when('/invoices', {
templateUrl: 'invoices-partial.html',
controller: InvoicesCtrl
})
.when('/payments', {
templateUrl: 'payments-partial.html',
controller: PaymentsCtrl
})
.otherwise({
redirectTo: '/jobs'
});
});
Where is the problem?
As of AngularJS 1.2 and later:
ngRoute is now its own module
As of AngularJS 1.3 and later:
...$controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.
Therefore [1] adding ngRoute as a dependency to your module and [2] including the angular-route.js source file and [3] explicitly registering the controllers fixed it for me:
http://plnkr.co/edit/KJyFqf2vf74IidY26vxu?p=preview
[1]
var app = angular.module('plunker', ['ngRoute']);
[2]
<script src="http://code.angularjs.org/1.4.7/angular-route.js"></script>
[3]
app.controller('TabsCtrl', TabsCtrl);
app.controller('JobsCtrl', JobsCtrl);
app.controller('InvoicesCtrl', InvoicesCtrl);
app.controller('PaymentsCtrl', PaymentsCtrl);
Older versions of angular allowed for the use of global functions as controllers.
Support for that was dropped in version 1.3 and you need to register controllers as a module component.
Also ngRoute is a separate include now and must be injected as a module dependency
Here's an updated demo using angular 1.4.
Note that controllers are registered using:
angular.module('plunker')
.controller('TabsCtrl',TabsCtrl)
.controller('InvoicesCtrl',InvoicesCtrl)
.controller('PaymentsCtrl',PaymentsCtrl)
And in routing the controller is now string. Also ngRoute is included as module dependency
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/jobs', {templateUrl: 'jobs-partial.html', controller: 'JobsCtrl' }).
DEMO
I am kind of new to the AngularJS framework and I am trying to migrate my test project using the standard router to use the UI-router, but I get the following error:
Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined
What I have done so far is:
Controller:
// mainCtrl.js
angular.module("sm-web")
.controller('mainCtrl',['$scope',
function($scope) {
...
}]);
Router:
angular.module('sm-web', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider ) {
$urlRouterProvider.otherwise('root');
$stateProvider
.state('root', {
url: '',
templateUrl: path + 'ng/sm/view/main.html',
controller: 'mainCtrl'
});
}]);
Index:
<body ng-controller="mainCtrl">
<main-menu></main-menu>
<div class="container">
<div ui-view></div>
</div>
</body>
This works when I use the standard router, but not with the UI-router. Does anyone have any idea of what I am doing wrong?
It seems you have an issue w/the order you declare things. For you to declare the module "sm-web" you need to do this:
angular.module('sm-web', ['ui.router']);
Note that the presence of that 2nd array argument is what tells Angular that you're declaring the module (eg. creating a new module). When you leave that 2nd argument out, you're retrieving the module you previously declared.
So with that in mind, look at how it all is coming together in your code:
To declare the controller, you retrieve the module "sm-web" (by leaving off the 2nd array arg).
When configuring the router states, you declare a new module "sm-web". But note that immediately after you declare this new module, you try to register a state with the controller named "mainCtrl" -- but that doesn't exist yet.
You need to create the module somewhere before doing all of the above. After creating the module, then register the controller on the module. Finally, with the controller defined, then you can register the state that uses the controller.
There's too many ways to solve this ordering problem, so I'm not going to suggest anything further. It depends on what files the code lives in and the order you load those files in index.html.
In order to avoid your problem change your code by the following code:
// mainCtrl.js
angular.module("sm-web")
.controller('mainCtrl',['$scope',
function($scope) {
...
}]);
I keep receiving this error as I'm trying to implement bootstrap Modal window. What could be the cause of it? I've copy/pasted everything from http://angular-ui.github.io/bootstrap/#/modal here.
This kind of error occurs when you write in a dependency for a controller, service, etc, and you haven't created or included that dependency.
In this case, $modal isn't a known service. It sounds like you didn't pass in ui-bootstrap as a dependency when bootstrapping angular. angular.module('myModule', ['ui.bootstrap']); Also, be sure you are using the latest version of ui-bootstrap (0.6.0), just to be safe.
The error is thrown in version 0.5.0, but updating to 0.6.0 does make the $modal service available. So, update to version 0.6.0 and be sure to require ui.boostrap when registering your module.
Replying to your comment: This is how you inject a module dependency.
<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">
js:
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
});
Update:
The $modal service has been renamed to $uibModal.
Example using $uibModal
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
//code here
});
5 years later (this would not have been the problem at the time):
The namespacing has changed - you may stumble across this message after upgrading to a newer version of bootstrap-ui; you need to refer to $uibModal & $uibModalInstance.
Just an extra side note for an issue I also experienced today:
I had a similar error "Unknown provider: $aProvider" when I turned on minification/uglify of my source code.
As mentioned in the Angular docs tutorial (paragraph: "A Note on Minification") you have to use the array syntax to make sure references are kept correctly for dependency injection:
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
For the Angular UI Bootstrap example you mention you should this replace this:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
/* ...example code.. */
}
with this array notation:
var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];
With that change my minified Angular UI modal window code was functional again.
The obvious answer for the provider error is the missing dependency when declaring a module as in the case of adding ui-bootstrap. The one thing many of us do not account for is the breaking changes when upgrading to a new release. Yes, the following should work and not raise the provider error:
var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);
Except when we are using a new version of ui-boostrap. The modal provider now is defined as:
.provider('$uibModal', function() {
var $modalProvider = {
options: {
animation: true,
backdrop: true, //can also be false or 'static'
keyboard: true
},
The advise here is once we have make sure that the dependencies are included and we still get this error, we should check what version of the JS library we are using. We could also do a quick search and see if that provider exists in the file.
In this case, the modal provider should now be as follows:
app.factory("$svcMessage", ['$uibModal', svcMessage]);
One more note. Make sure that your ui-bootstrap version supports your current angularjs version. If not, you may get other errors like templateProvider.
For information check this link:
http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html
hope it helps.
after checking that I had all dependancies included, I fixed the issue by renaming $modal to $uibmodal and $modalInstance to $uibModalInstance
var ModalInstanceCtrl = ['$scope', '$modalInstance', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];