AngularJS

Angular is a JavaScript framework that helps build web applications.

Benefits of AngularJS

• Dependency Injection
• Two Way Data-Binding
• Testing
• Model View Controller
• Directives, Filters, etc...

Module in AngularJS

A module is a container for different parts of your application i.e controllers, services, directives, filters, etc.

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

Controller in AngularJS

In angular a controller is a JavaScript function. The job of the controller is to build a model for the view to display.

var myController=function($scope){

$scope.message="Angular JS";

};

when the controller name is misspelled,

• An error is raised. To see the error, use browser developer tools.
• The building expressions in the view that are in the scope of the controller will not be evaluated.

when the property name in the binding expression is misspelled,

• angular will not report any error. It will simply return null or undefined.

Two way Data-Binding in AngularJS

The two way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.

Binding expression updates the view when the model changes

{{firstname}}

ng-model directive updates the model when the view changes

<input type="text" ng-model="firstname">

ng-model directive can be used with

• input
• select
• textarea

AngularJS Filters

Filters are used to format, sort, and filter data.

Filters can be used with a binding expression or a directive.

• currency Format a number to a currency format.
• date Format a date to a specified format.
• filter Select a subset of items from an array.
• json Format an object to a JSON string.
• limitTo Limits an array/string, into a specified number of elements/characters.
• lowercase Format a string to lower case.
• number Format a number to a string.
• orderBy Orders an array by an expression.
• uppercase Format a string to upper case.

To apply a filter use pipe(|) character

{{ expression | filterName:parameter }}

To sort the data in Angular

-Use orderBy filter

 {{ orderBy_expression | orderBy: expression : reverse }}

 {{ x in cars | orderBy:'model':false }}

 to sort in ascending order, set reverse to false.

 to sort in descending order, set reverse to true.

AngularJS Services

A service in Angular is simply an object that provide some sort of service that can be used with in an angular application.

Services encapsulate reusable logic that does not belong anywhere else(i.e Directives, Filters, Views, Models, and Controllers)

Benefits of using services:

• Reusability
• Dependency Injection
• Testability

Express JS

Introduction

• Developed by TJ Holowaychuk in November 2010.
• Is a web application framework for Node.js.
• Free and open-source software.
• Licensed under MIT.

Features

• Facilitates the rapid development.
• Allow to set up middleware to respond to HTTP requests.
• Defines a routing table.
• Allows to dynamically render HTML pages.

Environment Setup

• Install node.js and npm

• Install express module by npm command

--save: Package will appear in your dependencies.

Express Routing

• Refers how an application responds to a client request to an endpoint.
• Each route can have one or more handler functions.

app.METHOD(PATH,HANDLER)

Express JS URL Binding

✦req.params used to read the bind values(name,age).
✦regular expression also used to name parameter.

Express JS Middleware

• Express is middleware web framework that has minimal functionality of its own.
• An Express application is essentially a series of middleware function calls.
• Middleware functions access to the request object, the response object, and the next middleware function.

✦app.use() used to Mounts the middleware function or mount to a specified path,the middleware function is executed when the base path matches.

✦The order you place your middleware is very important. Everything will happen in the order that they appear.

Express Router

✦Express router is a class which helps us to create router handlers. By router handler i mean to not just providing routing to our app but also can extend this routing to handle validation, handle 404 or other errors etc.

Express JS Templating

✦Template engine allows you to use static template files in your application.

✦Some popular template engines that work with Express are Pug, Mustache, and EJS.

✦Here, we'll use Pug.

Pug

✦Is a templating engine for express.

✦Earlier it was called Jade.

✦npm command is used to install this package. 

Express Static Files

⊿Are files that clients use as they are from the server.
⊿Files such as images, CSS files, and JavaScript files are served using express.static middleware function.
⊿Express looks up the files relative to the static directory.

app.use(express.static(__dirname+'public'));

⊿We can also set multiple static directories.