and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development
and the testing of
such applications by providing a framework for client-side model-view-controller (MVC) and model-view-viewmodel (MVVM) architectures, along with
components commonly used in rich Internet applications. In 2014, the original AngularJS team began working on the Angular application platform.
It is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. The key features of AngularJS are:
- Data Binding
Angular.js framework has the following advantages:
- Supports two way data-binding
- Supports MVC pattern
- Supports REST full services
- Support static template and angular template
- Can add custom directive
- Supports form validations
- Support both client and server communication
- Support dependency injection
- Applying Animations
- Event Handlers
A module is a collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure
the $injector.we can create a module by using angular.module() function by passing the module name and specifying a list of dependencies
if there are any. Once we define a module we can get handle of the module as follows:
NOTE: Observe that there is no second argument here which means we are getting the reference of a predefined angular module. If you include the second argument, which is an array, then it means you are defining the new module. Some point about angular module:
- Global place for creating, registering and retrieving Angular modules
- A module is a collection of directives, controllers and other stuff
Dependency Injection in AngularJS
Dependency Injection in AngularJS can be defined as the software design pattern which defines the way the software components are dependent on
each other. AngularJS provides a set of components that can be injected in the form of dependencies such as factory, value, constant, service,
and provider. It helps us to remove hard coded dependencies and makes dependencies configurable. Using Dependency Injection, we can make
components maintainable, reusable and testable. Dependency Injection is required for the following
- Separating the process of creation and consumption of dependencies.
- It allows us to create independent development of the dependencies.
- We can change the dependencies when required.
- It allows injecting mock objects as dependencies for testing.
AngularJS uses dependency with several types
- Factory-It is a function which returns value. It produces value on demand when a service or controller needed.
- Provider-It is used to create factory, service etc. in config phase.
- Constant-constants passes values at config phase considering the fact that value cannot be used to be passed during config phase.
bootsraping in angularJS
Bootstrapping in AngularJS is nothing but just initializing, or starting, your Angular app. AngularJS supports automatic and manual bootstrapping also.
Automatic Bootstraping: When you add ng-app directive to the root of your application, typically on the tag or tag if you want angular to bootstrap your application automatically.
When angularJS finds ng-app directive, it loads the module associated with it and then compile the DOM.
Manual Bootsraping: Manual bootsraping provides you more control on how and when to initialize your angular
App. It is useful where you want to perform any other operation before Angular wakes up and compile the page. Below is the example script: