Angular UI Router separate files - angularjs

I'm trying to separate my routes into separate files but having problems getting it to load, but not getting any error information. This is in an Ionic tabs application which uses Angular UI Router.
My project is split into separate apps
main-routes.js
main-controllers.js
main-routes-end.js
app1
- routes.js
- controllers.js
app2
- routes.js
- controllers.js
Here are my routes JS files for the routes.
// main-routes.js
angular.module('myproj.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
});
// app1/routes.js
angular.module('myproj.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.odometer', {
url: '/home/odometer',
views: {
'tab-home': {
templateUrl: 'templates/home/odometer.html',
controller: 'OdometerCtrl'
}
}
})
});
// app2.js
angular.module('myproj.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab.messages', {
url: '/messages',
views: {
'tab-messages': {
templateUrl: 'templates/tab-messages.html',
controller: 'MessagesCtrl'
}
}
});
});
// main-routes-end.js
angular.module('myproj.routes', [])
.config(function($urlRouterProvider) {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/home');
});
I've included these files in my index.html in the following order:
<script src="js/routes.js"></script>
<script src="js/app1/routes.js"></script>
<script src="js/app2/routes.js"></script>
<script src="js/routes-end.js"></script>
When I have all the routes in the js/routes.js file it works fine, but when I try to separate them out the screens don't render and unfortunately I don't get any errors in the console. I'm using a similar struture for controllers, which works fine, but I'm having problems with the routes. Any ideas?

Your main-routes.js should only have the module definition like angular.module('myproj.routes', [])
In other *.route.js you should js used the module create by the main-routes.js. No need to create a new module again & again.
Basically your problem is, you are reinitializing your myproj.routes module again & again which is flushing out old component(here its states) registered to it.
Make sure you create module once & Then you should use angular.module('myproj.routes') module to append the states to its config block.

Related

Angular UI-Router childs

I have an app.config with UI-Router. It has a login page with it's controller, recoverLogin and I want to put a template with footer, header and more stuff with new states that could be loaded into the template (in an especificplace).
My module is:
var app = angular.module("app", [
"ui.router",
"pascalprecht.translate"
]);
My routes are;
app.config(function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state("login", {
url: "/login",
templateUrl: "views/accessControl/login.html",
controller: "loginCtrl"
});
$stateProvider
.state("recoverLogin", {
url: "/recoverLogin",
templateUrl: "views/accessControl/recoverLogin.html",
controller: "recoverLoginCtrl"
});
$stateProvider
.state("template", {
url: "/template",
templateUrl: "views/templates/template.html",
controller: "templateCtrl"
})
.state("template.dashboard", {
url: "/dashboard",
templateUrl: "views/dashboard/dashboard.html",
controller: "dashboardCtrl"
})
$urlRouterProvider.otherwise("login");
})
I have in my index <ui-view></ui-view> for the place of the loadings and another <ui-view></ui-view> in template.html int he place where I want to load more stuff like dashboard.html, but this doesn't works. it loads dashboard.html without the template created in template.html. I have founded lot of documentation that doesn´t works for me. Any Idea?
Here there are a plunker example of the idea: https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview
There is updated plunker and working plunker.
The template of the mainTemplate state is now lookin like this:
place for main:
<div ui-view="main"></div>
place for other:
<div ui-view="other"></div>
so it has two (could be more) places for more stuff. And this is the state redefined:
.state("mainTemplate.dashboard", {
name: "main",
url: "/dashboard",
views: {
'main' : {
templateUrl: "dashboard.html",
controller: "dashboardCtrl"
},
'other' : {
template: "<h2>other view</h2>",
}
}
});
What we can see is views : {} object being used to defined multiple content for more targets. Read about that more details here:
Angular UI Router - Nested States with multiple layouts
Nested states or views for layout with leftbar in ui-router?
play or observe the changes here

Ui-router not working on startup

I have set up within angular 1.5 the Ui-router as follows:
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('blank', { url:'/blank', templateUrl: 'home/blank.html' })
`enter code here` .state('verify', { url:'/verify/:type', templateUrl : 'update/verify.html', controller: function($scope, $stateParams, general) { general.verifyemail($stateParams.type);} })
.state('home', { url:'/', templateUrl: 'home/home.html' })
.state('about', { url:'/about', templateUrl: 'about/about.html' })
.state('faq', { url:'/faq', templateUrl: 'faq/faq.html' })
.state('exercise', { url:'/exercise', templateUrl: 'practice/exercise.html' })
.state('levels', { url:'/levels', templateUrl: 'practice/level.html' })
}]);
the router works when the app is already started but if you extend the url to include the path i.e. myapp/about and paste the url into a new browser window, the browser will open the app but go to the home page. If you paste the same url into the page already loaded, it goes to the right state.
I've obviously set it up wrong but I can't figure out why.
Have you tried to use # before route name?
Like: myapp/#/about

angular ui-view nested routing

I have a nested ui-route in my application. The index page (root page), works, but not the nested pages.
Here is my app.js
var app = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('index',
{
url: '/index',
templateUrl: 'index.html'
})
.state("index.salesorder",
{
url: '/salesorder',
views: {
'mainlayout': {
templateUrl: 'partials/salesorder.html'
}
}
});
});
In my index.html, I have the div with ui-view attribute
<div ui-view="mainlayout"> </div>
I have also added the necessary scripts for angular, and ui-route. I do not get any errors in the console. But the salesorder does not show. I get to see the index though.
Your second state index.salesorder is a child state of index. Do you have the ui-view nested correctly? It looks like you might need 3 levels of ui-views.
try this:
var app = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state("salesorder",
{
url: '/salesorder',
views: {
'mainlayout': {
templateUrl: 'partials/salesorder.html'
}
}
});
});
main.html:
<div ui-view></div>
salesorder.html:
<div ui-view="mainlayout"></div>

Angular behaving differently on Cordova

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.

AngularJS Modular - UI-Router doesn't work

i am trying to move my old angular system to angular modular system(detailed info in :johnpapa/angular-styleguide · GitHub).
I see no error on console or somewhere else but still ui-router doesn't to its job..
routes.js
(function() {
'use strict';
angular
.module('app')
.config(routeConf);
function routeConf($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('mainMenu', {
//url: '/index',//causes navigation problems
templateUrl: 'testing/pages/mainmenu.html',
})
.state('index', {
//url: '/start',//causes navigation problems
templateUrl: 'try.html',
})
.state('terminal', {
//url: '/start',//causes navigation problems
templateUrl: 'testing/pages/terminal.html',
});
}
})();
and script.js(app)
(function() {
'use strict';
angular
.module('app', [
'ui.router'
]);
})();
http://plnkr.co/edit/VzAsH61OaZ97tyMhKkDJ?p=preview
You didn't initialize angular. You need to put something like:
<html ng-app="app">
http://plnkr.co/edit/NzqnTwkk1SqkTfwAWvQM?p=preview
Also, you actually have to put something at the default route - in this case '/'.
So I directed your 'try.html' page to that spot.
.state('index', {
url: '/',
templateUrl: 'try.html',
})

Resources