Is there a better way to redirect through a state without using $urlRouterProvider? I want to redirect to elsewhere after going through the base.home state.
$stateProvider
.state('base', {
url: '/base',
abstract: true,
views: {
"mainbase": {
templateUrl: 'ng/apps/base/views/header.html',
controller: 'HeaderCtrl'
}
},
})
.state('base.home', {
url: '',
views: {
"baseHeaderView": {
template: 'base home, you should not be here',
controller: function($state) {
// Can this be accomplished better?
$state.go('base.elsewhere');
}
}
}
})
.state('base.elsewhere',{
url: '/elsewhere'
//I want to redirect to here after going through the base.home state
});
Mark your redirect state with an attribute, then add a global listener for $stateChangeStart and conditionally supersede the transition.
This does the redirection in place of the original transition, so 'base.home' isn't even activated temporarily. If you
app.run($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, toState, params) {
if (toState.redirectTo) {
evt.preventDefault();
$state.go(toState.redirectTo, params);
}
});
}
app.config(function($stateProvider) {
$stateProvider.state('base', {
url: '/base',
abstract: true,
views: {
"mainbase": {
templateUrl: 'ng/apps/base/views/header.html',
controller: 'HeaderCtrl'
}
},
})
.state('base.home', {
url: '',
views: {
"baseHeaderView": {
template: 'base home, you should not be here',
controller: function($state) {
// Can this be accomplished better?
$state.go('base.elsewhere');
}
}
},
redirectTo: 'base.elsewhere'
})
.state('base.elsewhere',{
url: '/elsewhere'
//I want to redirect to here after going through the base.home state
});
});
Related
I am attempting to have DRY states with UI-Router. I have a page service AlchemyPage which fetches a page through the API using $http.get
This works perfectly when I use it with an inline controller:
$stateProvider.state('home', {
url: '/',
controller: function($stateParams, $scope, AlchemyPage) {
AlchemyPage.load($stateParams, $scope);
}
});
$stateProvider.state('organization', {
url: '/package-organization/:page',
templateUrl: 'alchemy/page.html',
controller: function($stateParams, $scope, AlchemyPage) {
$scope.org = true;
AlchemyPage.load($stateParams, $scope);
}
});
I attempted to get rid of repetition and created a controller:
angular.module('App').controller('MainPageCtrl', [
'$scope',
'$stateParams',
'isOrganization',
'AlchemyPage',
function($scope,
$stateParams,
isOrganization,
AlchemyPage) {
$scope.org = isOrganization;
AlchemyPage.load($stateParams,$scope);
}
]);
However, when I implemented as below, the controller does not get called.
$stateProvider.state('home', {
url: '/',
templateUrl: 'alchemy/home.html',
controller: 'MainPageCtrl',
resolve: {
isOrganization: 'false'
}
});
$stateProvider.state('organization', {
url: '/package-organization/:page',
templateUrl: 'alchemy/page.html',
controller: 'MainPageCtrl',
resolve: {
isOrganization: 'true'
}
});
Using AngularJS v.1.6.4
Using UI-Router v.0.4.2
I resolved this issue by using params instead of resolve
Modified 'home' state:
$stateProvider.state('home', {
url: '/',
templateUrl: 'alchemy/home.html',
controller: 'MainPageCtrl'
});
The below resolve object no longer needed in either state due to changing logic in AlchemyPage resource:
resolve: {
isOrganization: 'false'
}
Revised state for organization:
$stateProvider.state('organization', {
url: '/package-organization/:page',
templateUrl: 'alchemy/page.html',
controller: 'MainPageCtrl',
params: {
topic: 'organization'
}
});
You can see in the above that the flag is now set for organization by passing in
params: {
topic: 'organization'
}
So here is the cleaned up controller:
App.controller('MainPagedCtrl', [
'$stateParams',
'$scope',
'AlchemyPage',
function($stateParams,
$scope,
AlchemyPage) {
AlchemyPage.load($stateParams,
$scope);
}
]);
With the above corrections, the named controller works properly. Resolve does work as expected, I was just using it improperly.
How can I retrieve json in Vuejs in vue.js in laravel 4?
I tried following but it didn't work:
new Vue({
el: '#guestbook',
data: {
comments: [],
text: '',
author: ''
},
ready: function() {
this.getMessages();
},
methods: {
getMessages: function() {
$.ajax({
context: this,
url: "/cms/Getweb_manager",
success: function (result) {
this.$set("comments", result)
}
})
}
}
})
Have you tried logging the response? Just use a console.log(result).
About your doubt, you probably have to do this.$set('comments', result.data');.
Don't forget the semicolon!
Have a look at the vue-resource package
https://github.com/vuejs/vue-resource
It should work like this
methods: {
getMessages: function() {
this.$http({
url: '/cms/Getweb_manager',
method: 'GET'
}).then(function (response) {
// success callback
this.$set('comments', response.result);
}, function (response) {
// error callback
});
}
}
I am trying to implement ajax in laravel framework, where I am trying to check for the availability for the username, I was able to implement the same via core php but not able to get through laravel 4.
1) You have to define a method in your controller (i.e UserController)
public function postEmail()
{
$userCount = User::where('email', '=', Input::get('email'))->count();
if ($userCount == 0)
{
return "true";
} else {
return "false";
}
}
2) In your registration form you have to do jQuery validation like this to make a remote call on Controller method
$(document).ready(function() {
$('#registration-form').validate({
rules: {
email: {
required: true,
email: true,
remote: {
type: "POST",
url: '/user/email'
}
}
},
messages: {
email: {
remote: "The email has already been taken!"
}
},
success: function(date) {
console.log(data);
}
});
If I have the following factories:
.factory('User', function($resource) {
return $resource('/users/:id', {id: "#id"}, {
query: {method: 'GET', params: {}, isArray: false}
});
})
.factory('UserList', function(User, $q) {
var deferred = $q.defer();
User.query({}, function(response) {
deferred.resolve(response.data);
});
return deferred.promise;
})
I know have a UserList that I can inject into all my controllers that need it. But, if I later in my application create a new user, how can I make the 'UserList'-factory "refresh"? Is there another approach that is (even) more "The Angular Way"?
I need that when clicking on a checkbox, I sent it to a remote url to call a controller in Codeigniter This is what I'm trying to do...
$("#checkbox").click(function() {
if($("#checkbox").is(':checked')) {
alert("go to url");
} else {
alert("isnt active");
}
});
Use ajax to make the request to the server.
$.ajax({
url: "http://example.com/controller-name/function-name/parameter1",
cache: false
}).done(function(data) {
//Do something with the response.
});
See: http://api.jquery.com/jQuery.ajax/
you can try this
$("#checkbox").click(function() {
if($("#checkbox").is(':checked')) {
$.ajax({
url:base_url+'your_controller_name/your_function_name',
type: 'post',
data:{any data you want to sent},
success : function(resp){
if(resp)
{
//do what you want
}
},
error : function(resp){}
});
} else {
alert("isnt active");
}
});
Please let me know if you face any problem.
UPDATE
May be you want like this.
$("#checkbox").click(function(){
if($("#checkbox").is(':checked')) {
window.location.href="domain_name/your_controller_name/your_function_name";
} else {
alert("isnt active");
}
});