If I want to implement Angularjs 4 or 2 with Laravel 5.5 (angular will consume the API from laravel), what should be the best method? 1) Should I create two folders in xampp/htdocs like c:/xampp/htdocs/test-laravel55 and c:/xampp/htdocs/test-angular4 OR 2) Should I create a project of laravel 5.5 like c:/xampp/htdocs/test-laravel55 and put the angularjs4 (e2e, node_modules, src) files & folders into test-laravel55?
If method 1 is better, can you kindly recommend me some links/ videos to understand how will be the process like CRUD operations, Auth login, etc. Also, if method 2 is better, can you suggest me some links/ videos about the procedure / tutorials, CRUD operations, Auth login etc?
My main moto is "admin user" can login to the admin panel and create some CRUD operations like category creation, product creation etc.
my approach is to make 2 completely separate projects one for Laravel and you should put it in your localhost root
and the other is for Angular and you can put it anywhere
Laravel Project
you will work only with routes and controllers no views required and for sure connecting to database, you can use Postman to test your REST APIs and functionality.
Angular Project
you will handle all front-end routes and views here you just call your back-end APIs (laravel project) to get and set data.
when you build the Angular project via ng build it will create a folder called dist this folder is the client side for your project you should point to it with you domain name once you deploy your project on any hosting service provider and for the Laravel project you may point to it with a subdomain
Example
you created a laravel project and hosted it at app.yourwebsite.com
you created an Angular project and build it then uploaded the dist folder to yourwebsite.com
now when a user hits yourwebsite.com
he will see the front-end of your angular app then in behind it calls app.yourwebsite.com via HTTP requests to get/set data
you can find more useful info and examples here https://laravel-angular.io/
Answering your questions
1- dist folder is created via ng build
2- you will upload the dist folder only as it contain all compiled angular app
3- any hosting server will be accepted because you will host JS/HTML files only so you don't need any compilers or nodejs/npm environment
what if you want to:
have laravel website at: http://site.localhost
and have an Angular admin inside that, at: http://site.localhost/admin
I tried to put resources at root of laravel public (assets & js), make my view in resources/views/admin with:
Route::get('/admin', function () {
View::addExtension('html', 'php');
return View::make('admin.index');
} )->name('admin');
and build with ng build --prod --aot --base-href /admin
the problem is now that the base href also applies to CSS, so loading fontawesome looks for: http://site.localhost/admin/assets/fonts/fontawesome-webfont.ttf?v=4.7.0
but my assets are on root of public not inside "admin", and if I add an "admin" folder inside public, I get a 'Forbidden' page on site.localhost/admin...
