Introduction to AngularJS Development

WHOAMI!

• Understanding AngularJS

• Hackathon

What is AngularJS ?

Background

A Note to Single Page Applications

Separation of Concerns and MVC

Getting to know the players

• Views
• Controllers
• Models
• Services
• Filters
• Directives

The Infamous "Hello World!"

Organizing the code

specific style

domain style

Modules & Controllers

Modules in AngularJS

var myModule = angular.module('myAngularApplication', []);

Controllers in AngularJS

Writing more robust code

• Understanding IIFE
• Making our controllers minification safe
• Using the controller syntax

Using the code

Directives

Built in Directives in Angular

• ng-app
• ng-controller
• ng-init
• ng-bind
• ng-model
• ng-repeat
• ng-options
• ng-click
• ng-show & ng-hide
• ng-style & ng-class

Filters

{{ myData | filter }}

{{ myData | filter:'parameter' }}

{{ myData | filter | yetAnotherFilter }}

• uppercase and lowercase
• number
• date
• currency
• limitTo
• orderBy

Use filters in

Controllers and Services

$scope.allCapsMessage = $filter("uppercase")($scope.message);

$scope.conversionRate = $filter("number")(62.3, 5);

Create a custom filter

angular.module('myAngularApplication').filter('power', function () {
    
    return function (input, powerValue) {

        // Check if power value is falsy
        if (!powerValue) {
            powerValue = 1;
        }

        // Use Math.pow to find the power and return it
        return Math.pow(input, powerValue);
    }
});

Services

How to create a service

• Understanding Revealing Module Pattern
• Implementing our service
• Using the service

Using Angular Built in Service

(function () {

    var remoteBooksService = function ($http) {
        var _fetchBooks = function () {
            return $http.get('http://localhost:80/api_url');
        };

        return {
            fetchBooks: _fetchBooks
        };
    }

    angular.module('myAngularApplication').factory('remoteBooksService', 
["$http", remoteBooksService]);

}());

Building and Validating Data Entry Forms

• Understanding ngForm directive
• Updating the Service
• Controller support Create and Edit
• Create a book entity
• Editing an Entity
• Understanding Angular Validation Framework

Single page applications and Angular Routing

myModule = angular.module('myAngularApplication', ['ngRoute']);

myModule = angular.module('myAngularApplication', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {

        $routeProvider
        .when("/home", {
            templateUrl: "home.html",
            controller: "homeController"
        })
        .when("/about", {
            templateUrl: "about.html",
            controller: "aboutController"
        })
        .when("/contact", {
            templateUrl: "contact.html",
            controller: "contactController"
        }).
        otherwise({
            redirect: '/home'
        });
    }]);

Hackathon Time!