This document provides an overview of key concepts in AngularJS including two-way data binding, directives, modules, controllers, expressions, validation, filters, services, dependency injection, and custom directives and services. It explains how AngularJS uses directives, modules, and controllers to organize code. It also covers core functions like data binding, validation, filters, and dependency injection via the injector.
2. 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
3. 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
6. 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
7. 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
8. 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>
9. 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 }}
10. 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
11. 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
12. 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.
13. Filters ..
We can also create our own custom filter
app.filter(‘testFilter’, function(){
return function(input){ };
});
14. 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
15. 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>
16. 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
17. 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
18. 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
19. 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
20. 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
21. 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.
22. 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
23. 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