I have two modules in my application. The requirement is that I need to navigate from one module to another. Is it possible?
The two modules are sol user and sol cutomer are 2 different module. This way it is not working? Am i doing something wrong? Any other alternative please
The code which i am using is given below but it is not displaying anything
'use strict';
(function () {
angular.module('sol.user')
.config(StateConfig);
StateConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
alert("user-state");
function StateConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('/customer/search', '/user');
$stateProvider
.state('home.user',{
url:'/user',
controller:'sol.user.UserController',
controllerAs: 'userCtrl'
})
.state('home.search', {
url: '/customer/search',
templateUrl: 'views/customer/search/search.html',
controller: 'sol.customer.search.SearchCtrl',
controllerAs: 'searchCtrl'
})
}
})();
Related
how to write different modules with their own routing?
i have an angular app and it has different modules.i am going to write for each of them, specific route file, but i got this error
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=routeServiceProvider%20%3C-%20routeService
it is my code :
sample.module.js
angular.module('app.sample', []);
sample.route.js
angular
.module('app.sample')
.run(appRun);
/* #ngInject */
function appRun (routeService) {
routeService.configureRoutes(getRoutes());
}
function getRoutes () {
return [ {
url: '/sample',
config: {
templateUrl: 'sample.html'
}
}
];
}
i already add ngRoute and inject these files in index.html file
To achieve such project structure, ui-router is the best way to go. It is a separate library so you have to include into your project as a dependency.
Here are the snippets that will be useful for your case
dashboard.module.js
angular.module('app.dashboard', ['ui.router']);
dashboard.router.js
angular.module('app.dashboard')
.config(routerConfig);
routerConfig.$inject = ['$stateProvider'];
function routerConfig($stateProvider) {
$stateProvider
.state('state1', {
url: '/state1',
templateUrl: 'url/to/state1.html',
controller: function () {
// controller code here
}
})
.state('state2', {
url: '/state2',
templateUrl: 'url/to/state2.html',
controller: function () {
// controller code here
}
});
}
sample.module.js
angular.module('app.sample', ['ui.router']);
sample.router.js
angular.module('app.sample')
.config(routerConfig);
routerConfig.$inject = ['$stateProvider'];
function routerConfig($stateProvider) {
$stateProvider
.state('state3', {
url: '/state3',
templateUrl: 'url/to/state3.html',
controller: function () {
// controller code here
}
})
.state('state4', {
url: '/state4',
templateUrl: 'url/to/state4.html',
controller: function () {
// controller code here
}
});
}
Lastly, app.module that connects all these modules
app.module.js
angular.module('app', [
/*
* sub-modules
*/
'app.dashboard',
'app.sample'
]);
To sum up, you have two independent sub-modules (app.dashboard and app.sample) with their own routing logic and one module (app) that wraps them into one angular application.
$stateProvider, service provided by ui.router, is used for registering states.
Additional info
Since your application is modular, you are probably going to need nested routing which is greatly supported by ui.router. Read docs to get more information on nested states.
Update
However, if you still want to stick with ngRoute, this and this clearly explain how to achieve the same result.
Hi in my app I have two states called hello and createHello
Modules related to thees two states are given below.
createHello Module
(function(module){
'use strict';
module.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('createHello', {
url: '/hello/create',
templateUrl: 'app/createHello/createHello.html',
controller: 'createHello'
});
}
]);
})(angular.module('createHello', ['header', 'ui.router', 'timeliner','common']));
hello Module
(function (module) {
'use strict';
module.config(['$stateProvider',
function ($stateProvider) {
$stateProvider.state('hello', {
url: '/hello/{id}',
templateUrl: 'app/hello/hello.html',
controller: 'hello',
resolve: {
.....
}
});
}
]);
})(angular.module('hello', ['header', 'ui.router', 'helloTimer', 'logger', 'timeliner', 'common']));
Any url pattern of /hello/xxxx will go to the hello state. I want this specific url (/hello/create) to go to the createHellostate. At the moment it will also go to the hello state. Any advice on how to solve this issue?
In this case you should used nested states.
module.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('hello', {
url: '/hello',
abstract: true,
template: '<ui-view/>'
})
.state('hello.create', {
url: '/create',
templateUrl: 'app/createHello/createHello.html',
controller: 'createHello'
})
.state('hello.display', {
url: '/:id',
templateUrl: 'app/hello/hello.html',
controller: 'hello'
});
}
]);
Note that routing is done on "first match", so you will need to have your /hello/create route declared before the /hello/:id route.
You can read more on how nesting works here:
https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
In the example above I used an abstract parent state.
I'm developing an web app using AngularJS with uiRouter. I developed my route configuration as follows:
(function () {
'use strict';
var module = angular.module('app', ['ngMaterial', 'ui.router']);
function Config($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('Home', {
url: '/',
templateUrl: 'Partials/homeview.html',
controller: 'homeCtrl'
}).state('Table', {
url: '/tableview',
templateUrl: 'Partials/tableview.html',
controller: 'tableCtrl'
}).state('List', {
url: '/listview',
templateUrl: 'Partials/listview.html',
controller: 'listCtrl'
}).state('New', {
url: '/new',
templateUrl: 'Partials/new.html',
controller: 'newCtrl'
}).state('Edit', {
url: '/edit/:index',
templateUrl: 'Partials/edit.html',
controller: 'editCtrl'
});
}
Config.$inject = ["$urlRouterProvider", "$stateProvider"];
module.config(Config);
}());
The thing in some controller passed to the view the code is duplicated, so I would like to know if there is a way to pass 2 controllers to the view at the same time or if there is a way to create a separate file with that specific part of the duplicated controller and pass it as Dependency Injection in the desired controllers.
You can't have two controllers linked to a uiRouter route. But you could certainly make a service or factory that includes your universal functionality. (See angular.service vs angular.factory for more research.)
var app = angular.module('app',[])
app.service('myFunctions',function() {
this.addNumbers = function(a,b) {
// calculate some stuff
return a+b;
}
}
app.controller('myController',function(myFunctions){
myFunctions.addNumbers(2,2); // 4
})
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 am trying to create a new state in angular using ngRouter.
I have an index.route.js file that contains the following:
(function() {
'use strict';
angular
.module('testApp')
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
})
.state('tools', {
url: '/tools/:category',
templateUrl: 'app/tools/tools.html',
controller: 'ToolsCtrl',
controllerAs: 'tsCtrl'
});
$urlRouterProvider.otherwise('/');
}
})();
Then, I have created a tools.html and a tools.controller.html.
tools.html:
Hello World
tools.controller.js:
(function(){
'use strict';
angular
.module('testApp')
.controller('ToolsCtrl', ToolsController);
/** #ngInject */
function ToolsController(){
var ctrl = this;
ctrl.tools = {};
//TBD: more code.
}
})();
The problem is that whenever I go to for example http://localhost:3000/tools/maps, the browser complains that it can't find some of the js files that are suppose to be linked to the project. Now, the link it shows contains the state, for example instead of searching for bootstrap in http://localhost:3000/app/index.route.js it searches for it in http://localhost:3000/tools/app/index.route.js. Why is that?
I have used Yeoman with the gulp-angular generator in order to create the project.