So I'm trying to use angular routing in my application. The problem is that the route "/" does not get initialized automatically. So I first go to "/" and the main content of the page is empty (the template is not loaded at all), I click the link to /settings and settings are loaded, then I click a link to "/" and this time the template is initialized correctly. So how do I make the thing initialized at the beginning?
Here's my routing configuration:
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
I tried calling $location.url("/profile") from a controller and it did help, but the url has to be changed and I would rather keep the "/"
use otherwise({ redirectTo: "/" })
Update : here how it should be
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
}).otherwise({ redirectTo: '/' });
Related
So I have this code:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'login.html',
controller: 'LoginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'templates/dashboard.html',
controller: 'DashboardController'
})
.state('customers', {
url: '/customers',
templateUrl: 'templates/customers.html',
controller: 'CustomerController'
})
$urlRouterProvider.otherwise('/');
});
Everything works but when I go to login, I still get the base template since I am using ui-view. How can I make the login state on his own? I mean without the base template where the ui-view resides.
So after reading here and there on MEAN, I decided to make my first MEAN application which is pretty small, all seems to work except the routeing to make my app a one-page app. Any help would be much appreciated!
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'authController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'authController'
});
});
Anyway, I adopted a boilerplate navigation bar
<nav class="navbar-fluid navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">IoT</a>
<p class="navbar-text">IoT</p>
<p class="navbar-right navbar-text" ng-hide="authenticated">Login or Register</p>
<p class="navbar-right navbar-text" ng-show="authenticated">Logout</p>
<p class="navbar-right navbar-text" ng-show="authenticated">Signed in as {{current_user}}</p>
</div>
</nav>
And, when I run it on localhost:3000, the homepage address I got instead is
http://localhost:3000/#!/
where I was expecting
http://localhost:3000/#/
And when I clicked on the 'register' link, the address I got is
http://localhost:3000/#!/#%2Fregister
where as I was expecting
http://localhost:3000/#/register
Is that normal? Maybe it's bcs of the version of Angular I was using?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-resource.min.js"></script>
It was all fine before, but then I stripped down the HTML and make the main page pull individual HTML pages one-by-one then this happened.
Change your links from <a href="#/login"> to <a href="#!/login">, <a href="#"> to <a href="#!"> etc..
I also have this issue but changing from a hash to hashbang resolves it for me.
Try this one. I'm not sure this will fix your issue. But please try this one.
Change your route provider by including default parameter.
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'authController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'authController'
})
.otherwise({
redirectTo: '/'
});
});
and provide the links like Login
Try this one:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'authController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'authController'
})
.otherwise({
redirectTo: '/'
});
});
For Sign Out, You should use such as:
<p class="navbar-right navbar-text" ng-show="authenticated">Logout</p>
App.config(['$routeProvider', '$locationProvider', function config($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('')
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'loginController'
})
.otherwise('/');
}]);
will work see https://docs.angularjs.org/api/ng/provider/$locationProvider
I am setting up my angular routes in the app.js as so:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'AboutCtrl',
controllerAs: 'characters'
})
.when('/framedata', {
templateUrl: 'views/framedata.html',
controller: 'FrameDataCtrl',
controllerAs: 'frame'
})
.otherwise({
redirectTo: '/'
});
});
These URLs do work because when I type in localhost:9000/framedata or /characters it displays the view I expect. When I used the navigation bar that defines the links as expected there is a '#%2F' that is added like so: http://localhost:9000/#!/#%2Fcharacters
<ul class="nav navbar-nav">
<li class="active">tekkenMitzu?</li>
<li><a ng-href="#/characters">Characters</a></li>
<li><a ng-href="#/framedata">Frame Data</a></li>
</ul>
I hope this gives sufficient information, please let me know if I should give you some more information, if it is necessary I can upload this to a domain so you can see the 'live' version.
Try this below code
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'AboutCtrl',
controllerAs: 'characters'
})
.when('/framedata', {
templateUrl: 'views/framedata.html',
controller: 'FrameDataCtrl',
controllerAs: 'frame'
})
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);// it will remove the #
});
And your URL having some white space if you remove the space then the %2F will clear
More details, please checkout it
AngularJS converting my ng-href url "slash" into "%2f"
I am building a simple gallery with Angular and I am trying to have a template shown on some route, which is very easy with angular.
some.site/#/gallery
is done with
App.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/gallery', {
templateUrl: 'js/views/gallery/main.htm',
controller: 'galleryCtrl',
controllerAs: 'gallery'
})
.otherwise({
redirectTo: '/'
});
}
]);
But then I want to have a div popup when user clicks on thing and goes to
some.site/#/gallery/thing/1
Note that I still want my gallery to be on the background.
My initial idea was to have that div always hidden unless there's */thing so that I could just get the id like so */thing/:id when needed, but this approach seems rather ugly, because why have that thing hanging in there all the time?
Are there any other, better ways of doing that?
What you can do is set a $routeParam depending on your route, let's say:
if url is /gallery, then 'showPopup' = false
if url is /gallery/thing/:id, then 'showPopup' = true
and then in your html you bind the popup state to $routeParams.showPopup.
To do so, you can set the params directly in your mapping:
App.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/gallery', {
templateUrl: 'js/views/gallery/main.htm',
controller: 'galleryCtrl',
controllerAs: 'gallery',
resolve: {
ignored: function ($route) {
$route.current.params.showPopup = false;
}
}
})
.when('/gallery/thing/:id', {
templateUrl: 'js/views/gallery/main.htm',
controller: 'galleryCtrl',
controllerAs: 'gallery',
resolve: {
ignored: function ($route) {
$route.current.params.showPopup = true;
}
}
})
.otherwise({
redirectTo: '/'
});
}
]);
Hope I helped !
When using parameters in ngRoute and accessing the URL directly (not through a link inside the site), the CSS does not load. All my routes work perfectly except for /chef/:id. I used yeoman's angular generator, and I'm running things using grunt serve.
Here's my Route code:
angular
.module('agFrontApp', [
'configuration',
'LocalStorageModule',
'ngCookies',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '../views/main_view.html',
controller: 'MainCtrl',
controllerAs: 'MainCtrl',
})
.when('/login', {
templateUrl: '../views/login_view.html',
controller: 'LoginCtrl',
controllerAs: 'login',
})
.when('/chefs', {
templateUrl: '../views/chef_list_view.html',
controller: 'ChefListController',
controllerAs: 'chefs',
})
.when('/chef/:id', {
templateUrl: '../views/chef_detail_view.html',
controller: 'ChefDetailController',
controllerAs: 'chef'
})
.when('/receitas', {
templateUrl: '../views/recipe_list_view.html',
controller: 'RecipeListController',
controllerAs: 'recipe'
})
.when('/perfil', {
templateUrl: '../views/perfil_view.html',
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
And here's the controller for /chef/:id:
'use strict';
(function() {
function ChefDetailController($routeParams, $scope, $log, Chefs) {
var vm = this;
Chefs.getChef($routeParams.id)
.then(function(data) {
$log.log('success');
})
.fail(function(data) {
$log.log('something went wrong');
});
}
angular.module('agFrontApp')
.controller('ChefDetailController',
[ '$routeParams', '$scope', '$log', 'Chefs', ChefDetailController]);
})();
What am I doing wrong?
Edit:
Here's chef_detail_view.html: http://pastebin.com/bL5ST01N
You're very likely loading your CSS using a relative url like so
<link rel="stylesheet" href="styles/style.css" />
The problem is in html5mode your chef url is /chef/123 So the browser is trying to load your CSS from
/chef/styles/style.css You'll want to either turn off html5mode or change your stylesheet href to be root relative (e.g. /styles/style.css)