I am using requireJS in my application.
Whenever i tried to register controller on my module it said that the controller is not defined. Here is my controller which resides on login.controller.js
function LoginController() {
}
and here's my module code:
require('angular')
require('#uirouter/angularjs');
require('./service/storage')
require('./controller/login.controller')
angular.module('SecurityModule', ['ui.router'])
.controller('LoginController', LoginController);
// Routing
angular.module('SecurityModule')
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$stateProvider.state('login', {
url: '/login',
templateUrl: '/app/resources/view/security/login.html',
controller: 'LoginController',
});
})
;
When i checked my bundled.js the declaration of LoginController appears first. So why is it still undefine?
Thanks.
NOTE that im using browserify (which then uses commonJS) to bundle my files.
As the documentation states:
A module is a collection of configuration and run blocks which get
applied to the application during the bootstrap process. In its
simplest form the module consist of collection of two kinds of blocks:
Configuration blocks - get executed during the provider registrations
and configuration phase. Only providers and constants can be injected
into configuration blocks. This is to prevent accidental instantiation
of services before they have been fully configured.
angular.module('myModule', []).
config(function(injectables) { // provider-injector
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into config blocks.
}).
run(function(injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into run blocks
});
Related
i'm trying to make a blog using angular 1.6, all works fine except when i created a service and inject into config file. Test directive works fine, only breaks when inject myService service/factory.
app.coffee
app = angular.module 'dts',['ngRoute']
app.service 'myService', ->
this.asd = ""
app.directive 'ngHello', ->
return {
restrict:'E'
replace: true
template: "<h1>Hola mundo</h1>"
link: (scope,element,attrs)->
}
config.coffee
app = angular.module 'dts'
app.config ["$locationProvider","$routeProvider","myService", ($locationProvider,$routeProvider,myService)->
$routeProvider
.when "/",
controller: "mainCtrl"
templateUrl: "/app/views/index.html"
.when "/blog",
controller: "blogCtrl"
templateUrl: "/app/views/blog/index.html"
.when "/blog/post/:id",
controller: "blogCtrl"
templateUrl: "/app/views/blog/single.html"
.when "/contact",
controller: "contactCtrl"
templateUrl: "/app/views/contact.html"
.otherwise '/'
$locationProvider.html5Mode
enabled: true
requireBase: false
]
script includes
script(src="/js/libs/angular.min.js")
script(src="/app/modules/angular-route.min.js")
script(src="/app/app.js")
script(src="/app/services/slugs.js")
script(src="/app/config.js")
script(src="/app/controllers/main.js")
script(src="/app/controllers/blog.js")
What i'm doing wrong?
I searched about problems or deprecating about service or factory on 1.6 version, but i can't find nothing. I downgrade angular to 1.5.6 and does not works too.
I tried to move service/factory to app file, but breaks too (before i create it on services.js)
you have to inject myServiceProvider in config , you cannot inject service in config function
From the Docs:
Module Loading & Dependencies
Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
— AngularJS Developer Guide - Modules (Loading & Dependencies)
Route tables can not be created or changed by services.
On the other hand, services are injectable in the resolve functions of a route table as those functions are invoked during the run phase of an application.
I have a hard time understanding this. I'm attempting to put controllers in separate files so that they only deal with 1 thing, ideally, a partial view
My folder structure is like this...
My app.js file is like this.
angular.module('mikevarela', ['ui.router', 'mikevarela.controller.home', 'mikevarela.controller.about', 'mikevarela.controller.audio'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '../partials/home.partial.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: '../partials/about.partial.html',
controller: 'AboutController'
})
.state('audio', {
url: '/audio',
templateUrl: '../partials/audio.partial.html',
controller: 'AudioController'
});
});
and my controllers each have a module like this...
angular.module('mikevarela.controller.home', [])
.controller('HomeController', ['$scope', function($scope) {
$scope.title = 'Mike Varela Home Page';
}]);
My issues comes with the intial app declaration. I don't want to have to inject all the controllers in the main array app definition, that would be cumbersome and long winded. Isn't there a way to define the controller at the controller file. Kind of like this
angular.module('mikevarela', []).controller('HomeController', ['$scope', function($scope) {
// stuff here
}]);
Use angular.module('mikevarela').controller..... in subsequent files.
angular.module('mikevarela',[]).controller.....
is equivalent to redefining your app. The second param is requires array.
Quoting official angular.module docs
requires
(optional)
!Array.=
If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.
About your Controllers...
I think you're loading the controllers incorrectly.
You don't need to declare controllers as a dependency. Rather stating module.controller('yourController)` makes that controller available throughout the module.
If your controllers are in separate files, all you need to do to make it available is load it in with a script tag. e.g.
<script src="app.js"></script>
<script src="controller1.js"></script>
<script src="controller2.js"></script>
About your Application Structure...
This is not related to your question, but just coming from someone who's developed using Angular, I'd recommend not grouping your application by controllers/ by rather by feature. See: https://scotch.io/tutorials/angularjs-best-practices-directory-structure
I'm trying to get lazy-loaded Angular modules working with Webpack, but I'm having some difficulties. Webpack appears to generate the split point correctly, because I see a 1.bundle.js getting created that contains the code for the child app, but I don't see any request for 1.bundle.js when I load the page, and the child app doesn't initialize. The console.log never seems to fire, and it doesn't even appear to get to the point where $oclazyload would initialize the module.
There are a few points where I am confused.
1) Will webpack make the request to the server, or do I have to load the second bundle manually? (I've tried both, and neither works)
2) If I do need to load the bundles manually, in what order should they be loaded?
3) The third argument to require.ensure supposedly lets you control the name of the bundle, but the bundle is named 1.bundle.js no matter what string I pass.
4) Why can't I step through the code inside the require.ensure block in the debugger? When I do so I end up looking at this in the Chrome source view:
undefined
/** WEBPACK FOOTER **
**
**/
(Code Below)
Main entry point code:
'use strict';
import angular from 'angular';
import 'angular-ui-router';
import 'oclazyload';
angular.module('parentApp', [
'ui.router',
])
.config(['$urlRouterProvider', '$locationProvider', ($urlRouterProvider, $locationProvider) => {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
}])
.config(['$stateProvider', ($stateProvider) => {
$stateProvider
.state('child-app', {
url: '/child-app',
template: '<child-app></child-app>',
resolve: {
loadAppModule: ($q, $ocLazyLoad) => {
return $q((resolve) => {
require.ensure(['./child-app/app.js'], (require) => {
let module = require('./child-app/app.js');
console.log(module);
$oclazyload.load({name: 'childApp'});
resolve(module.controller);
});
})
}
},
controller: function() {
}
})
}]);
Child app:
'use strict';
import childAppTemplateURL from '../templates/child-app.html';
import childAppController from './controllers/childAppController';
export default angular.module('parentApp.childApp', [])
.component('applicationListApp', {
templateUrl: childAppTemplateURL,
controller: childAppController
});
The problem was unrelated to the require.ensure implementation. It was caused by some weirdness in the way ocLazyLoad is packaged (https://github.com/ocombe/ocLazyLoad/issues/179). The fix in my case was simple, I just added 'oc.lazyLoad' to the module dependencies.
angular.module('parentApp', [
'ui.router',
'oc.lazyLoad'
])
To answer two of my own questions, Webpack does indeed make a request to the server for the bundle, and you do not have to manually load the bundle. One gotcha that really confused me: the resolve block will fail silently if it contains a promise that won't resolve. In my case $ocLazyLoad.load() was failing, but there was no indication of the failure. The only clue was that the state provider wasn't adding the <child-app></child-app> markup to the DOM, which meant that it was actually initializing the state.
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) {
...
}]);
Here is a working example of how I have set up an interceptor which attaches an authentication token to each request (this is more or less the example from https://docs.angularjs.org/api/ng/service/$http)
angular.module("app", [])
.config(function ($httpProvider) {
$httpProvider.interceptors.push("authInterceptor");
})
.factory("authInterceptor", function ($q) {
return {
// interceptor configuration here
}
})
I have a lot of other stuff in my config and run blocks which call and initiate services from different angular modules, so I want to tidy things up a bit. However I understand there are some very specific rules to dependency injection in config blocks, which I don't quite understand, and these are preventing me from defining my authInterceptor factory in a separate module. As other logic in the config and run blocks calls other modules in the app, declaring that interceptor right there looks out of place.
This is what I want to do:
angular.module("services.authInterceptor", [])
.factory("authInterceptor", function ($q) {
return {
// interceptor configuration here
}
});
angular.module("app", [
"services.authInterceptor"
]).config(function ($httpProvider, authInterceptor) {
$httpProvider.interceptors.push("authInterceptor");
});
// Error: Unknown provider authInterceptor.
I tried injecting it to the run block instead, but I guess you're not allowed to inject $httpProvider there:
angular.module("app", [
"services.authInterceptor"
]).run(function ($httpProvider, authInterceptor) {
$httpProvider.interceptors.push("authInterceptor");
});
// Error: Unknown provider: $httpProviderProvider <- $httpProvider
Where should I inject the module so that $httpProvider is also injectable, and where should I add the interceptor to existing ones? My main goal is keeping the interceptor and other similar services in their own self-containing modules.
EDIT
I get a different error which seems to be getting me closer when I declare a provider instead of factory (for some reason I always thought these were interchangeable):
angular.module("services.authInterceptor")
.provider("authInterceptor", function ($q) {
return {}
})
// Error: Unknown provider: $q
So it now successfully injects authInterceptor to my config block, but fails when trying to find $q.
During the configuration phase only providers and constants can be injected. This is to prevent instantiation of services before they have been fully configured.
This is why you register interceptors by name (pushing the name as a string into the $httpProvider.interceptors array). They will be resolved later during runtime.
This is exactly what you did in your working example, and what you need to do in your second, even when the interceptor is in another module:
angular.module("services.authInterceptor", [])
.factory("authInterceptor", function ($q) {
return {
// interceptor configuration here
}
});
angular.module("app", ["services.authInterceptor"])
.config(function ($httpProvider) {
$httpProvider.interceptors.push('authInterceptor');
});
Demo: http://plnkr.co/edit/A8SgJ87GOBk6mpXsoFuZ?p=preview