Angular Project Report

Angular Project Report

• 1.
  ACKNOWLEDGEMENT I would liketo express my special thanks of gratitude to lovely Professional University, who gave me the golden opportunity to do this wonder project of Angular 6. I came to know about so many new things I am really thankful for this. Secondly, I would like to thanks my parents and my friend who help me a lot to finalizing this project within the limited time frame. Deepanshu Reg No. 11715635
• 2.
  Content  INTRODUCTION OFANGULAR 6  ANGULAR 6 ARCHITURE  ANGULAR 6 FORMS  DATA BINDING  PIPES  SERVICES  ROUTING  MODULE
• 3.
  Introduction to Angular6 Angular is an open-source JavaScript framework developed by Google. It helps you to create single-page applications, one-page web applications that only require HTML, CSS, and JavaScript on the client side. It is based on MVC. pattern and build well structured, easily testable, and maintainable front-end applications. Angular has changed the way to web development. It does not base on jQuery to perform its operations. Till now you are using ASP.NET, ASP.NET MVC, PHP, 6P, Ruby on Rails for web development but now you can do your complete web development by using most powerful and adaptive JavaScript Framework Angular. There is no doubt, JavaScript frameworks like Angular Ember etc. are the future of web development
• 4.
  Angular 6 Architecture Angular6 Follows the MVC architecture, the diagram of the MVC framework as shown below. Controller View Module  The Controller represents the: layer that has the business logic. User events trigger the functions which be stored inside your controller. The user events are part of the controller.  Views are used to represent the presentation layer which is provided to the end user  Models are used to represent your data. The data in your model can be as simple as just having primitive declarations for example, if you are maintaining a student application your data model could just have a student id and a name or can also be complex by having a structured data model. If you are maintaining a car ownership application, you can have structures to define the vehicle itself in terms of its engine capacity, seating capacity, etc.
• 5.
  Angular 6 Forms Angular6 facilitates you to create a form enriches with data binding and validation of input controls Input controls are ways for a user to enter data. A form is a collection of controls for the purpose of grouping related controls together. Following are the input controls used in Angular6 forms:  input element  selects element  button element  text area elements Angular provides multiple events that can be associated with the HTML controls. These events are associated with the different HTML Input elements. Following is a list of events supported in Angular:  ng-click  ng-dblclick  ng-mousedown  ng-mouseup  ng-mouseenter  ng-mouseleave  ng-mousemove  ng-mouseover  ng-keydown  ng-keyup  ng-keypress  ng-change
• 6.
  Angular 6 DataBinding Data binding is a very useful and powerful feature used in software development technologies. It acts as a bridge between the view and business logic of the application. There is two type of data binding: 1. One-way data binding The one-way data binding is an approach where n value is taken from the data model and inserted into an HTML element. There is no way to update model from view. It is used in classical template systems. These systems bind data in only one direction. View One Time Merge Template Model 2. Two-way data binding Data-binding in Angular apps is the automatic synchronization of data between the model and view components. Data binding lets you treat the model as the single-source-of-truth in your application the view is a projection of the model at all times. If the model is changed, the view reflects the change and vice versa. Template View Model
• 7.
  Pipes Every application startsout with what seems like a simple task gal data, transform them and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket Once data arrives, you could push their raw to String values directly to the view, but that rarely makes for a good user experience. For example, in most use cases, users prefer to see a date in a simple format like April 15. 1988 rather than the raw string format Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time). Clearly, some values benefit from a bit of editing. You may notice that you desire many of the same transformations repeatedly, both within and across many applications. You can almost think of them as styles. In fact, you might like to apply them in your HTML templates as you do styles Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML
• 8.
  Services Angular 6 servicesare substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app Angular 6 service types: - Angular comes with different types of services. Each one with its own use cases All of these services are singletons. You probably want to use Factory all the time. Provider  Is the parent of all other services (except constant)  can be configured using app.config(function (Provider)  a little complex Factory  simpler than Provider, but without configuration  definition: 'app.factory(name', some Function)  some Function is called when the name service is instantiated and should return an object Service  just like Factory, but:  instead of a function. it receives a JavaScript class a constructor function as argument  simplest service type, but also least flexible Value  just stores a single value  use it like app.value('name' value") Constant  just like value, but  can be injected everywhere  is not constant Oo, but may be changed
• 9.
  Routing In Angular routingis what you to create Single Page Applications  Angular 6 routes enable you to create different URL for different content in your application  Angular routes allow one to show multiple contents depending on which route is chosen.  A route is specified in the URL after the # sign. Let's take an example of a site which is hosted via the URL http://example.com/inder.html. On this page you would host the main page of your application Suppose if the application was organizing an Event and one wanted to see what the various events on display are, or wanted to see the details of a particular event or delete an event. In a Single Page application, when routing is enabled, all of this functionality would be available via the following links http://example.com/index.html#ShowEvent http://example.com/index.html#Display Event http://example.com/index.html#DeleteEvent The # symbol would be used along with the different routes (Show Event Display Event, and Delete Event).  So, if the user wanted to see all Events, they would Be directed to the link (http://example.com/index.html#Show Event) else  If they wanted to just see a particular event they would be redirected to the link (http://example.com/index.html#Display Event) or  If they wanted to delete an event, they would be directed to the link http://example.com/index.html#DeleteEvent Note that the main URL stays the same.
• 10.
  Angular 6 Module InAngular, a module defines an application. It is a container for the different parts of your application like controller, services, liters, directives etc. A module is used as a Main method. Controller always belongs to a module. How to Create a Module? The angular object module method is used to create a module. It is also called Angular 6 function angular. Module <div ng-app="myApp">…</div> <script> var app = angular.module("myApp" []); </script> Here, "myApp" specifies an HTML clement in which the application will run Now we can add controllers’ directives, filters, and more to Angular application How to add controller to a module: - If you want to add a controller to your application refer to the controller with the ng- controller directive See this example: <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angular6/1.4.angular.min.6"></script> <body> <div ng-app="myApp" ng-controller="myCtrl> firstName +"" + lastName )) </div> <script> var app angular.module("myApp. 1); app.controller("myCtrl function(Sscope) {$scope firstName "Ajeet"; $scope.lastName="Mourya":} </script> </body> </html>
• 11.
  Declaration I hereby declarethat I have completed my six weeks summer training at Internshala from 01/06/2019 to 13/07/2019 under the guidance of Internshala. I hereby undertake that project undertaken by me is the genuine work of mine. DATE: 22 Feb 2020 (Signature of student) Deepanshu Reg no.11715635
• 12.
  SIX WEEKS SUMMERTRANING REPORT (15/05/2019 to 26/06/2019) ON (Angular 6) Submitted by: Deepanshu Reg No. 11715635 Program Name BCA School of Computer Application Lovely Professional University, Phagwara Punjab (2020)