In using AngularJS on top of Laravel, assuming I have this route in Laravel:
Route::get('/admin/', function() { return View::make('pages.writer'); });
which makes a view that loads AngularJS components, including $routeProvider, and that the configuration is like so:
$routeProvider.when('/writer/:publicationName?', {
templateUrl: '/templates/writer.html',
controller: 'WriterCtrl',
caseInsensitiveMatch: true
}).otherwise({
templateUrl: '/templates/library.html',
controller: 'LibraryCtrl'
});
If I call the URL: /admin/writer/My-Favorite-Publication, I get a Laravel error because the route doesn't exist. Is there a way to tell Laravel when Angular routing takes over for a particular URL (i.e. anything after /admin/), so that I can use $routeParams.
You need to define a catch-all route that will return the base view that runs AngularJS app and let AngularJS handle the rest of the routing.
This will do the trick:
Route::get('/admin/{ignore?}', function() {
return View::make('pages.writer');
})->where('ignore', '.*');
This will make everything that starts with /admin match this Laravel route.
Related
Im trying to build SPA and I need to make axios call to endpoint in my routes. How can make this api call work?
Here are my routes
Route::get('/{any}', function () {
return view('default');
})->where('any', '.*');
Route::get('events', 'EventsController#index')->prefix('api');
Any suggestion?
You must go to the folder routes->api and create your api routes, there is automatically the api prefix.
in your .vue
axios.get('/api/getUser')
.then(data => {
console.log(data)
});
in your folder routes->api
Route::get('/getUser', 'Api\UsersController#getUser');
To not put "/api" in front of all your axios calls in your '.vue' you can put
axios.defaults.baseURL = '/api';
in your app.js
We define a catch-all route to the SpaController which means that any web route will map to our SPA. If we didn’t do this, and the user made a request to /hello, Laravel would respond with a 404.
Route::get('/{any}', 'SpaController#index')->where('any', '.*');
Remember that this route will always be putted on the last part of your web routes after declaring your other routes
use this
Route::any('{all}', function () {
return view('default');
})
->where('all', '^(?!api).*$')
->where('all', '^(?!storage).*$');
Route::get('events', 'EventsController#index')->prefix('api');
as you will need api and storage route handel by laravel
I am trying to get a laravel-nuxt project running. I am stuck with creating route calls to my laravel backend using axios async call to serve up data to my nuxt frontend before loading the page.
I am constantly getting getting a 404 with my current laravel-nuxt setup even though I have the route defined in api.php.
I am using this as a template for the project and I have not changed anything in that template yet:
https://github.com/cretueusebiu/laravel-nuxt
So my frontend call is this here:
async asyncData ({ $axios }) {
if (process.server) {
return $axios.$get('/api/data')
.then((res) => {
this.data = res.data;
})
}
}
And my backend route is defined as follows in api.php:
Route::get('/data', 'HomeController#index');
It always gives me a 404, is there something missing that I should be aware of?
According to the Readme in the Github project you have mentioned, you have to add your routes manually to
client/router.js
Read this line under Notes and follow the structure well you'll be able to avoid this.
This project uses router-module, so you have to add the routes
manually in client/router.js.
hope this helps.
I am trying to make a simple App in Angular , integration with Laravel 5 and facing issues while routing the application views.
Routes.php looks like as below:
<?php
Route::get('/', function () {
return view('index');
});
in Routes.php, i am handling only first time when application loads.
But after that i want to handle all routing by Angular. So, i did like this:
app.js file
var membershipModule = angular.module('membershipModule', ['ngMaterial','ngRoute']);
membershipModule.config(function($routeProvider, $locationProvider, $mdThemingProvider){
$mdThemingProvider.theme('default').primaryPalette().accentPalette('blue-grey');
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'views/login.html'
})
.when('/register', {
controller: 'RegisterController',
templateUrl: 'views/register.html'
})
.otherwise({redirectTo: "/"});
$locationProvider.hashPrefix('');
});
But when i access http://localhost:8000/#/login then it throws error that views/login.html is not found.
I tried making login.html in Laravel Default Folder as below screen
Also Tried making views/login.html in root dir as below
but none of it is working
You can put this files inside the public directory. As you can see in https://laravel.com/docs/5.3/structure#the-public-directory
I am building an app with Lumen for the backend and angular for the frontend. Lumen handles routes and serves the basic templates with a header and footer, where angular takes over to control the content. I am trying to add a url parameter to a route, but it breaks all my paths to scripts as it sees it as a subdirectory not a parameter. My route looks like this in Lumen:
$app->group(['prefix' => 'user', 'middleware' => 'auth'], function($app) {
$app->get('{any}', function() {
return view('index');
});
$app->get('detail/{userId}', function() {
return view('index');
});
});
I have a url of example.com/user/create that works fine, but as soon as I use example.com/user/detail/101 it breaks. How do I set it up so all my angular paths are not destroyed as I add parameters? I would like to stay away from adding the absolute url path as I really don't want to manage differing urls through dev/stage/production environments.
EDIT:
The following routes work and do not break css/script paths:
example.com/user
example.com/user/create
The following route does break paths:
example.com/user/detail/101
Add the any route after the detail/{userId} route.
In general, any "catch-all" routes need to go at the end so they don't interfere with anything.
I am using AngularJS and Laravel for my web app project. My routing look like this:
AngularJS:
angular.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '/admin/dashboard'
});
}]);
Laravel:
Route::group(array('prefix'=>'admin', function(){
Route::get('/', ['as'=>'admin.main',function(){
return view('main');
}]);
Route::get('/dashboard', ['as'=>'admin.dashboard',function(){
return view('dashboard');
}]);
});
I am facing problem that I would need to declare route path at 2 place. One at Angular and the other one at Laravel. So, every time when I add new route or change route path, I will need to work on 2 place. This will become something tedious and hard to maintain when the app grows.
Is there anyway that I only need to set the route URL at one place, but will be effective for both?
I assume that you're building the single-page app. That means on server-side (Laravel) you need to use the same template for all GET requests, e.g.
Route::group(['prefix' => 'admin'], function() {
Route::get('(.*)', function() {
return view('dashboard');
});
});
On client-side (AngularJS) you're doing routing as described in question.
Btw, you're using wrong syntax in Laravel routing, this is incorrect:
Route::get('/', ['as'=>'admin.main',function(){
}]);
and this how it should be:
Route::get('/', ['as'=>'admin.main'],function(){
// ^
});
In Laravel 5.4 I was not able to define a route using regex as in:
Route::get('/account/(.*)', function() { return view('index'); });
Instead I had to use a parameter and use regex to ensure it captured all paths:
Route::get('/account/{path?}', function() {
return view('index');
})->with('path', '.*');