Integrating Angular JS with Magento ~ Web Speaks

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

9 comments

Unknown

March 26, 2014 at 4:04 AM

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

March 26, 2014 at 5:07 AM

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

Anonymous

June 5, 2014 at 3:04 AM

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??

June 5, 2014 at 3:30 AM

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

Chuck Norton

June 11, 2014 at 3:16 PM

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?

June 11, 2014 at 8:15 PM

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.