All geek questions in one place

How to use angular js routing with laravel / lumen routing?

I am working on a web application developed on laravel (latest version 5. *). I searched a lot, but did not find the exact solution how to use angular js routing with laravel routing.

Assume URL:

  • / viewItem / 2
  • / editItem / 5
  • etc., any URLs that have parameters

I want to get the data according to the parameters using angular js. The problem is that laravel has its own built-in routing routes (route.php in / app / Http) and angular js using (ngRoute module).

  • What is the exact flow if both routes are used in conjunction?
  • How can this be implemented if you want to avoid collecting data by creating an object on each page where you want to get data from the backend? e.g. $ obj-> GetItem ($ ID)
  • Where to place angular js routing?
+4
source share
3 answers

You need to distinguish between the routes of your Laravel application and the routes of your Angular application.

Define a route to display Angular application

// Http/routes.php

Route::get('/{js_route}', function() {
    return view('application');
})->where('js_route', '(.*)'); // Allow multiple URI segments

This route allows the slash to do your routing with ngRoute, and it should be the last one specified in yours routes.php.

It will simply display the template that will be used to display your real Angular application.

// views/application.blade.php

<html>
    <body>
        <div class="container">
            <div ng-view></div> <!-- Here will come your partial views -->
        </div>
    </body>
</html>

Angular

ngRoute .

// public/js/src/app.js

$routeProvider
    .when('/', {
        templateUrl: 'Default/index.html', // A simple HTML template
    });

// ...

API Laravel

XHR Laravel Angular.
(.. GET, POST) /.

// Http/Controller/FooController.php

class FooController extends \BaseController {

    /**
     * List all Foo entities in your app
     *
     * @return Response
     */
    public function index()
    {
        return Response::json(Foo::get());
    }
}

// Http/routes.php

Route::get('/api/foo', 'FooController@index')

/

// public/js/src/app.js

(function (app) {

    function FooService($http, $q) {
        this.getFoos = function() {
            return $http.get('/api/foo');
        };
    }

    app.service('Foo', FooService);

})(angular.module('yourApp'));

, larvel .   //public/js/src/app.js

function MainCtrl($scope, $http) {
    $scope.listFoo = function() {
        $http.getFoos()
            .then(function(response) {
                $scope.foos = response.data;
            }, function(error) {
                console.log(error);
            });
    };
}

app.controller('MainController', MainCtrl);

javascript Laravel.

+1

:
.php

/**
 * Redirects any other unregistered routes back to the main
 * angular template so angular can deal with them
 *
 * @Get( "{path?}", as="catch.all" )
 * @Where({"path": "^((?!api).)*$"})
 *
 * @return Response
 */
  Route::any('{path?}', function () {

    View::addExtension('html', 'php');

    return View::make('index');

  })->where("path", "^((?!api).)*$");


/*
|--------------------------------------------------------------------------
| API routes
|--------------------------------------------------------------------------
*/
  Route::group([
    'prefix' => 'api'
  ], function () {
     //here are my api calls
  });

index.html resources/view, . js css resources/assets public.

+1

. Angular (https://en.wikipedia.org/wiki/Single-page_application). Laravel, .

, / Laravel, .

(https://laravel.com/docs/5.2/controllers#restful-resource-controllers) Laravel JS- Back-End.

Laravel Angular.

0
source

Source: https://habr.com/ru/post/1628805/

More articles:


All Articles