I am working on SPA using AngularJS, the app divided into modules, and each modules has its own route configuration, my question here what is the order that angular use to build its route table?
will it mix all routes from different modules into one route table?
What if there is a path (when("/")) founded twice (check code below)?
In this snippets, I have "/" path which is found in main and home modules:
(function () {
"use strict";
// create main module and inject it with home module:
angular.module("main", [
"home"
]);
//route configuration for main module:
angular.module("main").config([
"$routeProvider", function($routeProvider) {
$routeProvider
.when("/",
{
templateUrl: "/app/views/Main.html",
controller: "MainController"
}).when("/dioe",
{
templateUrl: "/app/stepTwo_dioe/goe/views/goe.html",
controller: "GOEController"
}).otherwise({ redirectTo: "/" });
}
]);
})();
and the home module is pretty the same:
(function () {
"use strict";
angular.module("home", []);
//route configuration for main module:
angular.module("home").config([
"$routeProvider", function($routeProvider) {
$routeProvider
.when("/",
{
templateUrl:"/app/home/views/home.html",
controller: "HomeController"
}).otherwise({ redirectTo: "/list" });
}
]);
})();
Related
Why "main" is not being displayed in the URL ? Here is the Plunker.
index2.html is the working file. I have modified index2.html to index.html to include routing but it's not working.
app.js has routing configuration
(function() {
var app1 = angular.module('plunker', ["ngRoute"]);
app1.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "ControllerFile.js"
})
.otherwise({
redirectTo: "/main"
})
})
} ());
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.
How to pass a fields variable to directive in ng route configuration, Or in another phase?
.when('/test',{template:"<my-directive fields=field></my-directive>"})
How to assign param to directive in routing phase?
Make sure to include your directive when defining the module dependencies:
var app = angular.module('sampleApp', [
'ngRoute',
'myDirective' // here, you need to include your directive module
]);
Then, define your routes:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', { template: "This is the default Route" })
.when('/test', {
template: '<my-directive fields="field"></my-directive>',
controller: 'testController'
})
.otherwise({ redirectTo: '/' });
}]);
And a controller:
app.controller('testController', ['$scope', function($scope) {
$scope.field = { your: "data here" };
}]);
I am building an angular app with several modules close to john papas styleguide. Following that, I have several independent modules with their own route definitions and others with interceptors. My Problem is: when I run it on Cordova / Android, state definitions only seem to work, when I put them in the main module. In my Browser the work. Did anybody come over this issue yet?
E.g. this works on both local browser and on device with cordova:
//main.js
'use strict';
angular.module('main', [
'app.core',
'auth'
])
.config(function ($stateProvider, $urlRouterProvider) {
// ROUTING with ui.router
$urlRouterProvider.otherwise('/main/list');
$stateProvider
// this state is placed in the <ion-nav-view> in the index.html
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'main/templates/menu.html',
controller: 'MenuCtrl as menu'
})
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
/* more states here */
This only works in local browser (main module same as above):
//auth.routes.js
'use strict';
angular
.module('auth.routes')
.config(config);
function config ($stateProvider) {
$stateProvider
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
}
//auth.module.js
'use strict';
angular.module('auth', [
'app.core',
'auth.constants',
'auth.routes',
'auth.controllers',
'auth.services',
'auth.interceptors',
'auth.config'
]);
angular.module('auth.constants', []);
angular.module('auth.routes', []);
angular.module('auth.controllers', []);
angular.module('auth.services', []);
angular.module('auth.interceptors', []);
angular.module('auth.config', []);
Error says that the state was not found on navigation.
Try
angular
.module('test', [])
.config(config);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when('/login', {
title: 'Calculators',
templateUrl: 'modules/views/login.html',
controller: ''
});
}
remove state provider ,check for simple routing it will work.
I have the following in my app.js file:
// Declare app level module which depends on filters, and services
var APP = angular.module('DiagsDashboard', ['ngRoute', 'DiagsDashboard.filters',
'DiagsDashboard.services', 'DiagsDashboard.directives', 'DiagsDashboard.controllers']);
APP.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/views/shared/Error.html' })
.when('/Error', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard/Error', { templateUrl: '/views/shared/Error.html' })
.otherwise({ templateUrl: '/views/shared/Error.html' });
});
But when I browse to:
- /localhost/#
- /localhost/#/DiagsDashboard/
- /localhost/#/DiagsDashboard/Error
- /localhost/#/error
The whole page re-loads and everything refreshes.
I've copied this code from a project where it works and I have angular-route.js included.
This is an MVC application located within IIS as a sub-application at /localhost/DiagsDashboard.
The issue was simply I hadn't give ng-app a name in the markup. I'd read that it is possible to use ng-app without a name but obviously that isn't the case.