Upgrade Your App to Angular 1.5 Components and Beyond!

Category: Angular 1.5, angular 2 components, AngularJS, JavaScript, nilsonj, Refactoring

With each new release of AngularJS, the development team is trying to bridge the gap between AngularJS 1.x and 2. With the release of AngularJS 1.5, developers will be able to write applications structurally similar to AngularJS 2.0.

In this tutorial, we’re going to create a grid directive in AngularJS 1.4. We’ll then walk through the steps to upgrade it to 1.5, and afterwards look at how we could convert it to work with version 2.0.

Getting Started

Let’s start by creating a project directory called AngularMigrateApp. Within this folder, create an HTML page called index.html. Here is what the page should looks like:

<!DOCTYPE html>
<html lang="en" ng-app="myApp" class="no-js">
<head>
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <script src="https://code.angularjs.org/1.4.10/angular.js"></script>
</body>
</html>

As well as the Angular framework, we’ll also make use of Bootstrap to design our directive layout. We’re including both of these files direct from CDNs.

Creating a Grid Directive

Let’s create a simple grid directive to display a JSON array. We’ll start by creating an AngularJS module.

angular.module('myApp', [])
    .constant('employees', [{
        firstName: 'Rima',
        lastName: 'George',
        location: 'San Francisco'
    }, {
        firstName: 'Shaun',
        lastName: 'John',
        location: 'Germany'
    }, {
        firstName: 'Rahul',
        lastName: 'Kurup',
        location: 'Bangalore'
    }, {
        firstName: 'Samson',
        lastName: 'Davis',
        location: 'Canada'
    }, {
        firstName: 'Shilpa',
        lastName: 'Agarwal',
        location: 'Noida'
    }])

    .controller('HomeCtrl', ['$scope', 'employees', function($scope, employees) {
        $scope.employees = employees;
    }])

We’ve defined a constant called employees that holds an array of example data. We then inject this array into HomeCtrl, and make it available on the controller’s scope.

Let’s create a directive called myGrid, which we’ll use to display the above JSON array.

.directive('myGrid', function() {
    return {
    }
})

We want to use the directive via a tag name, like this:

<my-grid></my-grid>

So, we’ll add the restrict option to specify that:

.directive('myGrid', function() {
    return {
        restrict: 'E'
    }
})

Next we want to pass the employees data from the view to the directive. So, we’ll add it as a binding:

.directive('myGrid', function() {
    return {
        restrict: 'E',
        scope: {
            info: '=info'
        }
    }
})

Now we’ll be able to pass the employees data to the directive as an attribute:

<my-grid info="employees"></my-grid>

Last but not least, we need an HTML template to display the data:

.directive('myGrid', function() {
    return {
        restrict: 'E',
        scope: {
            info: '=info'
        },
        templateUrl : '/directiveGrid.html'
    }
})

Add the following HTML template script in body of index.html.

<script type="text/ng-template" id="/directiveGrid.html">
    <div class="panel panel-primary">
        <div class="panel-heading">Site Point Directive Grid</div>
        <table class="table">
            <thead>
                <tr>
                    <th>FirstName</th>
                    <th>Last Name</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in info">
                    <td>{{ employee.firstName }}</td>
                    <td>{{ employee.lastName }}</td>
                    <td>{{ employee.location }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</script>

As you can see in the code above, we are iterating over the info property and displaying each of the items in the employees list.

Let’s use the myGrid directive inside index.html. Add the following code:

<div ng-controller="HomeCtrl">
    <my-grid info="employees"></my-grid>
</div>

We have specified the HomeCtrl controller and inside it used our directive. Save the changes and browse to the index.html page. Here is a demo of the data grid in action:

See the Pen AngularJS 1.4 Demo by SitePoint (@SitePoint) on CodePen.

Upgrading to 1.5

So far we’ve created an AngularJS directive using version 1.4 and it’s working pretty well. Now, let’s try to use the same code with AngularJS 1.5 and see if any thing breaks.

Continue reading %Upgrade Your App to Angular 1.5 Components and Beyond!%

You must be logged in to post a comment.

blog