angular presentation
TRANSCRIPT
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?