Let's say I have a page with URL http://example.com/blogs/lorem-ipsum
If user is signed in and owner of the post, they have the inline option to edit SLUG(or name which is generating the slug).
Question is, if they do edit the SLUG, how can I dynamically update the lorem-ipsum in the URL?
Below is the Route code, I am using UI Router
app.config([
"$stateProvider", "$urlRouterProvider", "$locationProvider", function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise("/");
$stateProvider.state("root", {
url: "/",
templateUrl: "root.html"
}).state("root.blogs", {
url: "^/blogs",
views: {
'content#root': {
templateUrl: "blogs/index.html",
controller: "BlogsController"
}
}
}).state("root.blogs.show", {
url: "^/blogs/:slug",
views: {
'content#root': {
templateUrl: "blogs/show.html",
controller: "BlogsController"
}
}
});
}
]);
Related
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',
});
}
})();
mainApp.config(['$stateProvider', '$routeProvider', '$urlRouterProvider', '$httpProvider', '$locationProvider',
function($stateProvider, $routeProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('page', {
abstract: true,
url: '/newgmr/admin',
views: {
'home': {
template: '<div ui-view="body"></div>'
}
}
}).state('page.login', {
url: '/',
views: {
'body#page': {
templateUrl: 'mainApp/landingPage/login.html',
controller: 'loginController'
}
}
})
.state('page.forgotpassword', {
url: '/forgot-password',
views: {
'body#page': {
templateUrl: 'mainApp/landingPage/forgotPassword.html',
controller: 'forgotPasswordController'
}
}
})
.state('page.resetpassword', {
url: '/reset',
views: {
'body#page': {
templateUrl: 'mainApp/landingPage/resetPage.html',
controller: 'resetPasswordController'
}
}
})
.state('admin.dashboard', {
url: '/dashboard',
views: {
'header#admin': {
templateUrl: 'mainApp/dashboardPage/header.html'
},
'leftPane#admin': {
templateUrl: 'mainApp/dashboardPage/leftPane.html',
controller : 'leftSidePaneController'
},
'body#admin': {
templateUrl: 'mainApp/dashboardPage/tabHolder.html'
},
'footer#admin': {
templateUrl: 'mainApp/dashboardPage/footer.html'
}
}
});
$urlRouterProvider.
otherwise('/');
I am newbie to angular. When I give, localhost/newgmr/admin it loads my app. But when I try to navigate to any other state, say forgot-password screen by typing localhost/newgmr/admin/forgot-password into the browser's url and hit enter, the app shows 404 page. However, I can achieve this by clicking on a link which will call the state "page.forgotpassword". I understand that this happens because there is no actual directory like forgot-password and there is no index.html in that location either. So, please help me how to achieve this. User must be able to navigate to a state by typing the url as well.
If the data provided is not enough, please let me know.
I would like to configure my routes to be able to accept any integer after its' URL.
For example,
/product/id/1242
This integer will be accessed by the API factory as a value to be queried by the API.
I have read doc's on setting up routes, but haven't been able to do to it. If i enter a URL with an integer, it just redirects to the login page.
angular.module('myapp123.routes', [])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
//$location.path('/product').search('queryStringKey', value).search( ...);
$stateProvider
.state('login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'app/core/login/login.html'
}
},
controller: function ($ionicHistory, $scope) {
console.log('Clearing history!');
$ionicHistory.nextViewOptions({
historyRoot: true,
disableBack: true
});
}
})
.state('product', {
url: '/product',
when:('/product/id/product_id')
views: {
'menuContent': {
templateUrl: 'app/components/product/product.html'
}
}
})
According to the docs This should do the trick. [0-9] limits the product Id to numbers.
.state('product', {
url: '/product/id/{productId:[0-9]}',
views: {
'menuContent': {
templateUrl: 'app/components/product/product.html'
}
}
Thanks- wasn't able to get your version working for some reason.
A work-around I've found, which works:
.state('product', {
url: '/product/id/:product_id',
templateUrl: 'app/components/product/product.html',
controller: function($scope, $stateParams) {
$scope.product_id = $stateParams.product_id;
}
})
I'm trying to redirect after login to a specific page in Meteor using AngularJS. But somehow it is not working. After login Meteor.user() is returning null. Because of this every time it is routing to messages page only. I have seen this example from one of the forums and developed on top of that.
angular.module("jaarvis").run(["$rootScope", "$state", "$meteor", function($rootScope, $state, $meteor) {
$meteor.autorun($rootScope, function(){
if (! Meteor.user()) {
console.log('user');
if (Meteor.loggingIn()) {
console.log('loggingIn ' + Meteor.user()); -- returning null
if(Meteor.user()) {
$state.go('onlineusers');
} else {
//On login
$state.go("messages");
}
}
else{
console.log('login');
$state.go('login');
}
}
});
}]);
Routes declared as below.
angular.module('jaarvis').config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.ng.html',
controller: 'LoginCtrl'
})
.state('onlineusers',{
url: '/onlineusers',
templateUrl: 'client/onlineusers/onlineusers.ng.html',
controller: 'OnlineUsersCtrl'
})
.state('messages', {
url: '/messages',
templateUrl: 'client/chats.ng.html',
controller: 'ChatCtrl'
})
});
$urlRouterProvider.otherwise("/messages");
}]);
Logging using below snippet of code.
<meteor-include src="loginButtons"></meteor-include>
Michael is probably right about the root cause of the problem, but I think that a better alternative is provided by the the authentication methods of Angular-Meteor.
What you are going to want to do is to force the resolution of a promise on the route. From the Angular-Meteor docs (i.e. a general example...):
// In route config ('ui-router' in the example, but works with 'ngRoute' the same way)
$stateProvider
.state('home', {
url: '/',
templateUrl: 'client/views/home.ng.html',
controller: 'HomeController'
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
});
Your specific code would look something like:
angular.module('jaarvis').config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.ng.html',
controller: 'LoginCtrl'
})
.state('onlineusers',{
url: '/onlineusers',
templateUrl: 'client/onlineusers/onlineusers.ng.html',
controller: 'OnlineUsersCtrl',
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
})
.state('messages', {
url: '/messages',
templateUrl: 'client/chats.ng.html',
controller: 'ChatCtrl',
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
})
});
$urlRouterProvider.otherwise("/messages");
}]);
And then on your ChatCtrl and OnlineUsersCtrl controllers, you would add currentUser as one of the variables to inject, like:
angular.module("rootModule").controller("ChatCtrl", ["$scope", "$meteor", ...,
function($scope, $meteor, ..., "currentUser"){
console.log(currentUser) // SHOULD PRINT WHAT YOU WANT
}
]);
You might also want to consider the $meteor.requireUser() promise as well, and then send the user back to the login page if the promise gets rejected. All of this is documented very well on the angular-meteor website.
Good luck!
It could be that the user object hasn't loaded yet. You can try:
if ( Meteor.userId() ) ...
instead
When I reload the website from the root (ex: website.com), the refresh is fine. However, when I reload from anywhere else (website.com/about), only the partial html for the about page is loaded, leaving out all the template code such as headers, footers, script imports, etc. In addition, the browser insists on loading website.com/about/ , including an ending slash.
Here is the relevant source.
app.js
angular.module("myApp", ['ui.router'])
.run(function($state, $stateParams) {
})
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: "/",
templateUrl: "home/index.html"
})
.state('about', {
url: "/about",
templateUrl: "about/index.html"
})
.state('contact', {
url: "/contact",
templateUrl: "contact/index.html"
})
.state('news', {
url: "/news",
templateUrl: "news/index.html"
})
.state('vip', {
url: "/vip",
templateUrl: "vip/index.html"
});
$urlRouterProvider.otherwise('/');
});