Angular Presentation

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

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 filter
app.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 filter
app.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

Angular Presentation

More Related Content

What's hot

Viewers also liked

Similar to Angular Presentation

Angular Presentation