I have not found any tutorials out there that address how to "properly" create a 404 page in this specific version of Laravel 5.6. I found some outdated once that is a bit different that how Laravel 5.6 works. Any inputs will help.
I found the answer by reading the Laravel Docs "Custom HTTP Error Pages".
Create a "Errors" Folder under "/resources/views/" and create a file named "404.blade.php" then add this code:
#extends('../layouts.app')
#section('content')
<div id="login-container" class="container-fluid" style="background-color: lightgray;">
<div class="row">
<div class="col-md-12 mt-1 mb-1 text-center">
<h1>{{ $exception->getMessage() }}</h1>
back to home
</div>
</div>
</div>
#endsection
then add this route to your "web.php" file:
// 404 Route Handler
Route::any('{url_param}', function() {
abort(404, '404 Error. Page not found!');
})->where('url_param', '.*');
I have written a blog about it: click here
Related
I am trying to get list of location with their photos using google places api.
I am storing the response in a variable vm.locationList. In my view I am iterating over this variable to show location list.
Following is the code
<div ng-repeat = "(key, value) in vm.locationList">
<div class="panel panel-primary">
<div class="panel-body">
<div class="col-md-2">
<div class="pull-left thumbnail">
<span ng-if="vm.getPhotos">
<img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=150&photoreference={{value.photos[0].photo_reference}}&key=API_KEY" class="img-responsive" style="margin-right:10px;">
</span>
</div>
</div>
<div class="col-md-10">
<h4><b>{{value.name}}</b></h4>
<p><i class="fa fa-map-marker" style="color:red"></i> {{value.vicinity}}</p>
<p> open now: {{value.opening_hours.open_now}}</p>
</div>
<div ng-repeat = "type in value.types">
<p style="float:left;width:20%" class="tags">{{type}}<p>
</div>
</div>
</div>
Now to get the photo I place http url request in src attribute of img tag. Though I am getting pics with the list but I see error in console saying bad request.
Following is the error I am getting in console
GET https://maps.googleapis.com/maps/api/place/photo?maxwidth=150&photoreference={{value.photos[0].photo_reference}}&key=API_KEY 400 ()
And here is the http response
<title>Error 400 (Bad Request)!!1</title>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>400.</b> <ins>That’s an error.</ins>
<p>Your client has issued a malformed or illegal request. <ins>That’s all we know.</ins>
Okay I have got where I was doing mistake. I used Angular's ng-src in place of src attribute. Now its working fine. Binding was not working earlier. I got confused because even though binding was not working image was appearing.
I am displaying the list of incidents on the page using AngularJS.(It works)
I also have 3 buttons on the page. 'Open'-shows open incidents, 'Closed' -shows closed incidents, 'All' -shows all incidents.(It works)
Issue: when I try to set the page default to show only "Open incidents", when the users opens the page.
Note: By using below code, I am able to set the page default to "Open incidents", when the list have 1 incident. But, if it have more than 1 incident, the code is not working and showing empty page.
I am putting the total code in plunker. As I am using this code in a Tool, it is not possible to run this code in plunker. The tool have separate script to get all the incidents in JSON format. I am also attaching the JSON format in JSON file. Any help would be appreciated. Thank you.
<div class="myRequests">
<div class="row" ng-repeat="inc in IncItems | filter:{status: IncStatus}">
<div class="panel panel-default {{inc.status}}">
<div class="panel-heading">
<h4 class="panel-title">{{inc.number}}</h4>
</div>
<div class="panel-body">
<div class="col-md-3 pace">
<p><b>Status:</b> {{inc.status}}</p>
<p><b>State:</b>{{inc.state}}</p>
</div>
</div>
</div>
</div>
</div>
Plunker: My code
I am quite new to Angular, but I have successfully set up a list.html template to show posts in Wordpress using V2 of the WP API.
Now, I would like to show some (ACF) fields from another page above my post list. I have the ACF API plugin installed as well, and it does work for posts.
I just have no idea how to refer to the right page ID, or if I need to set up another controller for this.
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
As you can see ":2" probably makes no sense, but I could not find any reference on how to do this properly.
Thanks in advance for any help!
btw. this is the full code from my list.html template/partial:
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
<div class="post-list">
<article ng-repeat="post in posts | orderBy:'date'" class="col-md-2">
<div>
<div class="date-wrap">
<h6 class="event-date">{{post.title.rendered}}</h6>
</div>
<!-- <div ng-bind-html="post.content.rendered | to_trusted"></div> -->
<div ng-if="post.acf.event_title">
<div class="post-data-container">
<p>{{post.acf.event_title}}</p>
<p ng-if="post.acf.conversation_with">A conversation with {{post.acf.conversation_with}}</p>
<p>{{post.acf.about_or_by}} {{post.acf.lecture_from}} </p>
</div>
<img ng-src="{{post.acf.portrait.sizes.thumbnail}}" />
</div>
<div ng-if="!post.acf.event_title">No Event Title</div>
<a ui-sref="detail({id: post.id})">Click here to read more</a>
</div>
</article>
</div>
Are you grabbing the ACF data from the OTHER post? Is it part of your JSON object that returns to the view? If it is, you would just point to that. To verify it is, go to yourdomain.com/posts/:id where id is the post you are viewing, and see if the OTHER post's ACF data is present.
If not you'll need to create a controller or another function which hits the API again for that other post's data, so $scope.other_post = getPost({id:OtherPostID});
make sense?
I am creating hybrid application and i am facing issue in ng-repeat with native scrolling.
Below are my template file code
<ion-view align-title="center">
<ion-content class="ionic headerWithNav" overflow-scroll='true'>
<ul>
<li ng-repeat="lessondata in AllLessonComing" ng-class="{true: 'showBg', false: ''}[(AllLessonComing).length>0]" ng-click="lessondetailsPage('{{lessondata.id}}')">
<div class="lesson-wrap">
<div class="lesson-img">
<div class="lession-price"> <span>{{lessondata.price}}</span> </div>
<div class="lessonImg-wrap"><img image-lazy-src="{{lessondata.image}}" lazy-scroll-resize="true" image-lazy-loader="bubbles" class="ink" on-finish-render="ngRepeatFinished"/></div>
</div>
<div class="lessonInfo">
<div class="row">
<div class="col col-67">
<h1>{{lessondata.title}}</h1>
<div class="lesson-status">{{lessondata.category_name}}</div>
<div class="row">
<div class="col lesson-location">{{lessondata.City}}</div>
<div class="col">
<div class="lesson-rating"><img src="img/start-rating.jpg"></div>
</div>
</div>
</div>
<div class="col padr-none">
<div class="trainnerImg-wrap">
<div class="trainee-img"> <img src="{{lessondata.coach_image}}"> </div>
<div class="trainee-name">{{lessondata.coach_name}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ng-show="(AllLessonComing).length == 0">
<div class="inner-container"><div class="no-results">No Lesson Found</div></div>
</li>
</ul>
</ion-content>
</ion-view>
As you can see i am using "overflow-scroll='true'" for native scrolling and ng-repeat for the showing my lessons.
This is an image when scope data render first time--
when scope data render first time
And this is an image when i scroll speedily when i scroll speedily
ISSUE:- I don't know why these images and text are reloading or flickering when i scroll speedily
My Code is correct.
ng-repeat was creating issue with the ionic 1.0. Now ionic released new version that is ionic 1.2 and you will see that this issue has been resolved by ionic's developers.
you can update your ionic version easily.
If you are using NPM then use this command
ionic lib update
Check brower.JSON file in www/lib/ionic/ folder. if brower.JSON exists then remove this file.
you will see the mazik of ionic 1.2.
This issue happens on hybrid app. The longer list (and images) the more lag it has. As I can see you are using Ionic, try to use ion-list instead. It could help create a better list view.
p/s: sorry I was not able to made a comment (not enought rep point). So I post it here. Hope it help!
Two more suggestion:
Use angular bindonce to reduce $watchers and faster render
If you are building your app using ionic build for Android, you could use built-in Crosswalk for a stronger webview of your app
I am working through the CA angular course. I had a question about this code:
<div class="main">
<div class="container">
<h2>Recent Photos</h2>
<div class="row">
<div class="item col-md-4" ng-repeat="photo in photos">
<a href="#/photos/{{$index}}">
<img class="img-responsive" ng-src="{{ photo.url }}">
<p class="author">by {{ photo.author }}</p>
</a>
</div>
</div>
</div>
</div>
In the
So when I click the photo, angular knows what it's index is and the index gets relayed to the PhotoController as a routeParams right and you can access it via $routeParams.id. But what is the #?
The char # (also called hash) is used for navigation inside your app / your website and prevent the browser to refresh the current page.
If you look your url you will see a hash # followed by /photos/{{$index}}
How to deal with Hash in AngularJS ?
In AngularJS, you can use the $location service to manage url
The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.
https://docs.angularjs.org/guide/$location
# are used in something called hash navigation which are a separate section of a URL's elements. hash navigation is used by angular for interior hash routing rather than full page routing.
Not only in angualrjs but in every web project if we use some url followed by # that won't reload the page.
I hope you have noticed using <a href="#"> for dummy urls too.