I'm trying to use $cookies in route js page, is there anyway to use this in route? I have $cookies.get('token') in route js page but got error. I have put $cookies inside function. Is there anything I missing, or is $cookies can't use in route js?
codes:
/* VIEW LOADS HERE */
MainCtrl.config([ '$stateProvider','$urlRouterProvider','$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider, $cookies){
// Redirect any unmatched URL
$urlRouterProvider.otherwise('/');
// $cookies.get('token');
if(1==1){
// Checkout : Sign In
$stateProvider
.state('checkout-signin', {
url: '/checkout/signin',
templateUrl: 'app/views/checkout.signin.html',
controller: 'CartFormController',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MainCtrl',
files: [
'app/controllers/cart-form.controller.js'
]
});
}]
}
})
}
}]);
thanks!
Related
I'm using adal.js with ui-router and believe I have everything configured correctly. Unfortunately, when adding requireADLogin to my states, nothing happens and I get the error Failed to load template: ./dashboard.html (HTTP status: undefined undefined)
Auth module
angular
.module('components.auth',
[
'ui.router',
'AdalAngular'
])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function($httpProvider, adalProvider) {
adalProvider.init({
instance: 'https://login.microsoftonline.com/',
...
// these are components that can be loaded such as nav without needing authentication
anonymousEndpoints: ['./root.html', './app.html', './app-nav.html', './app-sidebar.html']
},
$httpProvider);
}]);
Dashboard module
var dashboard = {
bindings: {
//
},
templateUrl: './dashboard.html',
controller: 'DashboardController'
};
angular
.module('components.dashboard')
.component('dashboard', dashboard)
.config(['$stateProvider', 'adalAuthenticationServiceProvider', function ($stateProvider, adalProvider) {
$stateProvider
.state('dashboard', {
parent: 'app',
url: '/dashboard',
component: 'dashboard',
requireADLogin: true,
resolve: {
}
});
}]);
According to chrome debug tools, the application never even attempts to be redirected to an auth portal:
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.
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.
My state configuration goes something like this:
.config(function ($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.facebook({
clientId: '16250xxxxxx',
scope: 'user_friends'
});
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('core', {
abstract: true,
template: '<ui-view>',
resolve: {
'authStatus' : function($auth, $q, User) {
var defer = $q.defer();
$auth.authenticate('facebook').then(function(result) {
User.update(result.data.user);
defer.resolve();
});
return defer.promise;
}
}
})
.state('home', {
parent: 'core',
url: '/home',
templateUrl: 'app/home/home.html'
})
....
.... other states
When my application loads, it enters the resolve block of 'core' state twice.
This causes the facebook authentication window to open twice..
Any clue why it would execute the core state twice ?
Found the reason for this occurence.
The satellizer $auth service would redirect to a default url upon resolving the authentication.
I simply had to reset that to '/home' in the config section of angular app
$authProvider.loginRedirect = '/home';
Before when not using Typescript I was adding my ui-router state information like this:
app.config([
'$httpProvider',
'$locationProvider',
'$sceProvider',
'$stateProvider',
appConfig
]);
function appConfig(
$httpProvider,
$locationProvider,
$sceProvider,
$stateProvider
) {
$locationProvider.html5Mode(true);
$sceProvider.enabled(false);
var admin = {
name: 'admin',
url: '/admin',
views: {
...
}
};
Now I am using Typescript I assume I should code this into a class. But how can I add the class to my app? I already have this code where I added a controller:
var app = angular.module('app',
[
])
.controller('appController', AppController);
I tried to add the state information as a .config but it appears this only accepts a function as the argument.
Can someone tell me how I can add my state information for ui-router to my app?
This is the way I am defining the ui-router states .. in typescript (as other parts are in TS...):
module MyModule
{
export class MyConfig
{
constructor(private $stateProvider: ng.ui.IStateProvider
, private $urlRouterProvider: ng.ui.IUrlRouterProvider
... // other dependencies)
{
this.init();
}
private init(): void
{
this.$stateProvider.state("App", <ng.ui.IState>
{
abstract: true,
.... // more settings
});
// more states
}
}
}
angular.module('MyModule')
.config(
["$stateProvider", "$urlRouterProvider", // more dependencies
($stateProvider, $urlRouterProvider) =>
{
return new MyModule.MyConfig($stateProvider, $urlRouterProvider);
}
]);
I agree there is no advantage by using a class. However you can use TypeScript for the config and have type definitions (intellisense + compile time checking), no need to use javascript directly either.
I have the app configuration and the ui-router configuration in the same file app.config.ts
((): void => {
'use scripts';
angular
.module('app')
.config(config);
config.$inject = [
'$locationProvider',
'$stateProvider',
'$urlRouterProvider'
];
function config($locationProvider: ng.ILocationProvider,
$stateProvider: angular.ui.IStateProvider,
$urlRouterProvider: angular.ui.IUrlRouterProvider) {
//html5 removes the need for # in URL
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$urlRouterProvider.otherwise('/');
//angular-ui-router for multiple views
$stateProvider
.state('index', <ng.ui.IState>{
url: "/",
views: {
"viewA": {
templateUrl: "app/home/homenav.html"
},
"viewB": {
templateUrl: "app/home/home.html"
}
}
});
//more states here.
}
})();
You wouldn't gain an advantage from using a class here because you don't need to use this or add properties to it in the config function. Just use a function like its JavaScript (TypeScript won't complain).