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.
Related
I can't seem to get my angular app to work with routes. The basic app itself works but breaks the moment I try to add in routes
Here's a link to the plunker: broken routes
var app = angular.module('appModule', ['ui.router']).config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
controller: 'homeController'})}])
app.controller('homeController', ['$scope', function($scope) {$scope.hello = "flarg";}])
and here is the the same simple app without routes link to plunker here: working app
You configuration should be like this,
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html",
controller: 'homeController'
});
});
myApp.controller('homeController', ['$scope', function($scope) {
$scope.hello = "flarg";
}]);
DEMO
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" });
}
]);
})();
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.
Im new to angular and I tried to generate a project with the yeoman angular-fullstack generator. I want to add a new url /portfolio so I duplicated the main-folder on the same level and renamed it to "portfolio".
I've created three files:
1) portfolio.controller.js 2) portfolio.html 3) portfolio.js
I've included the js-files in the index.html for the client like this:
<script src="app/portfolio/portfolio.controller.js"></script>
<script src="app/portfolio/portfolio.js"></script>
And the following code can be found in the controller:
'use strict';
(function() {
class PortfolioController {
constructor($http, $scope, socket) {
console.log("working");
}
}
angular.module('myPortfolioApp')
.controller('PortfolioController', PortfolioController);
})();
And this is from the portfolio.js:
'use strict';
angular.module('myPortfolioApp')
.config(function($stateProvider) {
$stateProvider
.state('portfolio', {
url: '/portfolio',
templateUrl: 'app/portfolio/portfolio.html',
controller: 'PortfolioController',
controllerAs: 'portfolio'
});
});
you are not declaring a new module, you are missing the array of dependencies:
angular.module('myPortfolioApp',[]) //NOTICE THE BRACKETS
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('portfolio', {
url: '/portfolio',
templateUrl: 'app/portfolio/portfolio.html',
controller: 'PortfolioController',
controllerAs: 'portfolio'
}]);
});
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',
})