I want to use angular directive in my laravel project. But when I try to call my angular directive, tempateUrl of Angular Directive is not found. My Code is given below:
html
<demographich-url></demographich-url>
JS
.directive('demographichUrl', [function () {
return {
restrict: 'EA',
replace: true,
templateUrl: 'demographich', // this doesn't work
// 'templateUrl: './views/comments/comment-form.html', // this doesn't work
// 'templateUrl: './views/comments/comment-form.blade.php', // this doesn't work
// template:'<h1> hello world! </h1>', // this works
};
}])
Laravel Routes
// routes
Route::get('demographich', 'CompanyController#demographich');
// controller
public function demographich()
{
return view('comments.comment-form');
}
** comment-form.blade.php ( templateUrl page [ this page not found ] )**
<h1> Hi your comments goes here!!!! </h1>
** My file structure **
|
| --- resources
| --- views
| -- comments
| -- comment-form.blade.php
NB:
Laravel : 5.2
Angular: 1.5.X
I have solved this problem using below directive code.
.directive('demographichUrl', function () {
return {
restrict: 'EA',
scope: {
obj: '=',
submitFunc: '&'
},
templateUrl: '<?= asset('app/directive/demograph/demographich.html') ?>',
link: function (scope, iElement, iAttrs) {
}
};
})
You can use laravel blade page in directive..
.directive('surveyHeader', function () {
return {
restrict: 'EA',
scope: {
obj: '=',
submitSurveyheader: '&'
},
templateUrl: '<?php echo asset('app/directive/surveyheader/surveyheader.blade.php') ?>',
link: function (scope, iElement, iAttrs) {
}
};
})
Related
I am trying to build an availability carousel. It will show the days of the week, and what time someone is available. I am using Laravel and vue.js. I have done the web api, and I can get the data object following the route
Route::group(['prefix' => '/{area}'], function () {
Route::get('/{tutor}/availability','Tutor\AvailabilityController#show');
});
with this in my availability controller
public function show(Request $request, Area $area, Tutor $tutor)
{
$availability = $tutor->availability()->get();
return response()->json([
'data' => $availability
], 200);
}
That all works.
But when I try and pull it into Vue, nothing shows up. I can't seem to figure out what I might be missing.
I pulled the vue component into blade using the following, and passing in the area and tutor id
<availability area-id="{{ $area->slug }}" tutor-id="{{ $tutor->slug }}">
</availability>
and in Availability.vue, I think where I am going wrong is pulling the data in with props, but I am really not sure anymore.
<script>
$(document).ready(function() {
$("#availability").owlCarousel();
});
export default {
props: {
areaId: null,
tutorId: null
},
data () {
return {
availability: []
}
},
methods: {
getAvailability () {
axios.get( '/' + this.areaId + '/' + this.tutorId + '/availability').then((response) => {
console.log(response.json());
});
}
},
ready () {
this.getAvailability();
}
}
</script>
Thank you for the help.
Axios response object has data field which contains the response from the server. To get the data use
response.data
Also for Vue 2.0 components use mounted instead of ready for when the component is ready. If you are only loading data from the server (and not manipulating the DOM) you can use created instead.
export default {
props: {
areaId: null,
tutorId: null
},
data () {
return {
availability: []
}
},
methods: {
getAvailability () {
var that = this;
axios.get( '/' + this.areaId + '/' + this.tutorId + '/availability')
.then((response) => {
console.log(response.data); // should print {data: availability_object}
// Set this component's availability to response's availability
that.availability = response.data.data;
//OR
//Add response's availability to the components' availability
that.availability.push(response.data.data);
});
}
},
mounted () {
this.getAvailability();
}
}
</script>
I have a vue js component which makes an axios request to a laravel route. But in the vue files I don't have access to the route() function and have to use static url's for now.
Here's some code:
web.php:
// API
Route::group(['prefix' => 'api'], function() {
// GET
Route::get('/brands', 'BrandsController#getBrands')->name('api-get-brands');
Route::get('/{brand_id}/models', 'BrandsController#getModels')->name('api-get-models');
Route::get('/fuel-types', 'BrandsController#getFuelTypes')->name('api-get-fuel-types');
Route::get('/gearboxes', 'BrandsController#getGearboxes')->name('api-get-gearboxes');
});
Vue component:
methods: {
getBrands: function() {
let app = this
axios.get('/api/brands')
.then(function(response) {
app.brands = response.data
})
.catch(function(error) {
console.log(error)
})
},
...
}
It works now but I wonder if that's the best way or is there some better way to do it
You can pass the route as props to the component inside the blade file.
Inside the view:
<component home-route="{{ route('home') }}"></component>
Inside the vue component:
<script>
export default {
props: ['homeRoute'],
}
</script>
Then you can access the route inside the component like so:
this.homeRoute
You can learn more about props here: https://v2.vuejs.org/v2/guide/components-props.html
Hope this helps.
The only way how to use routes with parameters that I found out is like this:
The route:
Route::get('route/{param1}/{param2}', [Controller::class, 'actionName'])->name('routeName');
The blade:
<component :route="'{{ route('routeName', ["", ""]) }}'"></component>
where the number of empty strings in the array is equal to the number of required parameters for the route.
The component:
<script>
export default {
props: {
route: String
},
data() {
return {
param1: "",
param2: ""
}
},
computed: {
fullRoute() {
return this.route + '/' + this.param1 + '/' + this.param2;
}
}
}
</script>
I am using Laravel 8 and Vue 3.
Use https://github.com/tighten/ziggy
Ziggy provides a JavaScript route() helper function that works like Laravel's, making it easy to use your Laravel named routes in JavaScript.
You can then use routes in JS just like in PHP
route('posts.index');
With parameters too
route('posts.show', [1]);
We are new to Laravel Spark, we are trying to add custom module in kiosk
so we want one form in that module,we are following steps of below link
https://spark.laravel.com/docs/2.0/forms
We are define our vue component for form in our ROOT_DIR/resources/assets/js/app.js
by adding below code:
Vue.component('formexample', {
data()
{
return {
form: new SparkForm({
level_name: '',
level_status: ''
})
};
}
});
After set the view file we add method to our vue component in app.js(ROOT_DIR/resources/assets/js/app.js) file:
new Vue(require('laravel-spark'));
Vue.component('formexample', {
data()
{
return {
form: new SparkForm({
level_name: '',
level_status: ''
})
};
},
methods: {
register() {
Spark.post('/formexample', this.form)
.then(response => { console.log(response);
});
}
}
});
enter image description here
So our question is .we are follow the steps in wrong way ?? please suggest right way.
Also guide us for validation of forms and insert stuff into the database
Thankx in advance
I was following Lazy Blogger for getting started with routing in knockoutJS using crossroads and hasher and it worked correctly.
Now I needed to refresh the content using ajax for Home and Settings page every time they are clicked. So I googled but could not find some useful resources. Only these two links
Stack Overflow Here I could not understand where to place the ignoreState property and tried these. But could not make it work.
define(["jquery", "knockout", "crossroads", "hasher"], function ($, ko, crossroads, hasher) {
return new Router({
routes:
[
{ url: '', params: { page: 'product' } },
{ url: 'log', params: { page: 'log' } }
]
});
function Router(config) {
var currentRoute = this.currentRoute = ko.observable({});
ko.utils.arrayForEach(config.routes, function (route) {
crossroads.addRoute(route.url, function (requestParams) {
currentRoute(ko.utils.extend(requestParams, route.params));
});
});
activateCrossroads();
}
function activateCrossroads() {
function parseHash(newHash, oldHash) {
//crossroads.ignoreState = true; First try
crossroads.parse(newHash);
}
crossroads.normalizeFn = crossroads.NORM_AS_OBJECT;
hasher.initialized.add(parseHash);
hasher.changed.add(parseHash);
hasher.init();
$('a').on('click', function (e) {
crossroads.ignoreState = true; //Second try
});
}
});
Crossroads Official Page Here too I could not find where this property need to be set.
If you know then please point me to some url where I can get more details about this.
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;
}]
}
})