I have a:
main module : kp
sub module : kp.venue
I want kp.venue to have it's own "route" definitions (for all paths relative to that module).
This is what I am trying to achieve in the code bellow.
Can anyone explain me why it doesn't work?
I followed the technique presented in this post: https://stackoverflow.com/a/15301427/971008
(function () {
'use strict';
angular.module('kp.venue', [])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/venue", {
template : "<p>This is the venue module</p>",
controller: "VenueCtrl"
});
}
])
.controller('VenueCtrl', ['$scope',
function($scope){
console.log("VenueController");
}
]);
angular.module('kp', ['ngRoute', 'ngAnimate', 'kp.venue'])
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.html5Mode({enabled:true, requireBase:false});
$routeProvider
.when("/", {
template: "<p>main app</p>",
controller: "MainController"
})
.otherwise({
redirectTo: '/'
});
}
]);
//Load controller
angular.module('kp')
.controller('MainController', ['$scope',
function($scope) {
$scope.test = "Testing...";
}
]);
}());
Note that I have already tried to move "kp.venue" bellow the definition of "kp" module to be sure that it was not a problem related to things not being loaded in the right order.
Related
I've been googling about this for the past hour but couldn't find an answer.
I want to change the template when there's a parameter passed in the URL.
I tried using hash to retrieve it by calling $location.hash in the controller but I can't figure out how to have the routeProvider detect it, here's my code:
'use strict';
angular.module('myApp.projects', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/projects', {
templateUrl: 'modules/projects/projects.html',
controller: 'projectsCtrl'
});
}])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/projects:project', {
// $routeProvider.when('/projects#project', { // Tried this and it didn't work as well
templateUrl: 'modules/projects/single-project.html',
controller: 'projectsCtrl'
});
}])
.controller('projectsCtrl',['$scope','portfolioService','$location',
function($scope,portfolioService,$location){
$scope.portfolio = portfolioService.portfolio;
console.info('$location.hash',$location.hash());
// $scope.currentProject = $location;
}])
I am grouping my electronjs(angular,mysql) application files based on feature, for example, I am developing an inventory system, and this is how I organized my file:
/app
/scripts
/categories
-- app.js
-- category.html
-- categoryController.js
-- categoryService.js (MySQL data access procedures)
/ brands
-- app.js
-- brands.html
-- brandsController.js
-- brandsService.js (MySQL data access procedures)
/ unitsofmeasure
-- app.js
-- unitsofmeasure.html
-- unitsofmeasureController.js
-- unitsofmeasureService.js (MySQL data access procedures)
/ products
/ suppliers
....
and so on for each feature.
Inside each app.js file (example for category):
(function () {
'use strict';
var _templateBase = './scripts';
angular.module('app', [
'ngRoute',
'ngMaterial',
'ngAnimate'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: _templateBase + '/category/category.html' ,
controller: 'categoryController',
controllerAs: '_ctrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
}
]) ;
})();
My question: is it ok to have several app.js file for each feature my app would have?
Try to follow DRY practice or don't repeat yourself. Therefore the best way to put it is to create a module outside those folders for all the subfolders. What I mean is that you create module.js or whatever you want to name it in root of scripts folder. Inside module.js you can just create a module that you will use later or you can include all configuration.
First way:
(function () {
'use strict';
angular.module('app', [
'ngRoute',
'ngMaterial',
'ngAnimate'
])
})();
And then inside each folder file for routing (maybe categoriesConfig.js...):
(function () {
'use strict';
var _templateBase = './scripts';
angular.module('app')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: _templateBase + '/category/category.html' ,
controller: 'categoryController',
controllerAs: '_ctrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
}
]) ;
})();
Second way:
(function () {
'use strict';
var _templateBase = './scripts';
angular.module('app', [
'ngRoute',
'ngMaterial',
'ngAnimate'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/category', {
templateUrl: _templateBase + '/category/category.html' ,
controller: 'categoryController',
controllerAs: '_ctrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
}
]) ;
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/brands', {
templateUrl: _templateBase + '/brands/brands.html' ,
controller: 'brandsController',
controllerAs: '_ctrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
}
]) ;
})();
Depends on what you are trying to achieve in such structure organizing. If you want to keep your routes related to components close to the related component it is enough to add config with routes to each folder (Your first example). In such case, you will not duplicate dependencies which presented across all modules.
Example 1:
angular.module('app')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: _templateBase + '/category/category.html' ,
controller: 'categoryController',
controllerAs: '_ctrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
}
]) ;
And in case your components could grow in future with some subcomponents. You may want to create submodule for each, and attach config to them.
Example 2
angular.module('app.brands', [])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: _templateBase + '/category/category.html' ,
controller: 'categoryController',
controllerAs: '_ctrl'
});
$routeProvider.otherwise({ redirectTo: '/' });
}
]) ;
My personal feeling, that first example will work best for you. But you better know the domain of your app, so choose yourself. Anyway you should minimize dependencies injection which presented across all your project.
I'm new to angular and I'm trying to modularlize my app.
My main module gets some other module and I want to use the controller of the injected module in my route definition.
Some simple example would be very helpful!
This does not work:
var app = angular.module('Contacting_App', ['LeadLookup']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main',
{controller: 'MainCtrl',
templateUrl: 'apex/f42_Contacting_Main'}
).
when('/lead',
{module: 'LeadLookup',
controller: 'LeadLkpCtrl',
templateUrl: 'apex/f42_Lead_Lookup'}
).
otherwise(
{redirectTo: '/main'}
);
}]);
This tutorial page may point you in the correct direction docs.angularjs.org/tutorial/step_07
The main things you should look at are:
Module
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
routeProvider
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Controllers
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
the following returns an error in the console "ReferenceError: ThingCtrl is not defined"
var myApp = angular.module('myApp', []);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/things', {templateUrl: 'partial.html', controller: ThingCtrl}).
when('/things/:id', {templateUrl: 'detail.html', controller: ThingCtrl}).
otherwise({redirectTo: '/things'});
}]);
myApp.controller('ThingCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.thing = [
{
'title':'first thing',
'first':'one',
'second': 'two',
'third': 'three'
}
];
}]);
however it works fine when the controller is defined like:
function ThingCtrl($scope, $routeParams) {
$scope.thing = [
{
'title':'first thing',
'first':'one',
'second': 'two',
'third': 'three'
}
]
};
Why does it not work using the modular syntax?
I believe that the issue is here:
when('/things', {templateUrl: 'partial.html', controller: ThingCtrl})
This is telling Angular to point at the ThingCtrl object, which is undefined and causes an error.
Try enclosing the controller name in quotes like this:
when('/things', {templateUrl: 'partial.html', controller: 'ThingCtrl'})
This should allow Angular to properly use dependency injection.
I would like to use proper dependency injection in MyCtrl1to inject the fields of the MyCtrl1.resolve object. I've tried many different combinations of attempting to inject #MyCtrl1.resolve etc. with no luck.
#MyCtrl1 = ($scope, $http, batman, title) ->
$scope.batman = batman.data
$scope.title = title.data
#MyCtrl1.resolve = {
batman: ($http) ->
$http.get('batman.json')
title: ($http) ->
$http.get('title.json')
}
##MyCtrl1.$inject = ['$scope', '$http'] -- commented out because not sure how to inject resolve fields
angular
.module( 'app', [])
.config( ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider)->
$locationProvider.html5Mode(true)
$routeProvider.when('/', {templateUrl: 'index.html', controller: MyCtrl1, resolve: MyCtrl1.resolve})
$routeProvider.otherwise({redirectTo: '/'})
])
angular.bootstrap(document,['app'])
Resolve is a property of a route and not a controller. Controllers would be injected with dependencies defined on a route level, there is no need to specify resolve properties on a controller.
Taking one of your examples (transformed to JavaScript), you would define your controller as always, that is:
MyCtrl1 = function($scope, $http, batman, title) {
$scope.batman = batman.data;
$scope.title = title.data;
}
and then the resolve property on a route:
angular.module('app', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true)
$routeProvider.when('/',{templateUrl: 'index.html', controller: MyCtrl1, resolve: {
batman: ['$http', function($http) {
return $http.get(..).then(function(response){
return response.data;
});
}],
title: ['$http', function($http) {
return //as above
}]
}});
$routeProvider.otherwise({redirectTo: '/'});
}]);
If you want to minify the code using resolve section of routing you need to use array-style annotations - I've included this in the example above.