ngTraining

An Introduction to Angular

Created by Chris Atkin

What is Angular?

Angular is an MVC framework for creating web apps.

• Create interactive single page applications, using JavaScript, HTML and more

• Extend HTML with data binding and new features

• Build well structured, easily testable, and maintainable front-end applications

Getting Started

<script src="https://code.angularjs.org/1.5.0/angular.js"></script>

<div ng-app="">
    <p>Name:
        <input type="text" ng-model="name">
    </p>
    <p ng-bind="name"></p>
</div>

• ng-app: bootstraps your application to a HTML element

• ng-model: binds an input element to an Angular model

• ng-bind: binds the contents of an element to a model

Expressions

<p>{{ name }}</p>

<p>{{ 5 + 5 }}</p>

<p>{{ myFunction() }}</p>

Expressions can be written within double curly braces (or mustaches). They'll print any variables, expressions or returns of functions placed within.

Modules & Controllers

Angular modules define AngularJS applications.

Angular controllers control AngularJS applications.

<div ng-app="myApp" ng-controller="myCtrl">

    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = 'Chris';
        $scope.lastName = 'Atkin';
    });
</script>

Modules

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

• Defined with the module method
• First argument is the module name (used in ng-app)
• Second argument is an array of dependencies
• Dependency array must be present, even if empty, to declare a module

Controllers

var app = angular.module('myApp');
app.controller('myCtrl', function($scope) {
    $scope.firstName = 'Chris';
    $scope.lastName = 'Atkin';
});

• Defined with the controller method
• First argument is the controller name (used in ng-controller)
• Second argument is the controller function
• The module is retrieved by only passing it's name; no dependency array

$scope & controller members

$scope is the glue between markup and controllers, and can be used for variables and functions.

app.controller('myCtrl', function($scope) {
    $scope.name = 'Chris';
    $scope.myFunction = function() {
        return 'Hello world';
    }
});

<p>{{ name }}</p>
<!--<p>Chris</p>-->

<p>{{ myFunction() }}</p>
<!--<p>Hello World</p>-->

Controller-As Syntax

Starting in Angular 1.2, controllers can be used with controllerAs syntax.

app.controller('myCtrl', function() {
    var vm = this;
    vm.name = 'Chris';
});

<div ng-controller="myCtrl as vm">
    <p>{{ vm.name }}</p>
</div>

This makes scoping much clearer, and allows us to nest controllers. This becomes very useful in routing...

Directives

Angular provides many ways to extend HTML elements and attributes using Directives.

These can be used to bind data, dynamically hide or show elements, repeat elements over collections or almost anything else that requires manipulation of the DOM.

They can be very powerful, and take variables, expressions or functions as inputs.

Using Directives

Directives can be bound to an element as an attribute, create as a standalone element, or declared via classes and comments. However, it's recommended to only define them as attributes or elements, to make it easier to identify directives.

<my-dir></my-dir>

<span my-dir="exp"></span>

<!-- directive: my-dir exp -->

<span class="my-dir: exp;"></span>

ng-model & ng-bind

These directives allow you to bind a variable to a HTML element. As we saw previously, ng-bind can also be used as an expression, with curly braces.

<input type="text" ng-model="vm.name">

<p ng-bind="vm.name"></p>
<!-- is the same as -->
<p>{{ vm.name }}</p>

ng-bind can be much faster than an expression, but may need additional markup.

ng-show & ng-hide

These directives allow elements to be hidden or revealed based on scope properties. The element is hidden by CSS.

<p ng-show="true">This should be visible</p>
<p ng-hide="true">This should be hidden</p>

ng-if

This directive is similar to ng-show/ng-hide, but removes the element from the DOM.

<p ng-if="true">This should be included in the DOM</p>
<p ng-if="false">This should be removed from the DOM</p>

ng-repeat

This directive allows you to repeat an element for a collection.

app.controller('myCtrl', function() {
    var vm = this;
    vm.items = ['item1', 'item2', 'item3'];
});

<p ng-repeat="item in vm.items">{{ item }}</p>

<!--
<p>item1</p>
<p>item2</p>
<p>item3</p>
-->

ng-repeat continued

ng-repeat can access properties on an array of objects, and order the array while repeating.

app.controller('myCtrl', function() {
    var vm = this;
    vm.people = [
    { name: 'Chris', id: 2},
    { name: 'Mark', id: 1}
    ];
});

<p ng-repeat="person in vm.people | orderBy:'id'">{{ person.name }}</p>

<!--
<p>Mark</p>
<p>Chris</p>
-->

ng-class

This directive allows CSS classes to be added to an element depending on variables. It can use the variable explicitly:

vm.class = 'myClass';

<p ng-class="vm.class">I'll get 'myClass' as a CSS class</p>

Or as part of an expression:

vm.error = true;

<p ng-class="{ 'error-class': vm.error }">I'm an error!</p>

Custom Directives

Directives can be defined with the directive method on a module.

angular.module('myApp').directive('myDirective', function() {
    return {
        template: '<p>{{ vm.myVariable }}</p>',
        controller: 'myCtrl',
        restrict: 'EA',
        controllerAs: 'vm',
        bindToController: {
            myVariable: '=',
        },
        scope: {}
    }
});

Defining Directives

• template or templateUrl: markup for your directive, either a string or path to html template

• controller: controller for your directive, specified either by a controller name or a function

• restrict: how your directive can be used: A as an attribute, E as an element, C as a class, M as a comment

Defining Directives, part 2

• controllerAs: the controller-as alias for your template

• bindToController: variables, specified as attributes when the directive is called, that will be bound to the controller above

• scope: the scope that will be created for the directive. Can be inherited from it's parent element or created in isolation

Angular Filters

Filters in Angular are used to manipulate bound data. They can be used in HTML expressions, or in controllers via the $filter service.

var formattedDate = $filter('date')(vm.dateOfBirth, 'dd/MM/yyyy');

<p>{{ vm.dateOfBirth | date:'dd/MM/yyyy' }}</p>

Angular has built in filters for formatting dates, numbers and currency, ordering arrays and more. You can also define your own filters.

Date Filter

<p>{{ vm.dateOfBirth | date:'dd/MM/yyyy' }}</p>

<!--<p></p>-->

The date filter formats dates. The string in single quotes defines the date format. Angular supports a range of constructed and default date formats, such as 'dd/MM/yyyy' and 'fullDate'.

Number Filter

<p>{{ vm.myDecimal | number:4 }}</p>

The number filter formats numbers, changing the decimal places (via the passed parameter) or displaying the infinity sign for infinite values. If the input is null or undefined, it will just be returned.

Order-By Filter

<p ng-repeat="vm.people | orderBy:'name'">{{ person.name }}</p>

The orderBy filter orders a specified array by an expression. It is ordered alphabetically for strings and numerically for numbers.