What am I doing wrong to get started with an angular codepen?
https://codepen.io/TylerL-uxai/pen/mwqNLW
(function () {
'use strict';
angular
.module('timeOff')
.controller('TimeOffController', TimeOffController);
TimeOffController.$inject = ['$scope'];
function TimeOffController($scope) {
You need to pass empty dependency array to your module,
angular.module('timeOff',[])
WORKING CODEPEN
Related
im completely new to angularJS, below is the minimal example of my issue:
myModule.module.js:
(function () {
'use strict';
angular
.module('myModule', [
'myServices',
'myControllers'
]);
angular
.module('myServices', []);
angular
.module('myControllers', []);
})();
myService.service.js
(function () {
'use strict';
angular
.module('myModule')
.factory('myServices', myServices);
function myServices() {
var service = {};
return service;
}
})()
myController.js:
(function () {
"use strict";
angular
.module("myModule")
.controller("myController", myController);
myController.$inject = ['myServices']
myController(myServices) {
/* use myServices */
}
})()
I think I accomplished all things needed to make service available to controller but I'm still getting unresolved provider error...
I'm coming from strong Angular2+ background and maybe some common potfall I'm unaware of? Does the tile names os services must match their angular name or something similar?
Any help is appreciated.
Oh yeah, Angular2+ experience strikes on this one. Basically I was absolutely unaware about managing scripts in main.html (or whatever entry point for app is). So basically I was dumb enough not tu supply my main.html with specified script file.
So, assuming that my usecase was to add just another service to already working myModule, then
<script src="path/to/myService.js"></script>
Hope this will help someday some other dev lost in AngularJS :)
Cheers
This one it might be an oldy but anyway I guess there are a lot of front-end developers with the wisdom.
I'm trying not to declare a plug-in into the main module of my application.
Let's say I have the following modularization:
SUB-COMPONENT MODULE
(function () {
'use strict';
angular.module('app.modules.table.detail', []);
})();
COMPONENT MODULE
(function () {
'use strict';
angular.module('app.modules.table', [
'app.modules.table.detail'
]);
})();
MAIN APP MODULE
(function() {
'use strict';
angular.module('app.modules',
[ 'app.modules.table' <----// inside here is the table.detail
,'app.modules.other.component'
]);
angular.module('app', ['app.modules',
'smoothScroll'])
So, with this structure, can I hide the smoothScroll third-party away from the app module array? I just want to declare app.modules and that's it for the app.
I tried to include it as a dependency in the component array, but no luck. I've been reading about and I guess it has to be on the app for the $injector to know his $provider.
Anyone have nailed this?
I will answer myself because it was easier than I thougt.
I was not declaring the third-party in the sub-component / component modules.
CHILD module component
(function () {
'use strict';
angular.module('app.modules.table.detail', ['smoothScroll']); <-- HERE!
})();
PARENT module component
(function () {
'use strict';
angular.module('app.modules.table', ['app.modules.table.detail', 'smoothScroll' <--- ALSO HERE
]);
})();
So now I can bootstrap the app with no need of declaring the third-party on the main module. Therefore it is hidden from the main app module file
I am learning AngularJS and I have one application which use several separate controllers, and everything is splitted in separate files. Please note that there is no "$scope" because I am using the "controller as vm" syntax.
Application:
(function () {
"use strict";
angular.module("myApplication", ['dependency1', 'dependency2'])
})();
Controller 1 (which would need only dependency1):
(function () {
"use strict";
angular.module("myApplication")
.controller("firstController", firstController);
function firstController($http) {
...
}
Controller 2 (which would need only dependency2):
(function () {
"use strict";
angular.module("myApplication")
.controller("secondController", secondController);
function secondController($http) {
...
}
Everything is working correctly, but this approach forces me to include All the dependencies files in ALL pages.
I would like to move the dependencies to the controllers:
New Application (without dependencies):
(function () {
"use strict";
angular.module("myApplication", [])
})();
The question is: what is the correct syntax for the controllers, in order to move "dependency1" to Controller 1 and "dependency2" to Controller 2?
Thanks!
Have a look at ozLazyLoad
myApp.controller("MyCtrl", function($ocLazyLoad) {
$ocLazyLoad.load('testModule.js');
});
Read more over here.
I have enabled strict-di on my application as I am trying to prepare my source code for minification and am now working through resolving strictdi errors being thrown.
I have the following controller thats throwing a strictdi error, but I am correctly annotating using $inject (I am using the John Papa style guide too) and I cannot figure out where I am going wrong:
(function () {
'use strict';
angular
.module('app.products')
.controller('ProductsPageController', Controller);
Controller.$inject = ['MyToolbarService'];
function Controller(MyToolbarService) {
MyToolbarService.getToolbar('main').then(function (toolbar) {
toolbar.setTitle('GENERAL_TERMS.PRODUCTS');
});
}
})();
Error: [$injector:strictdi] ProductsPageController is not using
explicit annotation and cannot be invoked in strict mode
I have another controller (below) that works in exactly the same manner, and when the view loads that this is bound, no error is thrown and my toolbar service is setting its title:
(function () {
'use strict';
angular
.module('app.home')
.controller('HomePageController', Controller);
Controller.$inject = ['MyToolbarService'];
function Controller(MyToolbarService) {
MyToolbarService.getToolbar('main').then(function (toolbar) {
toolbar.setTitle('GENERAL_TERMS.WELCOME_MESSAGE');
});
}
})();
Banging my head against the wall now! Anyone got any suggestions?
Thanks
I typically don't write my DI in this fashion, most of the time I pass the array as the second argument to the .controller() function.
As to why you are having issues I am not sure. Could it be indentation? (crazy as it seems).
If you wanted to rule anything out I suppose you could try and write it:
(function () {
'use strict';
angular
.module('app.home')
.controller('HomePageController', ['MyToolbarService', Controller]);
function Controller(MyToolbarService) {
MyToolbarService.getToolbar('main').then(function (toolbar) {
toolbar.setTitle('GENERAL_TERMS.WELCOME_MESSAGE');
});
}
})();
Could please explain the difference between two methods to load your controllers,service.... etc
var appModule = angular.module("myApp", []);
appModule.controller("MyController", ["$scope", ($scope)
=> new Application.Controllers.MyController($scope)]);
module todos {
'use strict';
var todomvc = angular.module('todomvc', [])
.controller('todoCtrl', TodoCtrl)
.directive('todoBlur', todoBlur)
.directive('todoFocus', todoFocus)
.service('todoStorage', TodoStorage);
}
The first method does dependency injection inline. The second method depends on $inject/constructor argument being setup properly in the controller.
Suggestion : http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1