6

I am using laravel php framework for the code execution and I want angularjs to handle the routing for me. I have an example here : http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/preview which shows me how to swap between the pages using angularjs routing methods but they use simple .html files to render the content . It is a sample I found on the internet.

Moreover in laravel it has its own routes. How can i guide the angularjs router to call the laravel route and render the page accordingly after fetching the contents from database ? I am new to Angularjs . Thank you.

8
  • Are you using Laravel a an API provider (and so requesting it via REST) or do you want Laravel to render your pages with its templating system ? Commented Mar 30, 2015 at 12:47
  • what would you suggest. I am confused here. I just want to use angluar js so that when you click on any links it should not reload the page. and render the content in d ng-view Commented Mar 30, 2015 at 12:51
  • You want to develop your frontend application with AngularJS, I get it. But how are you using Laravel ? Put Angular inside your Laravel view (I hope not, it's a very bad idea) ? Commented Mar 30, 2015 at 12:55
  • yea i guess. i am making a master.blade.php file which i render using the laravel route and in that i am tryng to manage the routes to different parts of site. Thing is when i use angularjs routing i see that there is a templateurl: thing which redirects generally to a .html file. but i want it to render a absolute URL which would be of a laravel page and just render it inside the ng view. Commented Mar 30, 2015 at 12:59
  • 1
    You can't use AngularJS inside of Blade, it's not designed to be used like this. You have to separate your Laravel application from you Angular application and make them communicate via REST API (for example). Commented Mar 30, 2015 at 13:05

1 Answer 1

3

There are a couple of methods achieving the goal, but you do NOT use blade any more. Here I am just explaining the easiest way.
1. create a index.php (not index.blade.php), in your routes.php, you have:

Route::get('/', function()
{
    return View::make('index');
});

It will return you the index page.
In index.php, please include

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.3/angular-route.js"></script>

or your local dependencies.

  1. In the public folder, you can create folder called "js", another folder called "templates".

  2. In the "js" file, creates your "app.js", "controller.js", and etc. (Don't forget to include them in your index.php)

  3. In the "templates" folder, you will create your template html. In your given example, they are "home.html", "about.html", "contact.html"

  4. In the index page, you do the angular routing here.
    app.js:

    var app = angular.module('app', [ 'ngRoute' ]);
    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl : 'templates/home.html',
                controller  : 'mainController'
            })
    
            .when('/about', {
                templateUrl : 'templates/about.html',
                controller  : 'aboutController'
            })
    
            .when('/contact', {
                templateUrl : 'templates/contact.html',
                controller  : 'contactController'
            });
    });
    
Sign up to request clarification or add additional context in comments.

1 Comment

so this means , that all request will be send to default prefix page, and then angular will handle it ? cause if u use angular router on another common html page if i pass an angular route directo to search browser it gives me a 404 error

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.