Introduction to AngularJS

What is AngularJS

• AngularJs is a javascript MV* (Model – View – Whatever) framework for single page browser-based apps. Open source and super-powered by Google from 2010.

• The clean architecture has attracted a large following quickly. Version 1.0 was released on June 2012 and now at 1.2

• Decouple Dom manipulation from application logic.

• Use declarative programming approach for UI and imperative programming approach for the application logic. The application connects together in a declarative way.

• Its support modern desktop and mobile browsers. It also supports internet explorer 8 and above.

Some Awesome features of AngularJS

• Model View Controller architecture which is very well known popular and proven architecture.

• Declarative two-way data binding, AngularJS automatically synchronize data between model and view.

1. 1. : All Angular code must be a wrapper in this directive. This declares that everything within this tag will be treated as an angular application.
   2. : This is one part of the data binding. Here we are using another directive, ng-model, to bind the input to a string. Note that in this example we also see that attribute directives can have arguments.
   3.  

{{name}}

: Whenever you type into the input box, this h2 tag updates automatically. This is the automatic DOM manipulation I mentioned earlier. We were able to do this without writing a single line of JavaScript.

• Dynamic Templates make it very easy to update the user interface.

• Extends HTML with directives. Angular has lots of powerful standards directives or you can extend it. It is fully extensible and works well with other libraries.

• Build with testing in mind, make it easier to unit test different parts.

App Bootstrap

• The injector that will be used for dependency injection within this app is created.

• The injector will then create the root scope that will become the context for the model of our application.

• Angular will then “compile” the DOM starting at the ngApp root element, processing any directives and bindings found along the way.

The MVC of AngularJS

• Model

  • The business data, the data that is shown to the user and with which the user interacts

  • Exposed to the view through the $scope

• View

  • The user interface layer

  • Data bind to the model

  • Calls functions on the controller

  • Use declarative directives for reusable code

• Controller

  • Glues the view and the model together

  • Provides additional functionality

  • Uses additional services for reusable logic

Services

• Services are reusable pieces of business logic, Separation results in reuse and testability

• Created as singleton objects, Inject by AngularJS using dependency injection

• Services are created as part of a module, One module can take a dependency on another module

• Modules are groupings of related functionality, Also used to bootstrap the application

• Angular has a lot of built-in services, such as the $http service, which provides access to the browser’s XMLHttpRequest object for making requests to a server.

Some Service

AngularJS has many kinds of services, some of them are described below:

• $http: Used for XMLHttpRequest handling

• $location: Provide information about the current URL

• $q: A promise/deferred module for asynchronous requests

• $routeProvider: Configure routes in an SPA

• $log: Logging service

Dependency injection of AngularJS

• AngularJS uses dependency injection to decouple modules, Dependencies are automatically injected by the framework

• Based on the parameter name

• JavaScript is often minified in production, Need to provide AngularJS with some extra hints

AngularJS Directives

• Directives allow you to enhance HTML with new capabilities, Start using HTML as a domain specific language

• AngularJS comes with a long list of standard directives, ngApp, ngBind, ngModel, ngRepeat, ngClick, ngEnable/ngDisable, ngHide/ngShow, ngView

Custom AngularJS Directives

• Turn HTML into your Domain Specific Language, we can Use templates to embed complete blocks and Can use either attribute, elements, CSS classes or comments

• Directives let you interact with the DOM, The place for jQuery code

Routing

• Routing is used to create SPA (Single page application) style application, The page can change without using the server

• The ngView is often used to render a template, HTML templates loaded when needed and Can also be preloaded as a script with type=”text/ng-template”

• The $routeProvider service is used to configure the route

• The $location service can be used to navigate, Using an anchor tag is also possible

• The $routeParams service can be used to retrieve parameters, Properties named in the route URL template

$http service

• The service for executing all HTTP requests, The building block for all AJAX requests and can be used as a function – $http(config)

• It offers a number of shortcut methods, $http.post(url, config), $http.get(url, config), $http.put(url, config), $http.delete(url, config)

• Uses the promises API as the result – Provided by the $q

$resource

• Its Creates a service for working with RESTful services and it is much easier than using the $http object

• Standard functions are already preconfigured and Only the common HTTP PUT is missing

• Requires a dependency on ngResource, Located in angular-resource.js

AngularJS is a complete framework for single page application and based on the standard MVC design pattern. Two-way data binding makes it easy to build data entry forms and dependency injection makes it easy to separate modules. The most important is that AngularJs build with testing in mind.

Contributor: Saeed Ahmed, Software Engineer, Nascenia