I need to convert this line
$location.url('/im?p=' + peer);
to using $state, I can't seem to properly get it working. I have followed these stack overflow questions but I can't seem to get it right
AngularJs ui-router $location or $state?
Angular ui-router - how to access parameters in nested, named view, passed from the parent template?
my app.js has this state currently as this
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'templates/home/index.html'
})
.state('home.matches', {
url: '/matches/:p',
templateUrl: 'templates/home/matches.html',
controller: 'AppIMController'
})
})
app.js used to be
$routeProvider.when('/im', {templateUrl: templateUrl('im'), controller: 'AppIMController', reloadOnSearch: false});
This should do it for you. You don't need "peer" url property.
state('home.matches', {
url: '/new?p',
templateUrl: 'templates/home/matches.html',
controller: function($scope, $stateParams) {
$scope.peer = $stateParams.p;
}
})
Related
I am using UI-router to control the states of a single page application. I have a big chain of states that I narrowed to these:
$stateProvider
.state('app', {
url: "/",
abstract: true
})
.state('app.main', {
url: "/main",
abstract: true
})
.state('app.main.users', {
url: "/users",
abstract: true,
controller: 'UsersController',
controllerAs: 'uc'
})
.state('app.main.users.list', {
url: "/list",
templateUrl: "list.html",
});
Imagine that this app.main.users is an abstract state for a CRUD which will use the same controller for all the operations.
The problem is that the "list.html" file from the child controller cannot see the values from the controller.
I have put up a plunkr sample to the issue: Plunkr
Here is the full code:
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('app', {
url: "/",
abstract: true
})
.state('app.main', {
url: "/main",
abstract: true
})
.state('app.main.users', {
url: "/users",
abstract: true,
controller: 'UsersController',
controllerAs: 'uc'
})
.state('app.main.users.list', {
url: "/list",
templateUrl: "list.html",
});
})
myapp.controller('UsersController', usersController);
function usersController() {
console.log("UsersController instantiated");
var vm = this;
vm.user = 'username';
}
If you have any idea, please let me know. I can't find a solution to this.
Thanks!
I've solved the problem.
I was missing some things in the concept of the states. First of all I needed an on my app.main state so it could render the app.main.users state. Also my controllers declaration was wrong.
This Plunkr is working with the desired scenario.
Thanks for the help.
I am making a very basic angular app using ui-router, and I have 3 "modules" right now, which are home, login, and register. Here is how I have defined them:
'use strict';
var app = angular.module('exampleApp', [
'ui.router',
'ngAnimate',
'ui.bootstrap'
]);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: './main/home/home.html',
controller: './main/home/home-controller.js'
})
.state('login', {
url: '/login',
templateUrl: './main/login/login.html',
controller: './main/login/login-controller.js'
})
.state('register', {
url: '/register',
templateUrl: './main/register/register.html',
controller: './main/register/register-controller.js'
})
})
However, I think I am doing the controller: portion wrong. I want to define each controller for each "module", and I'm not sure how to go about doing that.
Here's my file structure -
First define your controller.
angular.module('exampleApp').controller('loginCtrl', function () {
// ctrl task goes here.
});
Mapping controller to a route.
$stateProvider.state('login', {
url: '/login',
templateUrl: 'path/to/login.html',
controller: 'loginCtrl'
})
In my AngularJS application I've got more than one route.js file controlling all my routes.
As a default I have the route "/" be equal "/main", but is there a way to later overwrite this?
Let's say I have a route.js like this:
angular.module('myApp')
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('/','/main');
$stateProvider
.state('main', {
url: "/main",
templateUrl: 'main.html',
controller: 'mainController'
});
});
But later I want to dynamically overwrite this default route, with a new one from route2.js
angular.module('myApp')
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('/','/newMain');
$stateProvider
.state('newMain', {
url: "/newMain",
templateUrl: 'newMain.html',
controller: 'newMainController'
});
});
A .when setting could be not only provided with a constant, it could be even a function.
So, let's have some setting (e.g. naive global var useDifferent = false;) and hook decision on it:
$urlRouterProvider.when("/other", function(){
if(useDifferent){
return "/newMain";
}
return "/Main";
});
Later, anyone can just change that setting useDifferent = true (or of cause some more, much more smart and correct handling...)
Hi I can't get the application to change page. Now I have had look at some example code here on stack but all of them doesn't use the 'app.login' but insteand just 'login'. I tried this but it caused a crash in the program.
My end goal is to transition to home from the login controller
Controller:
.controller('logInCtrl', function($scope) {
//...
$state.transitionTo("app.home");
//...
})
app.js
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
Just use this go() function of $state to change page: $state.go("app.home"); Plus do not forget to include $state dependency in your controller
.controller('logInCtrl', function($scope, $state) {
I'm trying to implement login using Angular.js with Laravel as a back end. I'm using an abstract state for handling the layout. There are 2 abstract states: 1 for public pages and 1 for admin pages. The problem is when I login, when I use $state.go('admin.dash') or $window.location.href = '#/admin/dash' it redirects me to the page but the sidebar isn't loaded. It only loads when I access the page directly or do a full page refresh on the browser.
Here's what my loginController looks like:
(function(){
angular.module('starter.controllers')
.controller('LoginController', ['$scope', 'UserService', '$state', '$window', LoginController]);
function LoginController($scope, UserService, $state, $window){
var me = this;
me.loginUser = function(user){
UserService.login(user).then(function(data){
$window.location.href = ('#/admin/dash'); //also tried $state.go
});
};
};
})();
And here's what the app configuration for the states look like:
.config(function($stateProvider, $urlRouterProvider) {
.state('home', {
url: "/home",
abstract: true,
templateUrl: "templates/layouts/tabs.html"
})
.state('home.login', {
url: '/login',
views: {
'home-login': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginController'
}
}
})
.state('admin', {
url: "/admin",
abstract: true,
templateUrl: "templates/layouts/admin-menu.html"
})
.state('admin.dash', {
url: '/dash',
views: {
'menuContent': {
templateUrl: 'templates/admin/dash.html'
}
}
});
So basically I'm trying to redirect from the home state to the admin state. When I checked on chrome dev tools the HTML is actually loaded, but I don't know why the sidebar just wont show up:
Here's a screenshot when I use $state.go or $window.location.href:
And here's how it looks like when I access it directly: