I am using angular.js and I have a module which uses a web service
/* Rest WS Config */
RestangularProvider.setBaseUrl(ENVL.apiEndpoint+'/ig-web/services');
It works fine.
I would like to use the relative way of setting my base URL (beacuse I must not provide a specific configuration per environment) so I tried:
RestangularProvider.setBaseUrl('/ig-web/services');
RestangularProvider.setBaseUrl('./ig-web/services');
But that did not work.
Any ideas ?
Herehunder the complete module file
'use strict';
angular.module('env.config', [])
.constant('ENVL', {
'name': 'development local',
'apiEndpoint': 'http://localhost:8080'
})
.constant('DEVT', {
'name': 'development server',
'apiEndpoint': 'http://domain.dev'
})
.constant('INT', {
'name': 'integration server',
'apiEndpoint': 'http://domain.int'
})
.constant('REC', {
'name': 'recette server',
'apiEndpoint': 'http://domain.rec'
});
var app = angular.module('saisinesApp', [
'ngAnimate',
'ngResource',
'ui.bootstrap',
'toaster',
'angular.css.injector',
'angularFileUpload',
'dialogs',
'ui.router.state',
'ajoslin.promise-tracker',
'cgBusy',
'restangular',
'ngGrid',
'xeditable',
'env.config',
'saisinesAppFilters'])
.constant('_', window._)
.constant('jsPDF',window.jsPDF);
app.config(function ($stateProvider, $urlRouterProvider, RestangularProvider,ENVL) {
/* Rounting config*/
$urlRouterProvider.when('/home', '/home/search');
$stateProvider
.state('auth', {
url: '/',
templateUrl: 'src/auth/authentication.html',
controller: 'AuthCtrl'
})
.state('auth-by-url', {
url: '/:token',
templateUrl: 'src/auth/authentication.html',
controller: 'AuthCtrl'
})
.state('home', {
abstract: true,
url: '/home',
templateUrl: 'src/common/header.html',
controller: 'HeaderCtrl'
})
.state('home.search', {
url: '/search',
templateUrl: 'src/search/search.html',
controller: 'SearchCtrl'
})
.state('home.search-by-siren', {
url: '/search/:siren',
templateUrl: 'src/search/search.html',
controller: 'SearchCtrl'
})
.state('home.create', {
url: '/create',
templateUrl: 'src/create/create.html',
controller: 'CreateCtrl'
})
.state('home.recap', {
url: '/recap',
templateUrl: 'src/recap/recap.html'
});
$urlRouterProvider.otherwise('/');
/* Rest WS Config */
//RestangularProvider.setBaseUrl(ENVL.apiEndpoint+'/ig-web/services');
RestangularProvider.setBaseUrl('./ig-web/services');
});
app.run([
'$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
OK, I hope it will help someone if they have the same problem.
When I was testing in local, I was using a grunt server with the port 8000
But my web services were located on the port 8080 (which corresponds to the ENV constant).
Thus there was no way that my web services could work with the port of grunt if I let the relative path.
However, when using JBOSS and the relative path, it works because now the relative path points to the correct adress.
Thus my correct configuration is:
'use strict';
var app = angular.module('saisinesApp', [
'ngAnimate',
'ngResource',
'ui.bootstrap',
'toaster',
'angular.css.injector',
'angularFileUpload',
'dialogs',
'ui.router.state',
'ajoslin.promise-tracker',
'cgBusy',
'restangular',
'ngGrid',
'xeditable',
'saisinesAppFilters'])
.constant('_', window._)
.constant('jsPDF',window.jsPDF);
app.config(function ($stateProvider, $urlRouterProvider, RestangularProvider) {
/* Rounting config*/
$urlRouterProvider.when('/home', '/home/search');
$stateProvider
.state('auth', {
url: '/',
templateUrl: 'src/auth/authentication.html',
controller: 'AuthCtrl'
})
.state('auth-by-url', {
url: '/:token',
templateUrl: 'src/auth/authentication.html',
controller: 'AuthCtrl'
})
.state('home', {
abstract: true,
url: '/home',
templateUrl: 'src/common/header.html',
controller: 'HeaderCtrl'
})
.state('home.search', {
url: '/search',
templateUrl: 'src/search/search.html',
controller: 'SearchCtrl'
})
.state('home.search-by-siren', {
url: '/search/:siren',
templateUrl: 'src/search/search.html',
controller: 'SearchCtrl'
})
.state('home.create', {
url: '/create',
templateUrl: 'src/create/create.html',
controller: 'CreateCtrl'
})
.state('home.recap', {
url: '/recap',
templateUrl: 'src/recap/recap.html'
});
$urlRouterProvider.otherwise('/');
/* Rest WS Config */
RestangularProvider.setBaseUrl('/ig-web/services');
});
app.run([
'$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
Related
friends, can anybody help.
Angular 1.4.9 make links like this http://domain/#!/product,
but I need links like this http://domain/#!product with out slash.
Code:
var app = angular.module('myApp', [
'ngRoute'
])
.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider, ngMeta) {
'use strict';
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
})
.when('/article/:slug', {
controller: 'ArticleCtrl',
templateUrl: 'views/article.html'
})
.when('/catalog/:category/:subcategory', {
controller: 'CatalogCtrl',
templateUrl: 'views/catalog.html'
})
.when('/product/:category/:subcategory/:product', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.when('/product/:category/:subcategory/:product/:texture', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
]);
I don't think this is a valid URL - http://domain/#!product
It should be http://domain/#!/product or http://domain/product,
To transform your URLs in desired way, it gives you some heads up -
https://docs.angularjs.org/guide/$location
Take the following code. I have a cookie that is created once a user successfully logs in. My API is also already authenticated. What I am looking to do is do a simple check of the cookie before serving up a route, with the only exception of the login route.
angular
.module('pizzaGiants.routes', ['ui.router'])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
// Application Routes
// -----------------------------------
// add check if cookie exists else redirect to login
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'features/login/login.html',
controller: 'loginCtrl'
})
.state('attributes', {
url: '/attributes',
templateUrl: 'features/attributes/attributes.html',
controller: 'attributesCtrl'
})
.state('users', {
url: '/users',
templateUrl: 'features/users/users.html',
controller: 'usersCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'features/signup/signup.html',
controller: 'signupCtrl'
})
.state('roles', {
url: '/roles',
templateUrl: 'features/roles/roles.html',
controller: 'rolesCtrl'
})
.state("fruits", {url: "/fruits",templateUrl: "features/fruits/fruit.html",controller: "fruitCtrl"}).state("colors", {url: "/colors",templateUrl: "features/colors/color.html",controller: "colorCtrl"}).state("contacts", {url: "/contacts",templateUrl: "features/contacts/contact.html",controller: "contactCtrl"})
}]);
Could be like following
app.run([
'$rootScope','$location', '$timeout',
function ($rootScope, $location, $timeout) {
$rootScope.$on('$stateChangeStart', function () {
if (// your condition logic) {
$timeout(function () {
$location.path("/login");
}, 1);
}
});
}
]);
I am unable to change my Url using $state.go but i am getting that page for which i have requested in $state.go , I have also used route.js
angular.module("myApp")
.controller('myController', ['$scope','$state', function ($scope, $state) {
$scope.showDetails = function(data){
if(some true condition){
$state.go("create.preemp");
}
else if(some true condition){
$state.go("create.prepolicy");
}
}
}])
angular.module("myApp")
.config(function ($stateProvider, $routeProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/',
templateUrl: 'signin/signin.html',
controller: 'signinController'
})
.state('create.preemp', {
url: '/create.preemp',
templateUrl: 'preemp.html',
controller: 'preempController'
})
.state('create.prepolicy', {
url: '/create.prepolicy',
templateUrl: 'prepolicy.html',
controller: 'prepolicyController'
})
$urlRouterProvider.otherwise('/');
})
??
Playing around with angular stateProvider, this is my route:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
On bootstrapping I would like to go to state 'test':
app.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$state.go('test');
console.log('app.run');
}]);
These are the controllers:
app.controller('StartCtrl', function($scope) {
console.log('start');
});
app.controller('TestCtrl', function($scope) {
console.log('test');
});
Why is the application routing to the 'start' state ? I would like to go to the 'test' state?
Code reference:http://plnkr.co/edit/FCcL4M?p=preview
You need to change the url for either the test or the start "state", right now they are both the same. I changed the test state url to "/test" and it loaded correctly.
http://plnkr.co/edit/2esV4dbd4ptNSEmwD3g4?p=preview
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}
]);
Just need to add to previous answer : both start and test need to be corrected
to follow standards.
http://plnkr.co/edit/TjDzyL?p=preview
pp.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/start",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
I have an AngularJS app that uses $routeProvider and a $stateProvider. I can get all my routes/states to work apart from /.
Here's my app.js file
var MailStash = angular.module("MailStash", ['ui.compat', 'ngResource', 'ngSanitize', 'ui.directives']).
config(function($stateProvider, $routeProvider, $urlRouterProvider) {
$routeProvider
.when('/', { controller: ListCtrl, templateUrl: '/js/partials/list.html' });
$stateProvider
.state('templates', {
url: '/templates',
abstract: true,
templateUrl: '/js/partials/list.html',
controller: ListCtrl,
})
.state('templates.list', {
// parent: 'templates',
url: '',
views: {
'main_content': {
templateUrl: '/js/partials/templates.new.html',
controller:CreateCtrl,
},
}
})
.state('templates.view', {
parent: 'templates',
url: '/{templateId}',
views: {
'main_content': {
templateUrl: '/js/partials/templates.view.html',
controller: ViewCtrl,
},
},
})
.state('templates.new', {
url: '/new',
views: {
'main_content': {
templateUrl: '/js/partials/templates.new.html',
controller: CreateCtrl,
},
},
})
.state('templates.edit', {
parent: 'templates',
url: '/edit/{templateId}',
views: {
'main_content': {
templateUrl: '/js/partials/templates.edit.html',
controller: EditCtrl,
},
},
})
}
)
.run(
[ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]
);
...
Nothing happens when I go to / but when I go to /#templates the appropriate views and controllers kick in.
Can anyone see what is wrong with my $routeProvider and why going to / is not doing anything?
Why not simply use $urlRouterProvider and route to / ?
$urlRouterProvider.otherwise('/');
Then set a new state for /
$stateProvider.state({
name: 'home',
url: '/',
controller: 'HomeCtrl',
templateURL: 'home.html'
});
You can specify the default route like this
$routeProvider
.when('/templates', { controller: ListCtrl, templateUrl: '/js/partials/list.html' })
.otherwise({ redirectTo: '/templates' });
Hope this will help!
Otherwise is more useful to redirect to an error page, if the url is bad. But you can try to add <base href="/" /> to refer the base location in your index and add $locationProvider.html5Mode(true); after the declaration of routes in your config function to enabled, otherwise you need to add # to the url.
I hope this will help you.