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',
})
Related
I am using gulp to add my templates into the production js file so I can access them via $templateCache. Everything works well for my directives but the templates in my state provider are not working. Its seems like the $templateCache object is not available.
Concatenated JS File. This is placed at the bottom of the file:
angular.module("barmehealth").run(["$templateCache",
function($templateCache {
$templateCache.put("app/views/register.html","<div>Register</div>");
$templateCache.put("app/modules/framework/framework.template.html","<div class>Framework Template</div>");
}
]);
I have tried both approaches below and neither work. Also there is no error. The view simply loads the index page with just gives me duplicated content.
Using templateUrl
(function () {
'use strict';
angular.module('barmehealth', ['framework', 'ui.router'])
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('register', {
url: '/register',
templateProvider: function($templateCache) {
return $templateCache.get('/app/views/register.html');
}
});
});
}());
Using templateProvider
(function () {
'use strict';
angular.module('barmehealth', ['framework', 'ui.router'])
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/app/views/register.html'
});
});
}());
You have added extra / (slash) which isn't required there, by removing it you can desired template in templateProvider function.
Use
return $templateCache.get('app/views/register.html');
Instead of
return $templateCache.get('/app/views/register.html');
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 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.
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 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.