I am trying to find a concrete example on how to use the Laravel with Angular 2.
Tried using google, but no luck. Additionally, I was wondering when using the Component annotation object key templateUrl, can it accept php extension instead of html.
The consensus appears to be that it's best to use Angular 2 as an independent front-end, and have Laravel act as an API.
That said, I did find this guide that definitely links the two. I'm not sure if it will answer your specific question, but it might help you get started. Good Luck!
After setup all router in front-side with angular.
This route is for Angular2 and it should be place after all other backend routes
just keep it at the bottom ( route.php in laravel5.2 web.php in laravel5.3)
Route::get('/{any}', function ($any) {
return view('welcome');
})->where('any', '.*');
$scope.refresh = function () {
$http({
url: '',
method: "GET"
}).success(function (data) {
$scope.trans = data.transactions;
console.log($scope.trans);
}).error(function (data) {
console.log('Error');
});
}
$scope.refresh(); // We call the function on initialization to load the feed.
Related
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 creating APIs into laravel 5.6 for angular.
Form data is sending to API with OPTIONS method.
How can I get this data into the controller?
I have tested like this.
jquery ajax
$.ajax({
url:'domain.com/laravel_app/api/register_user',
type:"options",
dataType:'json',
data:{name:'Joe'},
success:function(r)
{
console.log(r);
}
})
Laravel route
Route::match(['post', 'options'], '/register_user/', 'UserController#register_user');
Laravel controller
public function register_user(Request $request)
{
print_r($request->all());
$arr1['status']='SUCCESS';
return json_encode($arr1);
}
All is working fine with "post" method but not with "options"
This seems to be an issue with jQuery ignoring the spec on the OPTIONS verb and sending your data as the request body.
You should be able to bypass this by doing:
$.ajax({
url:'domain.com/laravel_app/api/register_user?'+$.param({name: 'Joe'}),
type:"options",
dataType:'json',
success:function(r)
{
console.log(r);
}
})
However keep in mind that according to the spec:
The HTTP OPTIONS method is used to describe the communication options for the target resource.
What you are using this request here does not seem to be used to describe communication options for the target resource so you should not be using the OPTIONS method for this.
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.
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', '.*');
I recently migrated an application from Laravel 3 to Laravel 4 and came across something that was used in Laravel 3 that I couldn't find an equivalent to in Laravel 4.
In Laravel 3 there was a Route::share and in my application there was the following shared route that basically redirected a series legacy URL's to a new url. Obviously, this could be done with mod_rewrite rules, but there might be other behavior besides simple redirects that happen in the route that could be shared.
Route::share( array(
array('GET', 'Songbook/songbook.html'),
array('GET', 'Songbook'),
array('GET', 'songbook/songbook.html'),
array('GET', 'songbook'),
array('GET', 'tgbs'),
), function () {
return Redirect::to( 'lyrics', 301 );
} );
Is there an equivalent to this in Laravel 4? The only thing I was able to do was to create discreet routes for each of them. It seems like there should be a more elegant way:
Route::get('Songbook/songbook.html', function(){ return Redirect::route('lyrics'); });
Route::get('Songbook', function(){ return Redirect::route('lyrics'); });
Route::get('songbook/songbook.html', function(){ return Redirect::route('lyrics'); });
Route::get('songbook', function(){ return Redirect::route('lyrics'); });
Route::get('tgbs', function(){ return Redirect::route('lyrics'); });
I'm going to post this as an answer to my own question because I found something that works. This uses a url parameter and the where() method with a regex to determine if it matches any of the urls in a list. However I still don't feel that this is as elegant as what was in Laravel 3 (unless you really like regular expressions and find them elegant).
I still feel there is a more elegant solution.
Route::any('{any?}', function(){ return Redirect::route('lyrics'); })
->where('any', '(Songbook\/songbook\.html|Songbook|songbook\/songbook\.html|songbook|tgbs)');