I have using the Angular unsavedChanges Plugin to find the dirty forms and alert the user when he leave the page and state. Plugin working fine but is gives the alert twice. I have changed the UI router config but still the issue not fixed
angular
.module('app', ['unsavedChanges', 'ui.router'])
.config(['$stateProvider', '$urlRouterProvider', 'unsavedWarningsConfigProvider',
function($stateProvider, $urlRouterProvider, unsavedWarningsConfigProvider) {
$stateProvider
.state('admin', {
url: '/dashboard',
abstract: true,
templateUrl: "app/app.html"
})
.state('admin.dashboard', {
url: '/home',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'DashboardCtrl'
})
unsavedWarningsConfigProvider.useTranslateService = false;
}
]);
Related
I have the problem that whenever I refresh the page, a slash is being added to the url. Im being automatically (with timeout) directed to the state 'home' from the state 'intro'.When I go to home, instead of /home, I see /home/ which leads to: Cannot GET /home/.
Ive seen a suggestion somewhere in this forum to add $urlMatcherFactoryProvider.strictMode(false); to fix that, however that doesn't work as well as nothing else I tried. Any ideas?Thanks!
app.config(function ($stateProvider) {
$stateProvider.state('intro', {
url: '/',
templateUrl: 'intro/intro.html',
controller: 'introCtrl'
});
});
app.config(function ($stateProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home/home.html',
controller: 'homeCtrl'
});
});
my app.js file:
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);
app.config(function ($urlRouterProvider, $locationProvider,$urlMatcherFactoryProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
});
use this code
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app.intro', {
url: '/',
templateUrl: '/intro/intro.html',
controller: "introCtrl"
})
.state('app.home', {
url: '/home',
templateUrl: '/home/home.html',
controller: "homeCtrl"
})
$locationProvider.html5Mode(true);
});
What am I missing? Why would the Home template NOT load via .otherwise('/')? If I link to href="/#/" or ui-sref="home" everything works fine. However the Home template does NOT load if I try $urlRouterProvider.otherwise is working. The console does not show any errors.
Another interesting point is the URL is never modified when the first page loads. My other apps usually redirect from http://www.domain.com to http://www.domain.com/#/. This app is not showing the updated URL.
I have tried this in multiple browsers. No extensions or plugins are active.
Here are my routes:
(function () {
'use strict';
angular
.module('myapp')
.config(configRoutes);
configRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
function configRoutes ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/partials/home.html'
})
.state('login', {
url: '/login',
templateUrl: 'app/partials/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'app/partials/signup.html',
})
.state('logout', {
url: '/logout',
template: null,
controller: 'LogoutCtrl'
})
.state('profile', {
url: '/profile',
templateUrl: 'app/partials/profile.html',
});
}
})();
I have used $stateProvider in my angular application for routing. Prob I'm facing here is, on logout I could navigate to login page,but the login controller is not getting reloaded as expected. Please find below the $stateProvider configured in my app
in controller.js
$location.url('/login');
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginController'
})
.state('charts', {
url: '/charts',
templateUrl: 'templates/chart-screen.html',
controller: 'ChartController'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Controller is not reloaded because of caching, please refer below link:https://stackoverflow.com/a/31725101/6071335
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
Pretty simple thing I'm trying to do. Fairly new to angular.
I just want to set the initial page that loads to be something other than the main that it is set to out of box when I generate an application
In your config (presumably app.js with your scaffold), change the templateUrl to be the template/view that you desire.
eg:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/someOtherTemplate.html',
controller: 'MainCtrl'
})
...
});
If you're using ui-router then it's similar:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/someOtherTemplate.html'
})
});
If you're using the angular router then it'll be something like this:
angular.module('yourMainAppModule').config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl: "youTemplate.html",
controller: "YourHomeController"
})
});
You can read more about setting up your app's routes by looking at when() in the Angular Docs.
Above methods where not working for me, giving the url field an empty value worked great with ui-router :
$stateProvider
.state('home', {
url: '',
templateUrl: 'views/homepage.html',
controller: 'AppCtrl'
})