Java Login

About javalogin.com

Hello guys,
javalogin.com is for Java and J2EE developers, all examples are simple and easy to understand 

It is developed and maintained by Vaibhav Sharma. The views expressed on this website are his own and do not necessarily reflect the views of his former, current or future employers. I am professional Web development. I work for an IT company as Senior Consultant. Primary I write about spring, hibernate and web-services. I am trying to present here new technologies.


Next >>     


AngularJs


AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals 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:

  • Scope
  • Controller
  • Model
  • View
  • Services
  • Data Binding
  • Directives
  • Filters

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

angular.module()

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:


var myModule = angular.module('moduleName');



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

  • Value -It is a javascript object It passes values to controller config phase
  • Factory-It is a function which returns value. It produces value on demand when a service or controller needed.
  • Service -It is a singleton javascript object which have a set of functions to execute certain tasks. It is defined by service() function.
  • 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.


<html ng-app="myApp">

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:


<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>


Next >>