Scribd
Upload
2 views

Angular Js

Angular is a JavaScript framework for creating reactive single-page applications, with the latest version being Angular 16. The document outlines the setup of a simple Angular application, including project creation, component structure, and data sharing between components using decorators. It also provides a detailed example of a todo application, demonstrating component creation, HTML integration, and service usage for shared logic across components.

Uploaded by

ay621703
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Angular Js

Angular is a JavaScript framework for creating reactive single-page applications, with the latest version being Angular 16. The document outlines the setup of a simple Angular application, including project creation, component structure, and data sharing between components using decorators. It also provides a detailed example of a todo application, demonstrating component creation, HTML integration, and service usage for shared logic across components.

Uploaded by

ay621703
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 59

Angular js

Dr. Sandhya P
Professor Grade1
SCOPE
VIT-Chennai
What is Angular?
• Angular is a javascript framework that allows you to create reactive
single page applications (SPA).

• Ex: Google Maps

• (AJAX and DOM)


Angular version
• Angular 16
• 6 months release period
• Highly backward compatible
Project setup for a simple app
• Open command prompt as administrator
• npm install -g @angular/cli@latest
• C:\Users\cathe\Desktop>cd Angular
• C:\Users\cathe\Desktop\Angular>ng new my-first-app
• Give N for angular routing
• Select standard css – scss
• C:\Users\cathe\Desktop\Angular>cd my-first-app
• C:\Users\cathe\Desktop\Angular\my-first-app>ng serve//brings a
development server
Project setup for a simple app
Get familiar with Angular Application

C:\Users\cathe\Desktop\Angular\my-first-app\src\app
Angular Application
• Angular application has an index.html
• It has a special tag called <app-root>
• This element is used to insert components.
• Components are a central building block of Angular
applications.
• Each component is made up of a TypeScript class,
HTML, and CSS.
• TypeScript transpiles, or converts, into JavaScript, which
means that your application ultimately ends up in plain
JavaScript but you have the convenience of using
Typescript's extended features and streamlined syntax.
Angular Application
• To change the UI dynamically use directives. Ex: ngIf, ngFor (Actions
are performed on DOM)
• Data can be shared between the components using decorators.
• You use these decorators to specify that certain properties allow data
to go into or out of a component.
• To use @Output(), you raise an event in one component so that the
other component knows that there is data available.
Example Application – todo app
• Define Item in app directory (item.ts)
• Creates Item object model
Example Application – todo app
• Add logic to AppComponent (Edit app.component.ts)
app.component.ts
• import { Component } from '@angular/core’; //imports Angular
• @Component({
selector: 'app-root’,
templateUrl: './app.component.html’,
styleUrls: ['./app.component.scss’]
})
//metadata about AppComponent
metadata about AppComponent
Getter method
Example Application – todo app
• Add HTML to the AppComponent template (edit app.component.html)
ngFor directive
• The <li> contains an *ngFor, a built-in Angular directive that iterates
over the items in the items array.
• For each item, *ngFor creates a new <li>.
• The double curly braces that contain item.description instructs
Angular to populate each <li> with the text of each item's description.
Example Application – todo app
• Add Items to the list (edit add.component.ts)
• The addItem() method takes an item that the user provides and adds it to the array when
the user clicks the Add button.
• The addItem() method uses the array method unshift() to add a new item to the beginning
of the array and the top of the list.
Example Application – todo app
• To use addItem() edit (app.component.html)
app.component.html
• In the HTML file, #newItem is a template variable.
• The template variable in this case uses the <input> element as its value.
Template variables can be referred to anywhere in the component's template.
• When the user types a new item in the <input> field and presses Enter, the
addItem() method adds the value to the allItems array.
• Pressing the Enter key also resets the value of <input> to an empty string.
• The template variable #newItem is used to access the value of the <input>
element in the template.
• Instead of pressing the Enter key, the user can also click the Add button,
which calls the same addItem() method.
Example Application – todo app
• Styling the Angular App
• The Angular CLI generates two types of style files:
• Component styles: The Angular CLI gives each component its own file for
styles. The styles in this file apply only to its component.
• styles.css: In the src directory, the styles in this file apply to your entire
application unless you specify styles at the component level.
styles.css
styles.css
app.component.css
Example Application – todo app
• Creating a new component
• Run the following in CLI:
ng generate component item
item component
• item.component.ts - observe
Add HTML for ItemComponent
• Edit item.component.html
Add HTML for ItemComponent
Add HTML for ItemComponent
• When a user clicks the Edit button, editable becomes true, which
removes this <div> and its children from the DOM.
• If, instead of clicking Edit, a user clicks Delete, the ItemComponent
raises an event that notifies the AppComponent of the deletion.
Add HTML for ItemComponent
Example Application – todo app
• Prepare AppComponent (edit app.component.ts)
import { Item } from "./item";
• Add the following function
Example Application – todo app

• Add logic to ItemComponent (item.component.ts)


• The addition of Input, Output, and EventEmitter allows
ItemComponent to share data with AppComponent.
• By importing Item, ItemComponent can understand what an item is.
Example Application – todo app
• In the item.component.ts replace class with following:
Example Application – todo app
• Use the ItemComponent in AppComponent
• To use the ItemComponent in AppComponent, put the
ItemComponent selector in the AppComponent template.
• Angular specifies the selector of a component in the metadata of the
@Component() decorator.
• In this example, the selector is app-item
• To use the ItemComponent selector within the AppComponent, you
add the element, <app-item>, which corresponds to the selector you
defined for the component class to app.component.html.
Example Application – todo app
• Edit app.component.html
Example Application – todo app
• Add styles to ItemComponent (item.component.css)
Example Application – todo app
• Add styles to ItemComponent (item.component.css)
Example Application – todo app
• Add styles to ItemComponent (item.component.css)
Example Application – todo app
• Adding filter controls in app.component.html
Example Application – todo app
Example Application – todo app
• Building your finished application
• Run the following in CLI
ng build -c production
The CLI compiles the application and puts the output in a new dist
directory.
Built application (index.html)
Deploying you application
• To deploy your application, you can copy the contents of the dist/my-
project-name folder to your web server.
Adding from textbox and button
View todo
View done
View all
Deleted snore
Edit items (eat to eat apples), save
Editing cancelled
Editing cancelled
Service in Angular
• Service is a class that has code that can be commonly shared by all
components
• Service class contains business logic
Service in Angular (Perform the
following in CLI)
• Create Angular project: ng new demo
• Create child component: ng generate component employeedetails
• Create child component: ng generate component employeelist
• Create a service class: n g s employee (this creates
employee.service.ts in D:\demo\src\app)
• Run the code: ng serve
• Run in browser – http://localhost:4200/
Service in Angular
• In app.module set providers to EmployeeService
Service in Angular
• employee.service.ts (use a getter method to return the array of objects
to be used by the 2 child components employeelist and
employeedetails)
Service in Angular
• app.component.ts
Service in Angular
• Employeedetails.component.ts uses the array from service and the view
or template is given inline instead of employeedetails.component.html
Service in Angular
• Employeelist.component.ts uses the array from service and the view or template
is given inline instead of employeelist.component.html
Service in Angular
• Note: If template or view is given inline change the metadata from
templateURL to template
Service in Angular
• App.component.html
Reference
• https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cl
ient-side_JavaScript_frameworks/Angular_getting_started

• https://www.slideshare.net/sbegaudeau/angular-js-101-everything-yo
u-need-to-know-to-get-started

You might also like