I have the folder structure as in the image.
And I have 2 controllers in 2 different folders. And it seems they 2 gets conflicted and the first controller pages are not working if I include the 2nd controller in index.html as below. Only if I remove the second controller the first one works.
index.html
<script src="1_reportingEntities/controller.js"></script>
<script src="2_dataCollections/controller.js"></script>
Folder structure
Updated:
Here are the 2 controllers and both have the same file name in different folders.
controller.js
'use strict';
var mdmApp = angular.module('mdmApp', ['ngRoute', 'ngResource', 'ngMessages', 'ui.grid', 'ui.grid.pagination',
'ui.grid.moveColumns', 'ui.grid.resizeColumns', 'ui.grid.selection', 'ui.grid.autoResize',
'ui.grid.cellNav', 'ui.grid.exporter', '720kb.datepicker','angularjs-dropdown-multiselect']);
mdmApp.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl : '1_reportingEntities/listEntities.html',
controller : "listController"
})
.when('/list', {
templateUrl : '1_reportingEntities/listEntities.html',
controller : "listController"
})
controller.js
'use strict';
var mdmApp = angular.module('mdmApp', ['ngRoute', 'ngResource', 'ngMessages', 'ui.grid', 'ui.grid.pagination',
'ui.grid.moveColumns', 'ui.grid.resizeColumns', 'ui.grid.selection', 'ui.grid.autoResize',
'ui.grid.cellNav', 'ui.grid.exporter', '720kb.datepicker','angularjs-dropdown-multiselect']);
mdmApp.config(function($routeProvider) {
$routeProvider.when('/dataCollection', {
templateUrl : '2_dataCollections/dataCollection.html',
controller : "dataCollectionController"
})
.when('/reportTypeEntityList/:id', {
templateUrl : '2_dataCollections/reportTypeEntityList.html',
controller : 'reportListController',
resolve : {
formType : function() {
return 'REPORTTYPEENTITYLIST';
}
}
})
Your problem is you are declaring the same module twice.
When you register a module you add the second argument for dependencies.
Then to reference the same module you leave out dependencies, and only use the name.
Create module (setter):
angular.module('myApp', []);
Reference module (getter):
angular.module('myApp').controller('...;
You are basically wiping out the first module (and controller) when you add the same module declaration again
Related
I have two modules, where two routes:
angular
.module('lang', ['ngRoute'])
.config('lang', ['$routeProvider', config])
.controller('lang', lang);
function config(route){
route.when('/:lang/:page', {
template : '',
controller : lang
})
}
and route for guide module:
angular
.module('guide', ['ngRoute'])
.config('guide', ['$routeProvider', config])
.controller('guide', guide);
function config(route){
route.when('/:lang/guide', {
template : '/view/guide.html',
controller : guide
})
}
But the second controller not run. How can I run two controllers using two routes?
ng-route using for SPA applications.
If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
Therefore you need to define main module, config routes there and inject dependencies. Example:
var app = angular.module('app',['ngRoute', 'firstModule', 'secondModule']);
var configFunction = function($routeProvider){
$routeProvider
.when('/:lang/:page', {
templateUrl: '/view/guide.html',
controller : 'FirstCtrl'
})
.when('/:lang/guide', {
templateUrl: '/view/guide2.html',
controller: 'SecondCtrl'
})
configFunction.$inject = ['$routeProvider'];
app.config(configFunction);
app.config(['$locationProvider',
function ($locationProvider) {
$locationProvider.hashPrefix('');
}]);
And this is your injected controllers :
var app = angular.module('firstModule', []);
app.controller('FirstCtrl',function(){});
var app = angular.module('secondModule', []);
app.controller('SecondCtrl',function(){});
Be aware regarding syntax. Check syntax for Angular version you use.
I have the following code
var balaitus = angular.module("balaitus", ["ngRoute"]);
// configure our routes
balaitus.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
.when('/home_usuario', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
// route for the about page
.when('/estadisticas', {
templateUrl : 'estadisticas.html',
controller : 'estadisticasCtrl'
})
// route for the contact page
.when('/hashtags', {
templateUrl : 'hashtags.html',
controller : 'hashtagsCtrl'
})
.otherwise({
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
});
});
// create the controller and inject Angular's $scope
balaitus.controller('usuarioCtrl', function($scope) {
// create a message to display in our view
$scope.message = 'Hi! This is the home page.';
});
balaitus.controller('estadisticasCtrl', function($scope) {
$scope.message = 'Hi! This is the estadisticas page.';
});
balaitus.controller('hashtagsCtrl', function($scope) {
$scope.message = 'Would you like to contact us?';
});
The code simply routes different pages, and set the corresponding controller. It works fine, but when I add another angular module between [ ], for example ngFileUpload or ui.bootstrap.demo, ng-route doesn't work, ¿but why?
you should add it in the constructor, like:
var balaitus=angular.module("balaitus", ['webix', 'ngRoute','ui.router']);
balaitus.config(['$stateProvider', '$urlRouterProvider', '$routeProvider', '$locationProvider', '$qProvider', function ($stateProvider, $urlRouterProvider, $routeProvider, $locationProvider, $qProvider) {
$routeProvider ....
and of course include the js files in ur html code
<script src="Scripts/angular-route.js"></script>
I am trying to lazy load my controllers for my AngularJS app I built along side with requireJS. I have created a custom "lazyLoad" library that creates a resolve object in app.config() routes (also I am using ui-router). If I code the state (without my library) to look like so it works
define(['angular', 'lazyLoader', 'uiRouter'], function(angular, lazyLoader, uiRouter){
var app = angular.module('myApp', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
window.lazy = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
$urlRouterProvider.otherwise('/');
$stateProvider
.state('campaigns', {
url:'/campaigns',
views: {
"top-nav" : {
templateUrl: 'views/home/top-nav.html',
resolve : {
load : ['$q', '$rootScope', function($q, $rootScope){
var d = $q.defer();
require(['../app/controllers/header-controller'], function() {
$rootScope.$apply(function(){
d.resolve();
});
});
return d.promise;
}]
}
},
"fullpage": {
templateUrl: 'views/home/index.html',
resolve : {
load : ['$q', '$rootScope', function($q, $rootScope){
var d = $q.defer();
require(['../app/controllers/home-controller'], function() {
$rootScope.$apply(function(){
d.resolve();
});
});
return d.promise;
}]
}
//controller: 'home-controller'
}
}
});
});
return app;
});
If I attempt to replace the resolve object with my library function it looks would look like this:
define(['angular', 'lazyLoader', 'uiRouter'], function(angular, lazyLoader, uiRouter){
and
.state('home', lazyLoader.route({
url:'/',
views: {
"top-nav" : {
templateUrl: 'views/home/top-nav.html',
controllerUrl: '../app/controllers/header-controller'
},
"fullpage": {
templateUrl: 'views/home/index.html',
controllerUrl: '../app/controllers/home-controller'
}
}
}));
lazyLoader.js
define(function () {
'use strict';
function LazyLoader() {}
LazyLoader.prototype.route = function(config){
var controllerPath;
if(config && config.views){
var singleView = Object.keys(config.views);
for(var i in singleView){
var viewName = singleView[i];
controllerPath = config.views[viewName].controllerUrl;
delete config.views.controllerUrl;
config.views[viewName].resolve = {
load : ['$q', '$rootScope', function($q, $rootScope){
var d = $q.defer();
require([controllerPath], function() {
$rootScope.$apply(function(){
d.resolve();
});
});
return d.promise;
}]
};
}
}
return config;
}
return new LazyLoader();
});
Example Controller
define(['app/module'], function (module) {
lazy.controller('header-controller', ['$scope', function ($scope) {
// stuff here
}]);
});
On a side note I plan on implementing something better than attaching lazy variable to window.
When I code the router like the first example it works. When I use my lazyLoader the one of the two views loads it's controller, the second view's controller's file is started to load (console.logs at the beginning show this) but it cannot resolve "module" in the example above.
link to error: AngularJS Error
Again this issue only happens when using my lazyloader which is producing the same resolve object that I have hard coded in for the version that works.
I have searched high and low and there are a lot of resources out there but I could not find anything that addressed this issue.
Any advice is appreciated!
You are taking too much pain to do lazy loading of controllers & services. There is simple approach to lazy load files with ocLazyLoad. This article might help you resolve the same issue.
https://routerabbit.com/blog/convert-angularjs-yeoman-spa-lazyload/
What you should do is
Add a reference of ocLayzLoad & updated JS files’ reference to load on demand from app.js or .html file of their views.
`bower install oclazyload --save-dev`
Now load the module ‘oc.lazyLoad’ in application. Update app.js file
angular
.module('helloWorldApp', [
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'oc.lazyLoad',
])
Load JS file by adding reference of JS in .html file
<div oc-lazy-load="['scripts/controllers/about.js', 'scripts/services/helloservice.js']">
<div ng-controller="AboutCtrl as about">
Your html goes here
</div>
</div>
If you using Grunt, update Gruntfile to uglyfy, renamed file name & update references in the final .html or .js file.
On the 'myApp' module definition, shouldn't you be returning app variable instead of myApp?
And to avoid exposing lazy to window, you could define it as a property of app variable, this way when you define new functions, you require app first and you can use it:
app.js:
app.lazy = {
controller: $controllerProvider.register,
directive: $compileProvider.register,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
...
return app;
controller.js:
define(['app'], function (app) {
app.lazy.controller('header-controller', ['$scope', function ($scope) {
// stuff here
}]);
});
I have defined drawerApp on my js . On click of button i am loading partial and there require js file. I need to inject some loaded js into my current drawerApp is there any way to inject in app?
Currentlt config. is as below.
JavaScript:
drawerApp.config([ '$interpolateProvider','$controllerProvider','$compileProvider', '$filterProvider', '$provide',
function ($interpolateProvider,$controllerProvider,$compileProvider, $filterProvider, $provide) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
drawerApp.register =
{
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
}]);
Up until recently, I have been throwing all my function into one large JS file. I am now trying to break these into small modules to make my application more portable per say.
I have my core js file (main.js) with the following code:
var App = angular.module("app", ['ui.bootstrap', 'angularMoment', 'chieffancypants.loadingBar', 'ngAnimate', 'ui.sortable', 'ngSanitize'], function ($interpolateProvider, $httpProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$httpProvider.defaults.transformRequest = function (data) {
if (data === undefined) {
return data;
}
return $.param(data);
};
$httpProvider.defaults.headers.post['Content-Type'] = ''
+ 'application/x-www-form-urlencoded; charset=UTF-8';
$httpProvider.defaults.headers.post['X-Requested-With'] = ''
+ 'XMLHttpRequest';
});
In another file (i.e. blog.module.js), I have the following:
(function(window, angular, undefined) {
'use strict';
angular.module("app", [])
.controller('Blog', ['$scope', function ($scope) {
alert('test');
}]);
});
While the main.js file loads along with all its dependencies, the second one doesn't get loaded. The controller is basically not found. Can anyone give me pointers as to where I may be going wrong.?
Thanks
The sintax in blog.module.js looks like you are trying to create two modules with same name 'app'.
Change your controller module like this
(function(window, angular, undefined) {
'use strict';
angular.module("app")
.controller('Blog', ['$scope', function ($scope) {
alert('test');
}]);
});
I quote you :
App = angular.module("app", ['ui.bootstrap',
...
angular.module("app", [])
You cant redeclare a module you can either reopen it
App = angular.module("app", ['ui.bootstrap',
...
angular.module("app")
or create another one
App = angular.module("app", ['ui.bootstrap', 'app.controller'
...
angular.module("app.controller")