Getting Started With AngularJS and LARAVEL

Getting Started With AngularJS and LARAVEL

  • 2016-08-23
  • 3485

Laravel is a PHP Framework with lot of awesome features packed into it . You will never switch to any other framework if the requirements can be fulfilled by Laravel . We have covered some of topics related to Laravel  . If you are new to Laravel we strongly recommend you to go through this tutorials

What is AngularJS

AngularJS is a Javascript MVC framework . It is developed to be friendly with both developers and designers . It is very powerful client-side framework . It has directives and tags which define behaviours for example ng-click is an attribute which says when user clicks on this element do something maybe call a method like below .

<button class="btn btn-success" type="submit" ng-click="doSomething()">Click here to call doSomething<button> - See more at: http://www.kodeinfo.com/post/getting-started-with-angularjs-with-laravel#sthash.9GXeeqn5.dpuf

In AngularJS utility code can easily be separated as services and can be injected in controllers . Controllers encapsulates your application behaviour . It also provides two-way data binding , routing , animations ,templating ,dependency injection and testing is a breeze for AngularJS .

AngulrJS With LARAVEL

I assume you have Laravel Installed . Go to AngularJS website and click on Download button you , here you can download latest stable build of AngularJS or directly link from CDN , I prefer CDN due to many reasons some of them are Better caching , Decreased Latency and Increased Parallelism . Create a new file index.php in views folder and paste below content .

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Simple Angular APP</title>
  
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
  
        <base href="/">
    </head>
  
    <body>
  
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Ticket</a>
                </div>
  
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a href="/settings">Settings</a>
                        </li>
                    </ul>
  
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
  
        <div ng-view></div>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.2.8/angular-route.js"></script>
        <script src="/js/main.js"></script>
    </body>
</html>

NG-APP

Our html element have a ng-app attribute . Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page – e.g. on the <body> or <html> tags.  Only one AngularJS application can be auto-bootstrapped per HTML document .

NG-VIEW

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the$route service.

Now create a new file public/js/main.js

var app=angular.module("myApp",['ngRoute']);
  
app.config(function($routeProvider, $locationProvider){
  
    $routeProvider.when('/',{
        templateUrl:"templates/home.html",
        controller:"HomeController"
    })
    .when('/settings',{
        templateUrl:"templates/settings.html",
        controller:"SettingsController"
    })
    .otherwise({
        redirectTo:'/'
    });
  
    $locationProvider.html5Mode(true);
});
  
app.controller('HomeController',function($scope){
  
});
  
app.controller('SettingsController',function($scope){
  
});

In the above code we have created a module using angular.module and loaded ngRoute as dependency . In app.config we have injected routeProvider as dependency and used routeProvider to define two routes i.e / and /settings . When user navigates to / home.html will be loaded and HomeController will handle behaviour of our view . When user navigates to /settings then settings.html will be loaded and SettingsController will handle behaviour of our view . We have set in our view and using locationProvider html5mode as true which will below #/ from the URI . Try removing this lines and go to our view once you are done with Laravel Part .

Lets create our html files (home.html and settings.html) . Create a new folder in public/ and name it templates . Our html files are below .

home.html

<h1>This is home page</h1>

settings.html

<h1>This is settings page</h1>

Now we are left with Laravel part . Our routes.php file looks something like this:

Route::get('/', function()
{
return View::make('index'); // will return app/views/index.php
});
  
// =============================================
// CATCH ALL ROUTE =============================
// =============================================
  
//This will redirect all missing routes to AngularJS Framework .
App::missing(function($exception)
{
return View::make('index');
});
If you have any problem with tutorial please comment below .

Suggest

Learning PHP 7: From the Basics to Application Development

The Complete PHP 7 Guide for Web Developers

Up to Speed with PHP 7

Angular 2 - The Complete Guide (Updated to RC4!)

Angular 2 with TypeScript for Beginners: The Pragmatic Guide