GETTING STARTED WITH ANGULARJS WITH LARAVEL

By Imran Iqbal In Views - - Comments(0) - Views(21961)
Tags : angularjs with laravel, angularjs, laravel, laravel tutorials, php laravel

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>

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 .

ANGULARJS 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 <base href=”/”> 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 .

Thanks

KodeInfo Team

Author

Imran is a web developer and consultant from India. He is the founder of KodeInfo, the PHP and Laravel Community . In the meantime he follows other projects, works as a freelance backend consultant for PHP applications and studies IT Engineering . He loves to learn new things, not only about PHP or development but everything.

comments powered by Disqus