Integrating Angular JS with Magento®

AngularJS is one of the most powerful JavaScript MVC these days. On the other hand Magento is the leading e-commerce framework. In this tutorial I have shown how to integrate angularjs with Magento. At the end of this tutorial we will end up with a single page application in Magento. Isn’t that cool…

Integrate Angular JS with Magento

In this tutorial we assume that we are creating a new module in Magento with name ‘myAapp’. Learn how to create modules in Magento.

Add Angular to Magento

Download angularjs library file to the following location:

/root/skin/frontend/<package>/<theme>/js/angular.min.js

Alternatively you can put the js file at: root/js/angular. But for this tutorial we will use the skin path.

Add the AngularJS to your page:

To add the angularjs library file to the magento site, we need to add it to our layout file. If you want to use angular throughout the Magento site, use ‘local.xml‘. Alternatively we can add use our module’s layout file. The path should look like:

root/app/design/frontend/<package>/<theme>/layout/<module>.xml

Add follwing code to this file:

<reference name="head">
 <!-- Core angularjs file -->
 <action method="addItem">
  <type>skin_js</type>
  <name>js/angular.min.js</name>
 </action>
 <!-- required for template routing -->
 <action method="addItem">
  <type>skin_js</type>
  <name>js/angular-route.min.js</name>
 </action>
</reference>

Initializing the app:

Now open your main template file and add the angular “ng-app” directive to the <body> tag. The template file should be found at:

root/app/design/frontend/<package>/<theme>/template/page/1-column.phtml

Please select the appropriate template according to your theme. Find the ‘body’ tag and replace with following line:

<body<?php echo $this->getBodyClass() ? ' class="' . $this->getBodyClass() . '"' : '' ?> ng-app="myApp">

For any angular app, the ‘ng-app’ directive is mandatory.

Declaring controller:

Go to the module template file and open the base template. In this file you need to specify the angular controller directive. Place the directive on the HTML element where you want angular to work. The element should look like:

<div ng-controller="mainController">
 <div ng-view"></div>
</div>

Here we have used the ng-view directive. This directive acts like a placeholder to add new angular templates in our page. All the future templates will be injected in this view directive.

Creating the angular application:

Create a new JavaScript file at the following location:

root/skin/frontend/<package>/<theme>/js/myApp.js

In this file add the following code:

var myApp = angular.module('myApp', ['ngRoute']);

Here we have created a new angular module with name myApp. The module name should be same as we have specified in our ng-app directive.

Configuring angular routes:

Now we need to specify routing for our module. We need to configure which template will be called on which URL.

var myApp = angular.module('myApp', ['ngRoute']);

//Specify the URL of our view directory
//This directory stores our angular template files
var VIEW_DIR = 'http://mysite.com/skin/frontend/<package>/<theme>/view/';

// configure our routes
byobApp.config(function($routeProvider) {
    $routeProvider
        // route for the start page
        .when('/', {
            templateUrl : VIEW_DIR + 'main.html',
            controller  : 'mainController'
        })
        .when('/wall-station-style', {
            templateUrl : VIEW_DIR + 'about.html',
            controller  : 'aboutController'
        })
        .when('/wall-station-size', {
            templateUrl : VIEW_DIR + 'contact.html',
            controller  : 'contactController'
        })
        .otherwise({ redirectTo: '/' });
});

Creating the controller:

Now we need to create the controller in our JS file:

// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope) {
    $scope.heading = "My Web Store";
    $scope.description = "This is the home page of my store.";
});

The controller contains the bare minimum code. It just define few variables that are used in the template file.

Creating the template:

Till now we haven’t created the angular template (it is not the magento template). We will create all the templates at following location:

root/skin/frontend/<package>/<theme>/view/

As our mainController uses ‘main.html‘ template, so create a file at above location with this name. This file should contain the following code:

<div class="container">
 <h2>{{heading}}</h2>
 <p>{{description}}</p>
</div>

You will definitely need to add more markups to this file.

Now you are ready to run your first Single Page Application in Magento. To access this application go to the module url like: http://mysite.com/myapp

17 thoughts on “Integrating Angular JS with Magento®”

It is too basic, what about catalog, categories, cart and checkout pages ??

Arvind Bhardwaj says:

March 26, 2014 at 12:07 pm

Hi Ali,
You are right. It is the basic tutorial. The catalog, categories, cart and checkout pages will be covered in coming tutorials.

Hi Arvind

I wanted to get an Online Store desgined for about 1000 products.
Should i get it designed on Angular JS or Magento?

I am really confused as the price quoted for a store based on Angular Js is 50k while on Magento, the cost shoots up to 1.5Lacs

Is Magento worth the money??

Arvind Bhardwaj says:

June 5, 2014 at 10:30 am

Hi,
I would suggest to go with Magento. Magento is really strong and secure e-commerce system with all capabilities in-built.

Thanks for this!

Question:

Why did you decide to integrate the one-page-app inside of magento?

what about separating the presentation layer (skin folder) all together, and just using magento’s API for the data?

Arvind Bhardwaj says:

June 12, 2014 at 3:15 am

Hi Chuck,
Your concern is 100% valid. I am working on creating a presentation layer using AngularJS which will consume Magento APIs.
This demo is just for the purpose of integrating AngularJS in Magento.

Thanks.

How to use this with product page, i want to use angularjs from products instead of prototype.js

Hello Dear Arvind,

are there new tutorials for categories, products, checkout etc.? Did you already build some such a site?

Arvind Bhardwaj says:

August 27, 2014 at 2:37 pm

Hi,
I do not have tutorials for other Magento pages right now. Planning to have some 🙂

Thanks.

Hi Arvind,

Can you please update your post with the zip file(module) for this tutorial ?? I followed your steps but couldn't get the desired output.

Thanks for the post.

Arvind Bhardwaj says:

January 9, 2015 at 4:02 am

Hi Francis,
I hope you have missed something in the tutorial, that why you cannot make it work. Please make sure you have made all entries in layout.xml
I will try to make a zip of this as soon as possible.

Thanks.

hi,

This module is not working. Can u will step by step. or Please make zip file as soon as possible.

Thanks,

Arvind Bhardwaj says:

March 10, 2015 at 3:45 am

Hi Sharath,
I will try to find time for making a zip. But its too hard as a number of files are involved. Please make sure you have followed all the steps correctly.

Hi Arvind,
i followed all your instructions, but i was unable to get this to work. Will you be releasing the project files anytime soon?
My main interest is to use angularjs on the <div class="middle"> </div> section of adminhtml. This way only that section will load each time when a button is clicked, since the header, menu, footer, etc. always remain the same. I tried but was unable to achieve this… how would you approach this?

Hello brother this is a good tutorial, I just enjoyed it. But I don't undustend how I can rest my app in magento. Where I can use angular resource module to fetch magento all category and product image & information. Please write a tutorial for that.

Thanks

Hi ARVIND BHARDWAJ,

First of all I would like to thank you for writing this post. I am planning to build eCommerce web app with magneto.
My requirements are as below:
1) Can I customize look and feel of the web app?
2) Can I convert same app as mobile application?
3) Can I have my retailers account to login and add/remove/update products information.