Angular Presentation

AngularJS

ForBeginners

What you should understand HTML CSS JavaScript BDD – Behavior driven development TDD – Test Driven Development Abbreviations such as;

XML - Extensible Markup Language JSON - JavaScript Object Notation DOM - Document Object Model AJAX - Asynchronous JavaScript and XML

Why use AngularJS

It’s a Framework Language that; Helps organize your JavaScript code Makes your code reusable and maintainable Creates a fast and responsive websites and applications Makes your code easy to test

It works very well with JQuery

Only use JQuery when you know Angular doesn’t have the solution

How AngularJS works

Two Way Data Binding

Directives Similar to built in JavaScript functions Directives are declared in the opening tags of your HTML

code Angular has a large list of directives - examples include;

ng-app - initializes an AngularJS application ng-init - initializes application data ng-model - binds the value of HTML controls (input, select,

textarea) to application data ng-repeat - clones HTML elements once for each item in a

collection Is possible to create own custom directives

Modules An AngularJS module defines an application A module is a container for the different parts of an application All application components should belong to a module

Modules should be declared in a .JS file

Controllers AngularJS controllers control the functionality and data of

AngularJS applications AngularJS controllers are regular JavaScript Objects e.g.

app.controller(‘myController’, function(){this.property=1;

}); The ng-controller directive defines the controller e.g.

<body ng-app=”testApp”><div ng-controller=”myController as (alias)”></div>

</body>

Expressions Are declared with double curly braces {{ Expression }}

They display and compute different types of data Links our model data to our view Expressions can do many different things;

- Compute mathematical equations {{ 4+5-6 }}- Compute variable equations {{ price * units }}- Displays variable data bound by ng-model {{ variable }}- Displays element values from an array {{ array[3] }}- Displays data from an object {{ person.firstName }}

Validation

We deal with 4 main Directives for validation in Angular; Ng-pristine - User has not interacted with the field yet

Ng-dirty - User has interacted with the field

Ng-valid - The field content is valid

Ng-invalid - The field content is invalid

Combinations of these directives, give us the ability to validate within a scope

Validation ..

Insert ‘novalidate’ at the end of opening form tag Insert ‘required’ at the end of opening tags where

information is needed A few helpful directives when dealing with forms;

Ng-show - Will show scope if true Ng-hide - Will hide scope if true Ng-disabled - Will disable parts of form if true Ng-submitted - Is set if the form was submitted

Filters

Angular has 5 different built in filters; currency - Format a number to a currency format filter - Select a subset of items from an

array Lowercase - Format a string to lower case orderBy - Orders an array by an expression uppercase - Format a string to upper case

The vertical bar symbol ‘|’ is what tells Angular that we’re applying a filter.

Filters ..

We can also create our own custom filterapp.filter(‘testFilter’, function(){

return function(input){ };});

Ng-Include

Used only for very basic snippets of code and JavaScript

When you use a snippet of code repeatedly, we can cut and paste it into a new .HTML file

To make an AJAX request for the code in this new .HTML file, we use the directive ng-include.

<div ng-include = “ ’ (name_of_page).html ’ ” > </div>

Now the code within that .HTML file will be used in that div scope

Custom Directives Should be created when dealing with complex JavaScript Declared within a function linked to a module just like a controller or

filterapp.directive(‘directiveTitle’, function(){

return{

Restrict: ‘E’, templateUrl: ‘(name_of_page).html’, controller: function(){ (Add here any JavaScript from controller) }, controllerAs: ‘(alias_used_in_code_in_new_.html_file)’

};

});

We call this directive as follows <directive-title> </directive-title>

AngularJS Functions The AngularJS Global API is a set of global JavaScript functions

for performing common tasks like: Comparing objects Iterating objects Converting data

Here is a list of some API functions; angular.lowercase() - Converts a string to lowercase angular.uppercase() - Converts a string to uppercase angular.isString() - Returns true if the reference is a string angular.isNumber() - Returns true if the reference is a

number

Dependency Injection

var app = angular.module(‘myModule’, [ ]);

Empty array of dependencies It’s a software design pattern Components are given dependencies instead of hard coding

them within the component This relieves a component from locating the dependency and

makes dependencies configurable This helps in making components reusable, maintainable and

testable

Dependency Injection - Services

When Angular loads it creates an injector, when a service is declared, it is registered with the injector

The Injector takes in the service(s) and passes them into a component as an argument(s) this is called Dependency Injection

app.controller('myCtrl', [‘$http’, function($scope, $http){}]);

Declare our service Pass service as parameter to controller

An array of dependencies must be created when using any Angular service, for all angular components

What is a Service

It provides us method to keep data across the lifetime of the angular app

It provides us method to communicate data across the controllers in a consistent way

Is a singleton object and it gets instantiated only once per application

It is used to organize and share data and functions across the application

You can also create you own custom service with the use of either; .factory .service

Custom Service - Service A simple example using .service is below;

Var module = angular.module(‘myApp’, []);module.service(‘userService’, function(){

this.users = [‘John’, ‘James’, ‘Jake’];this.addUser = function(user) {}

}); It implements two lines of code in the background

var this = {}return this

Is known and treated as a constructor function

Custom Service - Factory A simple example using .factory is below;

Var module = angular.module(‘myApp’, []);module.factory(‘userService’, function(){

Var peeps = {};peeps.users = [‘John’, ‘James’, ‘Jake’];peeps.addUser = function(user) {}return peeps;

}); We create an empty object and return that object in a .factory

service We use a factory service instead of a service service, when we

want to return a function instead of an object.

Services - Summary

Angular services will always start with a $ sign e.g. $http

Angular supplies many useful services like; $http $route $window $location

It’s our job to read through the Angular API to Understand what built in services they have supplied

Summary Two-way Data Binding Helps create fast and responsive websites Modules define our application Controllers control our application Dependency Injection

Injector Dependency Array

Services organize and share data and functions across the application Singleton design pattern

Any Questions?

Angular Presentation

Documents

Transcript of Angular Presentation