Single Page webapp with Laravel 8 + AngularJS(1.8)

4 min readJan 30, 2021

Single page application has become very popular, considering their huge potential in building a dynamic web applications. Here we will create single page angularjs application with laravel 8 (can use different versions) as a backend server on shared hosting….

Install Laravel And Create New Project

For the most thorough documentation follow the instructions here:

Installation

Laravel is a web application framework with expressive, elegant syntax. A web framework provides a structure and…

laravel.com

Hit the following command in command line to create new laravel project :)

Your fresh laravel application is ready now you can run application with following command (inside project directory):

Application is running now on “http://127.0.0.1:8000” check on browser you will see laravel application homepage.

8000 is default port provided by laravel you can use another ports as well like

php aritsan serve — port=8100

then application will run on “http://127.0.0.1:8100”

Add Angularjs dependencies in project

Open project inside your favorite IDE I am using Intellij Idea 2019

For AngularJs(1.8) go to official angularjs site to download angular.min.js file you can use latest version of angularJs.

AngularJS - Superheroic JavaScript MVW Framework

AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with…

angularjs.org

For routing states on pages we will use angular-ui-router download angular-ui-router.min.js from following link

UI-Router for AngularJS (1.x)

UI-Router is the defacto standard for routing in AngularJS. Influenced by the core angular router $route and the Ember…

ui-router.github.io

Navigate to application’s “public” folder for ex :- C:\examples\AngularJsLaravel\public and create new folder name js to store all angularjs related files. Now here paste both “angular.min.js and angular.ui-router.min.js” inside public/js directory.

create html and css folder as well to store html and css code for your application. Now entire frontend of application is in public directory. we are going to modify now the home page of default laravel application.

Modify “welcome.blade.php” blade file

By default laravel application’s welcome.blade.php is an entry point for UI and for integrating angularjs to laravel application we need to modify code of welcome.blade.php

Along with that will create app.js as a default controller for handling routing states in app (create new jscontrollers folder to store all angularjs ui-controllers)

If you dont’t want to download angular.min.js and angular-ui-router.min.js you can add them as link in script tag in blade.php like..

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script><script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>

this lines will add angularjs to your laravel project.

Note :- All the html file’s js-controllers need to be add in welcome.blade.php because its single page application which is going to load all html pages on one blade.php file

Create app.js to control ui-states

In app.js we will create the configuration for changing ui states as follows

app.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise(function ($injector, $location) {
        let $state = $injector.get('$state');
        $state.go('/');
        return true;
    });

    $stateProvider.state('/', {
        url: '/',
        views: {
            "mainView": {
                templateUrl: "html/home.html",
                data: {title: 'Home'},
                controller: 'HomeController'
            }
        }
    })


});

Here state “/” represent the default home page which is redirecting to home.html you can add more states with templateUrl and its controller.

Modify code in home.html as you need we are going to show some heading only with <h1> tag :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>Welcome To Home</h1>

</body>
</html>

Now all set hit the same localhost url in browser to see the changes http://127.0.0.1:8000

Now you can see the home.html page is loaded by default

Great so all good , we are done with setting up angularjs with laravel.

In conclusion

Basically, the purpose of creating this project is to demonstrate how we can create single page web application with the help of angularjs and laravel. Instead of using default views(blade.php) we can use angularjs as frontend framework :)

Find the code here and next will create single page web application with angular 8 + laravel 8 for shared hosting

GitHub link :- https://github.com/rizzSheikh/AngularJSLaravel