An Implementation Tour to AngularJS

An Implementation Tour to AngularJS

• 1.
  International Journal onRecent and Innovation Trends in Computing and Communication ISSN: 2321-8169 Volume: 5 Issue: 7 358 – 360 _______________________________________________________________________________________________ 358 IJRITCC | July 2017, Available @ http://www.ijritcc.org _______________________________________________________________________________________ An Implementation Tour to AngularJS Preeti Yadav# #Extension Lecturer in Govt College Gurgoan (Haryana) Priti16rao@gmail.com Bhupender Singh# #District Manager in HSWAN Project at Narnaul (Haryana) bhupender.311@gmail.com Abstract:- Angular Java Script Framework extends the HTML attribute.It easily binds the data to HTML with expression only for adding the Script tag in HTML coding. Angular Java Script Framework is mostly used for making the dynamic web page as well as also increase the web performance. The paper totally revolves around how to create client side applications. Keywords:- JS, MVC,DOM,HTML __________________________________________________*****_________________________________________________ I. INTRODUCTION: Angularjs is a javascript Framework . Its angular library written in javascript. Angularjs extends HTML with NG- directives. An angularjs application is defined by the NG-model directive and NG-bind directive binds application data to the HTML view. REASONS BEHINDS TO USE OF ANGULARJS DATA BINDING - AngularJS provides a powerful data binding mechanism to bind data to HTML elements byusing scope. CUSTOMIZE & EXTENSIBLE - AngularJS is customized and extensible as per you requirement. You can createyour own custom components like directives, services etc. CODE REUSABILITY - AngularJS allows you to write code which can be reused. For example custom directive which you can reuse. SUPPORT – AngularJS is mature community to help you. It has widely support over the internet. Also,AngularJS is supported by Google which gives it an advantage. COMPATIBILITY - AngularJS is based on JavaScript which makes it easier to integrate with any other JavaScript library and runnable on browsers like IE, Opera, FF, Safari, Chrome etc. TESTING - AngularJS is designed to be testable so that you can test your AngularJS app components easyas possible. It has dependency injection at its core, which makes it easy to test. KEY FEATURES:  Two Way Data Binding  MVC design pattern  Filters  Templates  Dependency Injection  Directives  Unit Testing  Deep Linking  Context Aware Communication  DOM manipulation  Controller 1) SCOPE is a JavaScript object that refers to the application model. It acts as a context for evaluating angular expressions. Basically, it acts as glue between controller and view. 2) MODULE:- the module is a storage area for the different parts of an application and its controller, that always belong to a module. It is created with the syntax of angularJS function angular Module. 3) CONTROLLER:- it controls the angular JS application . A controller is a JavaScript object and created by Java Script Constructor. 4)DIRECTIVES- AngularJS directives are a combination of AngularJS template markups (HTML attributes or elements, orCSS classes) and supporting JavaScript code. The JavaScript directive code defines the template data and behaviors of the HTML elements.. There are some built-in
• 2.
  International Journal onRecent and Innovation Trends in Computing and Communication ISSN: 2321-8169 Volume: 5 Issue: 7 358 – 360 _______________________________________________________________________________________________ 359 IJRITCC | July 2017, Available @ http://www.ijritcc.org _______________________________________________________________________________________ directives provided by AngularJS like as ng-app, ng- controller, ng-repeat, ng-model etc. 5) FILTERS:- Filters are used to format data before displaying it to the user. They can be used in view templates, controllers, services and directives. There are some built-in filters provided by AngularJS like as Currency, Date, Number, Order By, Lowercase, Uppercase etc. You can also create your own filters. 6)DI: Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. AngularJS comes with a built-in dependency injection mechanism. You can divide your AngularJSapp into multiple different types of components which AngularJS can inject into each other. II. WORKING ARCHITECTURE OF ANGULARJS :- Angular initializes automatically upon DOM Content Loaded event or when the angular.js script is downloaded to the browser and the document. ready State is set to complete. At this point AngularJS looks for theng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will: 1. Load the module associated with the directive. 2. Create the application injector. 3. Compile the DOM starting from the ng-app root element. III. IMPLEMENTATION For implementation the concept of angularJS framework , we take an employ management system. This application is created using yoman & uses npm & bower modules with grunt ad build tool. This application code is shared on github repository. To clone & download the code please refer to below github link Linkhttps://github.com/priti16rao/EmpMgtSystem.git Getting Started: 1) Run grunt build & grunt serve command to build & serve the application. I am attaching some snapshots of application. i) Home Page ii)Add a new Employee ii) Sort and Search iii) Multiple Views
• 3.
  International Journal onRecent and Innovation Trends in Computing and Communication ISSN: 2321-8169 Volume: 5 Issue: 7 358 – 360 _______________________________________________________________________________________________ 360 IJRITCC | July 2017, Available @ http://www.ijritcc.org _______________________________________________________________________________________ IV. CONCLUSION In this paper , we examine the Employ Details and check the effectiveness of given Automated details by creating the Employ Details on angularjs. REFERENCES [1] http://www.w3 schools.com/angular [2] http://research .google.com [3] AngularJS:A modern MVC Framework In JavaScript by nilesh jain in Journal of Global Research In Computer Science, Volume 5, No.12, december 2014. [4] http://Github.com/angular5)https://www.tutorialspoint.co m/angularjs