My spa mobile application works correctly with angular route but makes multiple request per hash change for load template on for angular route for html file and another for kendo route! How can I disable kendo routing and only use angular route?
I use this angular route
routeProvider
.when("/", {
templateUrl: "./views/home.html",
controller: "HomeController",
})
.when("/details/:itemId", {
templateUrl: "./views/details.html",
controller: "DetailsController",
})
.when("/menu", {
templateUrl: "./views/menu.html",
controller: "MenuController",
})
.when("/cart", {
templateUrl: "./views/cart.html",
controller: "CartController",
})
.when("/account", {
templateUrl: "./views/account.html"
,controller: "AccountController"
})
.when("/about", {
templateUrl: "./views/about.html",
controller: "AboutController",
})
.when("/done", {
templateUrl: "./views/done.html",
controller: "DoneController",
})
;
Related
I need help about Axios.
I develop a SPA webapp on Laravel 6 (with package SPARK) and VueJS (version 2).
On a Vue component, I want to retrieve datas from my bdd.
So, I use Axios to make a get request on an API uri.
But, when I call Axios request, data field in Response object is a HTML code.
This is my code :
routes/web.php
Route::get('/', function(){
return view('welcome');
});
Route::middleware('auth')->get('/{any?}', function (){
return view('documents');
})->where('any', '[\/\w\.-]*');
The "welcome" view is a blade page where redirect on "/login" if user is not authenticate.
Otherwise, it redirect on "/home".
The link "/home" is define on vue-router in app.js.
The other route is the unique way to display the webapp (it's a single page application).
The Vue instanciation is in "passeport" view.
resources/js/app.js
import 'es6-promise/auto'
require('spark-bootstrap');
require('./components/bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
Vue.component('index', require('./components/pages/index').default);
import Dashboard from './components/pages/dashboard.vue';
...
const routes = [
{
name: 'dashboard',
path: '/home',
component: Dashboard,
},
{...}
]
const router = new VueRouter({
history: true,
mode: 'history',
routes: routes
});
var app = new Vue({
mixins: [require('spark')],
router,
});
router package is added in Vue instanciation.
it is in the same context than spark component (identify by the #spark-app element)
resources/views/documents.blade.php
#extends('spark::layouts.app')
#section('content')
<div id="app">
<index :user="user"></index>
</div>
#endsection
It is the view returned for any path.
In the spark::layout.app, there is only a div with id="spark-app" and the #yield('content').
resouces/js/components/pages/index.vue
<template>
<transition name="fade">
<Component :is="layout" :user="user">
<router-view :layout.sync="layout" :user="user"></router-view>
</Component>
</transition>
</template>
.
.
<script>
const default_layout = "default";
export default{
props: ['user'],
data(){
return{
layout: 'div',
}
},
}
</script>
It's just the vue component with the router-view configure with a layout.
resources/js/components/pages/dashboard.vue
<template>
...
</template>
<script>
import Default from './../layouts/Default.vue'
export default {
props: ['user'],
data: function () {
return {
documents: []
}
},
created() {
this.$emit('update:layout', Default);
},
mounted(){
// extract passeports's informations
this.axios.get('/api/documentslist').then(response => {
console.log(response);
this.documents= response.data.data;
});
}
}
</script>
Here, I call the documentslist API define in routes/api.php.
routes/api.php
Route::middleware('auth:api')->group(function () {
Route::get('/user', function (Request $request) {
return $request->user();
});
Route::get('/documentslist', 'DocumentController#list');
});
app/http/Controllers/DocumentController.php
...
public function list(Request $request){
return DocumentCollection(Document::all());
}
...
When I go to "/home", I verified "documents" data in Vue (or in the javascript console log), and response.data = "\r\n\r\n\r\n (...) v-if=\"notification.creator\" :src=\"notification.creator.photo_url\" class=... (10024 total length)"
But, list method in DocumentController have to return a list of documents, and not a HTML code.
Furthermore, I use Passport Laravel to unified authentication by login and the API token.
And the Axios request work in the same project without SPA structure.
I hope I'm clear in the problem explanation, and that I forget any detail to understand.
Thanks.
You can simply return like this from your controller
return response()->json(Document::all());
I suspect the API link to redirect with the SPA route (in routes/web.php, any path return the "home" view).
I try to change route in routes/web.php.
instead of :
Route::middleware('auth')->get('/{any?}', function (){
return view('home');
})->where('any', '[\/\w\.-]*');
I put this :
Route::middleware('auth')->get('/home', function (){
return view('home');
});
Like this, this route doesn't take account of all path.
And...it works !
But...it isn't what I want :(
Indeed, without the route with '/{any?}' the SPA doesn't work.
I don't understand why this method works another project in Laravel (without Spark package), and doesn't work with this project.
I don't know about laravel but this problem arises when the route you are calling is not the correct one. Do some efforts and check what route the application in eventually calling also take a look at your proxy settings.
****I am NodeJs developer not Laravel
I have a project that requires parent routes that are separated, in order to isolate URLs, controllers and API calls.
/boardgames/:id/review/
/boardgames/:id/setup/
The issue I am trying to solve is how to have a common child route, for all of the parent routes?
/boardgames/:id/review/rules/
/boardgames/:id/setup/rules/
Here is a simplified version of the current UI-Router config:
.state('app.frontend.view', {
abstract: true,
url: '/boardgames/:id',
views: {
'page#': {
templateUrl: 'public/html/game/view/index.html',
resolve: {},
controller: 'View'
}
}
})
.state('app.frontend.view.review', {
url: '/review/',
views: {
'tab#app.frontend.view': {
templateUrl: 'public/html/game/tabs/review/index.html',
resolve: {},
controller: 'ViewReview'
}
}
})
.state('app.frontend.view.setup', {
url: '/setup/',
views: {
'tab#app.frontend.view': {
templateUrl: 'public/html/game/tabs/setup/index.html',
resolve: {},
controller: 'ViewSetup'
}
}
});
Here is the HTML structure: (public/html/game/view/index.html)
<div class='item'>
<div ui-view='tab'></div>
</div>
ALL IS WORKING UP TO THIS POINT.
I was thinking of passing another parameter to create a dynamic state... and then chaining the child route:
.state('app.frontend.view.{{:path}}', {
url: '/:path/',
views: {
'tab#app.frontend.view': {
templateUrl: 'public/html/game/tabs/:path/index.html',
resolve: {},
controller: ':path' (format :path into friendly name)
}
}
})
.state('app.frontend.view.{{:path}}.rules', {
url: '/rules/',
views: {
'rules#app.frontend.view': {
templateUrl: 'public/html/game/tabs/rules/index.html',
resolve: {},
controller: 'ViewRules'
}
}
});
Is this the best way to go forward?
After researching this topic further, I found that:
State naming should be locked in during the config phase.
.state('app.frontend.view.{{:path}}', {}
Would equal:
.state('app.frontend.view.image', {}
The Url would include the parameter '/:path/, templateUrl and controller can all have locked in names and use the parameter differently:
In the router resolve it would be:
resolve: {
tabResolve: ['$stateParams', 'game', function($stateParams, game) {
return game.show({
id: $stateParams.id,
tab: $stateParams.tab
}).$promise;
}]
}
Only one controller is needed now, since the data being passed in is different for every parameter (review, setup).
I have a angular 2 Component MyComp
#Component({
selector: 'myform',
templateUrl: './myform.html',
providers: [HTTP_PROVIDERS],
directives: [ROUTER_DIRECTIVES]
})
This is my spec.
it('should work', injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(MyComp).then((fixture) => {
fixture.detectChanges();
expect(1+ 1).toEqual(2);
});
}));
When i execute the tests its giving me an error
Can't bind to 'ngForOf' since it isn't a known native property
The actual code works, but its only the tests that are failing,
Update :
Spec works if i replace templateUrl with template.
i.e if i just try with
template: <h1>Fake</h1> <ul> <li *ngFor="#item of items"> </li> </ul>
Interested to know if anyone has tested components with templateUrl with angular 2.0 beta version.
Thanks !
You should add ngFor or CORE_DIRECTIVES to the component directives:
import { CORE_DIRECTIVES } from 'angular2/common';
#Component({
selector: 'myform',
templateUrl: './myform.html',
providers: [HTTP_PROVIDERS],
directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES] // <- HERE!!!
})
export class MyForm { /* ... */ }
or
import { NgFor } from 'angular2/common';
#Component({
selector: 'myform',
templateUrl: './myform.html',
providers: [HTTP_PROVIDERS],
directives: [ROUTER_DIRECTIVES, NgFor] // <- HERE!!!
})
I have been able to switch out my angular router code with ui-router and it works fine with a basic setup. But on my page I have a partial that I want to reuse in multiple views and I can't get that working. Can anyone see an issue with my code below.
routes....
$stateProvider
.state( 'jobs', {
url: '/jobs',
templateUrl: templates.jobs,
views: {
'jobs': {
templateUrl: templates.jobList,
controller: 'JobListController'
},
'alert': {
templateUrl: templates.alert,
controller: 'AlertController'
}
}
})
templates.jobs file...
<div ui-view="jobs"></div>
<div ui-view="alert"></div>
and then the templates.jobList and templates.alert are just regular html blocks.
I have a main page with just a where my app initially loads. It's within this ui-view that I want to load the templates.jobs view along with it's nested views.
I've found that if I remove the templateUrl: templates.jobs from my jobs state and then move the two ui-views from that jobs file to my main html file it works. However, my main file needs to be able to load many potential views - the ui-view on the main html is just a placeholder where the rest of the application lives. So I can't have those two ui-views in my main file. Is there a way to make this work? Thanks.
Also set the parent view of jobs state in the views object and use absolute targeting:
$stateProvider.state('jobs', {
url: '/jobs',
views: {
'#': {
template: '<div ui-view="jobs"></div><div ui-view="alert"></div>',
controller: function () {}
},
'jobs#jobs': {
template: '<h2>Joblist</h2>',
controller: function () {}
},
'alert#jobs': {
template: '<h2>alert</h2>',
controller: function () {}
}
}
});
Working example on Plunker: http://plnkr.co/edit/AR8RK1Ik1xeGL0xUBV6e?p=preview
Reference: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names
I am having an issue using the ui-router with ionic tabs.
When I attempt to transition to a state that is nested within a tab from a separate tab it appears to resolve it in the stateProvider, in terms of entering the resolve statements, but never actually enters the state.
The applicable states are here:
.state('index', {
abstract: true,
templateUrl:'app/main.html',
controller: 'MainCtrl'
})
.state('index.got', {
url: "/got",
views: {
'got-tab': {
templateUrl: "app/got/main.html",
controller: 'GotCtrl'
}
}
})
.state('index.got.listing', {
url: "/listings/:id",
templateUrl: "app/got/listing/listing.html",
controller: "GotListingCtrl",
resolve: {
listing: function(Listing, $stateParams) {
return Listing.get({id: $stateParams.id});
}
},
})
.state('index.feed', {
url: "/feed",
views: {
'feed-tab': {
templateUrl: "app/home/feed/feed.html",
controller: 'FeedCtrl',
resolve: {
listings: function(CurrentUser) {
return CurrentUser.feed()
}
}
}
}
And the tabs
<ion-tabs class="tabs-striped tabs-color-positive tabs-icon-top">
<ion-tab title="Got" ui-sref="index.got.listings">
<ion-nav-view name="got-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Home" ui-sref="index.feed">
<ion-nav-view name="feed-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
The call I make to transfer states is
var index = $state.get('index')
$state.transitionTo('.got.listing', {id: '1'}, {relative: index})
I assume the issue is because I am dealing with nested names views, but any help would be much appreciated thanks
your resolves Should just be returning the Parameter Information for the current state, so for listing tab:
.state('index.got.listing', {
url: '/listings/:id,
templateUrl: '/app/got/listing/listing.html',
controller: 'GotListingCtrl',
resolve: {
listing: ['$stateParams', function($stateParams){
return $stateParams.id;
}]
}
})