Design And Implementation Of Single Page Application Based On AngularJS

1y ago
30 Views
2 Downloads
756.23 KB
5 Pages
Last View : 14d ago
Last Download : 6m ago
Upload by : Kian Swinton
Transcription

6th International Conference on Recent Trends in Engineering & Technology (ICRTET - 2018) Design and Implementation of Single Page Application Based on AngularJS 1 Prof. B.A.Khivsara,2Mr.Umesh Khivsara 1 Assistant Prof., 2 Website Developer 1 Department of Computer Engineering, 2 UKValley SNJB’s K.B.Jain COE,Chandwad,India., 2Nashik,India 1 Abstract Now a days there are many MVC based frameworks are coming in market. AngularJS is a popular JavaScript MVC-based framework to construct single-page web applications at client side. In this paper, Healthy information includes large amount of continuity data, which will cause code redundancy, long development cycle etc. Problems if developer still using traditional method to develop user interface for healthy information system. The developer designed and built a front-end modular system, based on AngularJS framework. To achieve MVC framework, and separate view, data model, and user behavior, developer using controller as a core to maintain user behavior, directive system to make views reuse, and ui-route service to achieve routing control. The results show that this approach has enhanced the reusability of modules, simplifies the development process, reduce the maintenance cost, also improved the maintainability. Introduction JavaScript is a fundamental client side Web application. The language is used nowadays to construct a variety of systems, including Web applications with stylish user interfaces. As a result, we are observing the birth of new technologies and tools to solve common problems faced in such applications like AJAX,AngularJA,Node.JS etc. Now a days most frameworks are based on Model-ViewController (MVC) architecture . Among them, AngularJS , which is built and maintained by Google, is the most popular framework. AngularJS, the open source JavaScript framework that uses Model–view–controller (MVC) architecture, data binding, client-side templates, and dependency injection to create a much-needed structure for building web apps[1][2] AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: [3] script src "https://ajax.googleapis.com/ajax/libs/ang ularjs/1.6.4/angular.min.js" /script AngularJS extends HTML with ng-directives. The ng-app directive defines that this is an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view. An AngularJS module defines an application.The module is a container for the different parts of an application. The module is a container for the application controllers. Controllers always belong to a module 49 ICRTET0011 www.ijream.org 2018, IJREAM All Rights Reserved.

International Journal for Research in Engineering Application & Management (IJREAM) Special Issue – ICRTET-2018 ISSN : 2454-9150 MODULE AND CONTROLLER IN ANGULARJS A module is created by using the AngularJS function angular.module[4] div ng-app "myApp" . /div script var app angular.module("myApp", []); /script The "myApp" parameter refers to an HTML element in which the application will run.Now you can add controllers, directives, filters, and more, to your AngularJS application. AngularJS controllers control the data of AngularJS applications. AngularJS controllers are regular JavaScript Objects. AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor. . div ng-app "myApp" ng-controller "myCtrl" First Name: input type "text" ng-model "firstName" /div script var app angular.module('myApp', []); app.controller('myCtrl', function( scope) { scope.firstName "John"; }); /script The AngularJS application is defined by ng-app "myApp". The application runs inside the div .The ng-controller "myCtrl" attribute is an AngularJS directive. It defines a controller. The myCtrl function is a JavaScript function. AngularJS will invoke the controller with a scope object. In AngularJS, scope is the application object . The controller creates one property (variable) in the scope (firstName). The ng-model directives bind the input fields to the controller properties (firstName)[6]. CREATING REUSABLE COMPONENTS WITH DIRECTIVES Once the content of the HTML document is received, the browser starts the analysis and the parse process in order to build the DOM tree. When the tree building is done, the AngularJS compiler comes in and starts to go through it, looking into the elements for special kinds of attributes known as directives[5][6]. The following diagram describes the bootstrapping process of the framework that is performed during the compilation process: 50 ICRTET0011 www.ijream.org 2018, IJREAM All Rights Reserved.

6th International Conference on Recent Trends in Engineering & Technology (ICRTET - 2018) Figure 1: Source: Official documentation (www.angularjs.org) In AngulaJS, there are number of directives defines such as ng-app ng-model ng-bind ng-repeat ng-submit ng-click FEATURES OF ANGULARJS FEATURE 1: TWO WAY DATA BINDING[7] Think of your model as the single source of truth for your application. Your model is where you go to read or update anything in your application. Data binding is probably the coolest and most useful feature in AngularJS.It will save you from writing a considerable amount of boilerplate code. A typical web application may contain up to 80% of its code base, dedicated to traversing, manipulating, and listening to the DOM. Data-binding makes this code disappear, so you can focus on your application. There must be a better way! AngularJS' two way data binding handles the synchronization between the DOM and the model, and vice versa. Here is a simple example, which demonstrates how to bind an input value to an p element. 51 ICRTET0011 www.ijream.org 2018, IJREAM All Rights Reserved.

International Journal for Research in Engineering Application & Management (IJREAM) Special Issue – ICRTET-2018 ISSN : 2454-9150 !doctype html html ng-app head script src " http://code.angularjs.org/angular1.0.0rc10.min.js" /script /head body div FEATURE 2: DEPENDENCY INJECTION [7] Dependency Injection is a softwareName: design pattern in which components are given their dependencies instead of hard coding them within the component. This relieves a component from locating the dependency and makes dependencies configurable. This helps in input type "text" making components reusable, maintainable and testable.ng-model "yourName" p Hello,Injection {{yourName}}! /p AngularJS provides a supreme Dependency mechanism. It provides following core components which can be injected into each other as dependencies. /div Value Factory Service Provider Constant /body /html Value is simple javascript object and it is used to pass values to controller during config phase. Factory and Service are used to build your own services.Services, directives, filters, and animations are defined by an injectable factory method or constructor function, and can be injected with "services", "values", and "constants" as dependencies. Example of DI using Value: var mainApp angular.module("mainApp", []); mainApp.value("dInput", 5); mainApp.controller('CalcController', function( scope, Calc, dInput) { scope.num dInput; scope.result CalcSe.square( scope.number); 52 ICRTET0011 scope.square www.ijream.org function() { 2018, IJREAM All Rights Reserved.

6th International Conference on Recent Trends in Engineering & Technology (ICRTET - 2018) COMPARISONS IN COMMUNITY: Community is one of the most important factors to consider when choosing a framework. A large community means more questions answered, more third-party modules, more YouTube tutorials.you get the point. I have put together a table with the numbers. Angular is definitely the winner here, being the 6th most-starred project on GitHub and having more questions on StackOverflow than Ember and Backbone combined, as you can see below Table 1: Comparison chart of AngularJS,Backbone.js and Ember.js [7] Metric AngularJS Backbone.js Ember.js Stars on Github Third-Party Modules 27.2k 18.8k 11k 800 ngmodules 236 backplugs 21 emberaddons 49.5k 15.9k 11.2k StackOverflow Questions 75k 16k 6k YouTube Results 928 230 393 GitHub Contributors 150k 7k 38.3k Chrome Extension Users All those metrics, however, merely show the current state of each framework. CONCLUSION Angular's innovative and fast approach for extending HTML will make a lot of sense for people who are web developers in soul. As it is best option for single page application. With a large community and Google behind it, it is here to stay and grow, and it works well both for quick prototyping projects and large-scale production applications. REFERENCES https://research.google.com/pubs/pub41445.html https://www.w3schools.com/angular/default.asp https://www.w3schools.com/angular/ angular intro.asp https://www.w3schools.com/angular/angular modules.asp Green B, Seshadri S. AngularJS. " O'Reilly Media, Inc."; 2013 Apr 8. Branas R. AngularJS Essentials. Packt Publishing Ltd; 2014 Aug 21. Jain, Nilesh, Ashok Bhansali, and Deepak Mehta. "AngularJS: A modern MVC framework in JavaScript." International Journal of Global Research in Computer Science (UGC Approved Journal) 5.12 (2015): 17-23. 53 ICRTET0011 www.ijream.org 2018, IJREAM All Rights Reserved.

AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag: [3] AngularJS extends HTML with ng-directives. The ng-app directive defines that this is an AngularJS application.

Related Documents:

examples. Typically, the principles of a best practices single window design should attempt at the following: (1) A single point of access; (2) A single sign on; (3) A single entry of data; (4) A single point of decision making; (5) A single point of payment. Although there are many possible approaches to harmonization of cross border

during the implementation of CBEST. The data were collected through observation during the implementation of CBEST and interview with teacher and headmaster. The result of this study reveals that the implementation of CBEST has its own benefits and limitations in relation to aspect of economy, implementation and test administration and test design.

Corrective action design and implementation . Petroleum Remediation Program . 1.0 Corrective action design approval process . The CAD approval process is completed in two phases: the design phase and the implementation phase. Figure 1 outlines the general CAD approval process. The design

design, implementation of the database design, implementation of the user interface for the database, and some issues for the migration of data from an existing legacy database to a new design. I will provide examples from the context of natural history collections information. Plan ahead. Good design involves not just solving the task at

Keywords: Design-Based Implementation Research, Design-Implementation Research, Instructional Systems Design, Intelligent Tutoring Systems, Participatory Design, Research Partnerships, Writing Pal INTRODUCTION With each new school year, the list of available educational technologies expands dramatically, along with

Legal Design Service offerings Legal Design - confidential 2 Contract design Litigation design Information design Strategy design Boardroom design Mastering the art of the visual Dashboard design Data visualization Legal Design What is especially interesting in the use of visual design in a p

implementation and sustainability framework to assist and support implementing agencies and communities. The TPI Implementation Framework (the TPI Framework) is adapted from current evidence-based implementation models including RE-AIM (Glasgow, Vogt & Boles, 1999) and the National Implementation Research Network (NIRN) (Fixsen, Blasé et al.,

Implementation Science at a Glance, is intended to help practitioners and policy makers gain familiarity with the building blocks of implementation science. Developed by our team and informed by our ongoing collaborations with practitioners and policy makers, Implementation Science at a Glance introduces core implementation science concepts, tools,