Route:
Here template and controller is not working. Below is code:
(function() {
'use strict';
angular.module('signup', ['ui.router']).config(appConfig);
appConfig.$inject = ['$stateProvider', '$locationProvider'];
function appConfig($stateProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
$stateProvider
.state('signup', {
url: '/',
templateUrl: 'app/signup/signup.html',
controller: 'SignUpController',
controllerAs: 'vm'
});
}
})();
Controller:
(function() {
'use strict';
angular
.module('signup')
.controller('SignUpController', SignUpController);
function SignUpController() {
var vm = this;
vm.title = "signup";
console.log("signup controller");
}
})();
HTML here
<h1>{{vm.title}}</h1>
console and title is not displaying. I don't know what is wrong here.
Thank you
The issue was probably the absence of tag, which is required by angular ui-router to insert any template associated to a state.
Adding the same solved the issue.
Related
I have trying to load a page using simple get request
<script>
$(document).ready(function(){
$("li").click(function(e){
e.preventDefault();
var href = $("a",this).attr('href');
$.ajax({
async: true,
type: "GET",
url: href,
success: function (response) {
$('#main-content').html(response);
}
})
});
});
</script>
In response I am getting content with full layout. But Here I am trying to get only content without layout. In controller I have written code like below
public function index()
{
if ($request->ajax())
{
$this->layout = null; //but same result
}
$tags = Tag::orderBy('id', 'desc')->paginate(10);
return view('admin.tags.index')->with('tags',$tags);
}
But I am getting same result with layout, how can I make layout false ? Or can change layout in controller ?
you can use the renderSections
return view('admin.tags.index')->renderSections()['content'];
https://laravel-tricks.com/tricks/render-view-without-layout
Well, you are still returning a view. Why not do:
return response()->json(["data"=>"some data"]);
after your Ajax check? This will return a JSON response to your frontend.
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.
please find vuejs code below. When i access the url directly on the browser, the data(JSON) are retrieved but when retrieving the data by the http request, the data are not stored in the variable. I am using Vuejs and Laravel. Can someone tell me what is wrong with the code. Thank you.
<script>
Vue.component('account-type-list', {
template: `<div></div>`
data:() => {
return {
typesofaccount:[]
};
},
created: function() {
this.getAccountTypes();
},
methods: {
getAccountTypes: function() {
this.$http.get('/list/accounttypes').then(response => {
this.typesofaccount = response.body
});
},
}
});
Vue.component('type', {
template: '<a class="active item"><slot></slot></a>'
});
new Vue({
el: '#root',
});
</script>
this inside the response callback is likely not your component.
Try:
getAccountTypes: function() {
var component = this;
this.$http.get('/list/accounttypes').then(response => {
component.typesofaccount = response.body
});
},
Had to import
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.3.4"></script>
in the child blade template not in the main layout.
I integrate google login api and It works fine but there is an error in logout.The sign out process is not working.The logged user will not sign out after click the sign out link function.
This is my code:
<meta name="google-signin-client_id" content="here my api .apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Sign Out
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
if(profile.getEmail()!="") {
var myKeyVals = { token : googleUser.getAuthResponse().id_token }
$.ajax({
type: "POST",
url: "validate.php",
data: myKeyVals,
dataType: "text",
success : function(data) {
window.location = "page";
}
});
}
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
});
}
</script>
Here signOut js function is not working and the page will auto reload and go to adminpage.
This is my document.
Thanks in advance.
this works for me instead of http://localhost/application-name/logoutUser you can add your domain name
document.location.href = "https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=http://localhost/application-name/logoutUser";
This works for me,
Simply modify the signout function as follows,Here carefully note that reload() method is used to reload the current document soon after signout.
<button onclick="myFunction()">Sign Out</button>
<script>
function myFunction() {
gapi.auth2.getAuthInstance().signOut().then(function () {
console.log('User signed out.');
location.reload();
});
}
</script>
May be this will help.
const onGoogleSignOut = () => {
// using google logout redirect
//location.href = 'document.location.href = "https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=' + window.location.href;
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut()
.then(function () {
auth2.disconnect();
console.log('User signed out.');
//location.reload();
});
}
This worked for me. Full JS function code.
The asterisks are just an example of how to define the URL you want to redirect to after the logout is performed.
<button onclick="myFunction()">Sign Out</button>
<script>
function myFunction() {
location.href = 'https://accounts.google.com/Logout?&continue=http://******.com/';
}
</script>
Save this in a HTML file and access it from the browser where you are logged into the account you want to log out of. Can also be placed in a PHP file ETC. AS long as you dont place it in a manner that breaks the existing script.
I was surprised that I didn't find any help in the documentation or a blog post about this.
I'm trying to add tests to make sure the eventing is setup correctly and stays that way.
The durandal app and events objects from Require are null. So there must be a setup step before they become available that I'm not aware of.
I have this Knockout view model:
define([
'knockout',
'durandal/events',
'durandal/app',
'Common/Modules/KoComponents/slideInEventListKeys'
],
function (ko, durandalEvents, durandalApp, slideInEventListKeys) {
function SlideInVm(params) {
// listen for anyone broadcasting this specific event.
durandalEvents.includeIn(this);
var _this = this;
durandalApp.on(slideInEventListKeys.open).then(function () {
_this.isShowing(true);
});
durandalApp.on(slideInEventListKeys.close).then(function () {
_this.isShowing(false);
});
}
SlideInVm.prototype.isShowing = ko.observable(false);
});
and in Jasmine:
define([
'knockout',
'Common/Modules/slideInVm',
'durandal/events',
'durandal/app',
'Common/Modules/slideInEventListKeys'
],
function (ko, SlideInVm, durandalEvents, durandalApp, slideInEventListKeys) {
'use strict';
describe('Given the Slide In component', function () {
var vm;
beforeEach(function(){
vm = new SlideInVm();
});
it('Should subscribe for open events', function () {
debugger;
// events and app are null!
// how to check this?
});
it('Should subscribe for close events', function () {
});
describe('When opening', function(){
beforeEach(function(){
// how to trigger this if app is null?
app.trigger(slideInEventListKeys.open);
});
it('Should show the component', function(){
expect(vm.isShowing()).toBeTruthy();
});
});
});
});