AngularJS

an introduction

What is AngularJS?

  • MVC (-ish)
  • Data binding, as in {{amazing}}
  • DOM control structures for repeating, showing and hiding DOM fragments
  • Attaching new behavior to DOM elements
  • Grouping of HTML into reusable components
  • Feels kinda magical

A complete client-side solution

Data Binding

Hello World!

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.min.js"></script>
        <script src="hello_world_controller.js"></script>
    </head>
    <body>
        <div ng-app="HelloWorldApp">
            <div ng-controller="HelloWorldController">
                <h1>{{greeting}}</h1>
            </div>
        </div>
    </body>
</html>
angular.module('HelloWorldApp', [])
   .controller('HelloWorldController', function($scope) {
       $scope.greeting = "Hello World";
});

Controllers

Scopes

Services

AngularJS Module

Service 1

Service 2

Service 3

Ctrl 1

Ctrl 2

Ctrl 3

Ctrl 1

Ctrl 2

Ctrl 3

Singletons

Instances

Business

Logic

View

Logic

Services

angular.module('myApp', [])
    .service('MyBusinessLogic', [() => {
        this.sendMessage = function (message) {
            // do something with message
        };

        this.getMessages = function () {
            let messages = [];

            // get messages, somehow

            return messages;
        }
    }])
    .controller('MyViewController', ['MyBusinessLogic', (businessLogic) => {
        this.messages = businessLogic.getMessages();
        this.sendMessage = function (message) {
            businessLogic.sendMessage(message);
        }
    }]);
<div ng-controller="MyViewController as ctrl">
    <ul>
        <li ng-repeat="msg in ctrl.messages">{{msg}}</li>
    </ul>

    <button ng-click="ctrl.sendMessage('hello')">send hello message</button>
</div>

Services

$animate - DOM utilities to support animations
$http - facilitates communication with remote HTTP servers (XHR)
$location - manipulate the browser's address bar
$rootScope - the Angular's global scope (avoid using)
$timeout - wrapper for window.setTimeout
$window - wrapper for window

Directives

<div ng-controller="MyViewController as ctrl">
    <ul>
        <li ng-repeat="msg in ctrl.messages">{{msg}}</li>
    </ul>

    <button ng-click="ctrl.sendMessage('hello')">send hello message</button>
</div>
angular.module('myApp', [])
    .controller('MyViewController', [() => {
        this.messages = [
            'message 1',
            'message 2',
            'message 3'
        ];
        this.sendMessage = function (message) {
            console.log(message);
        };
    }]);
<div ng-controller="MyViewController as ctrl">
    <ul>
        <li>message 1</li>
        <li>message 2</li>
        <li>message 3</li>
    </ul>

    <button ng-click="ctrl.sendMessage('hello')">send hello message</button>
</div>

Directives

ngApp - declares an angular app
ngClick - executes a callback when user clicks the element
ngController - attaches a controller to a view
ngHide - hides an element (display: none) based on a property
ngIf - renders an element based on a property
ngModel - binds a model to a user input
ngRepeat - intantiates a template once per item in collection

Directives DIY

<!-- view 1 -->
<div ng-controller="MyViewController as ctrl">
    <ul>
        <li ng-repeat="msg in ctrl.messages">{{msg}}</li>
    </ul>

    <button ng-click="ctrl.sendMessage('hello')">send hello message</button>
</div>

<!-- view 2 -->
<div>
    some content
    <ul>
        <li>hello</li>
        <li>world</li>
    </ul>
</div>

Directives DIY

angular.module('myApp')
    .directive('view-one', [() => {
        return {
            restrict: 'E',
            templateUrl: 'view1.html',
            controller: 'MyViewController',
            controllerAs: 'ctrl'
        };
    }]);
angular.module('myApp')
    .directive('view-two', [() => {
        return {
            restrict: 'E',
            template: `
<div>
    some content
    <ul>
        <li>hello</li>
        <li>world</li>
    </ul>
</div>
            `
        };
    }]);
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body ng-app="myApp">
    <view-one></view-one>
    <view-two></view-two>
</body>
</html>

Filters

Filters

currency - Formats a number as a currency (ie $1,234.56).
date - Formats date to a string based on the requested format.
filter - Selects a subset of items from array.
limitTo - Creates a new array or string containing only a specified number of elements.
lowercase - Converts string to lowercase.
orderBy - Returns an array ordered by a comparator function.
uppercase - Converts string to uppercase.

This was level 0

  • AngularJS: Up and running, Shyam Seshadri, Brad Green
    • Mandatory
  • PRO AngularJS, Adam Freeman
    • Intermediate
  • Build Your Own AngularJS, Tero Parviainen
    • Advanced

Homework time!

This was level 0

Homework time!

Godspeed you! Amazing Graduates

Shoot questions - to me or anybody around you!

AngularJS

By André Duarte

AngularJS

  • 344