Scribd
Upload
151 views

Angular: Sudo NPM Install - G @angular/cli

Angular is a framework for building single-page applications using Typescript or JavaScript. It uses modules, components, directives and services. Key aspects include: - Modules define an app and its dependencies. Components contain templates to display data. Directives add behavior and structure. - The Angular CLI tool is used to generate components, services and more. It creates a standard project structure. - Components encapsulate data, views and logic. Directives like NgFor and NgIf control the DOM. Services provide reusable logic. - Apps are built by importing modules, declaring components and directives, and bootstrapping the main module. Data binding syncs templates and components.

Uploaded by

Magical music
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
151 views

Angular: Sudo NPM Install - G @angular/cli

Angular is a framework for building single-page applications using Typescript or JavaScript. It uses modules, components, directives and services. Key aspects include: - Modules define an app and its dependencies. Components contain templates to display data. Directives add behavior and structure. - The Angular CLI tool is used to generate components, services and more. It creates a standard project structure. - Components encapsulate data, views and logic. Directives like NgFor and NgIf control the DOM. Services provide reusable logic. - Apps are built by importing modules, declaring components and directives, and bootstrapping the main module. Data binding syncs templates and components.

Uploaded by

Magical music
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Angular

 Framework for developing Single Page Application


o SPA contains only one page (index.html)
o The page changes the elements (contents) dynamically
 Pre-requisite
o Can use JS or TS (TS is proffered)
o ng-cli
 Tool(s) to create/manage the angular application
 Install using npm
sudo npm install –g @angular/cli
 Commands
 new: used to create a new application
o ng new <app name>
 serve: used to run the angular application
o ng serve
 generate:
o used to generate
component/service/pipe/directive
o ng generate <type> <name>
o ng generate component my
o ng generate service my
o ng generate pipe my
o ng generate directive my

Angular application structure


 e2e: end to end testing (test cases)
 node_modules:
o contains the dependency modules
o @angular/core:
o @angular/common:
o @angular/forms:
o @angular/http:
o @angular/animations
o @angular/router:
 src:
o contains application’s
pages/components/assets/configurations
o app:
 contains application source code
 app.module.ts:
 contains the configuration about the module(s)
 declarations:
 imports:
 providers:
 bootstrap:
o assets:
 contains application assets
 e.g. images/audio/video etc
o environments:
 contains the configurations about the environments
(machine)
 e.g.
 environment.ts: development
 environment.prod.ts: production
 environment.test.ts: testing
o favion.ico: image which is displayed on the browser’s tab
o index.html: the page which is loaded at the beginning
o main.ts: loads the angular application
o polyfills.ts: contains the implementation of the features
which are introduced in ES5/ES6 but are missing in the
standard JS (browser does not understand these features)
o styles.css: contains the global styles
o test.ts: contains the test cases
o tsconfig.app.json: used to specify application-specific ts
configuration
o tsconfig.spec.json: used to specify application-specific ts
configuration related to test cases
o typing.d.ts:
 contains the declarations/definitions of third party js
libraries
 configuration files
o .angular-cli.json: contains the ng-cli configuration
o .editorconfig: contains configurations related to editor
o .gitignore: used to ignore files at the time checking – in the
files in git repository
o karma.conf.js: used to configure the karma testing tool to
run the test cases
o protractor.conf.js: used to configure the test cases tool
o package.json:
 used to configure the application
 contains dependencies
 used to run the application
 contains dev-dependencies
 used to run the application on development
environment
o README.md
 Read me file which contains
 steps to install/configure application
 steps to deploy the application
o tsconfig.json: contains the configuration related to typescript
o tslint.json: contains the ts-linter configuration

Angular Fundamentals
 Module
o Collection of classes/enums/functions
o Angular uses NgModule to create a module
o Every application must contain at least one module
(AppModule)
o E.g.

import { NgModule } from ‘@agular/core’;

@NgModule({
declarations: [],
imports: [],
providers: [],
bootstrap: []
})
export class AppModule {
}
o where:
 declarations:
 contains the list of classes which part of this
module
 it may contain
o Component class
o Pipe class
o Directive class
 imports:
 Contains list of dependency module
 providers:
 contains list of classes which provide services
 contains list of services (classes)
 bootstrap:
 list of classes which will be loaded by default

 Component
o Re-usable entity
o Encapsulates
 Data
 To render the data, class uses data members
 View:
 Uses the template and CSS to render a view
 Logic
o Angular uses @Component to create a new component
o E.g.
import {Component} from ‘@angular/core’;

@Component({
selector: ‘<tag name>’,
template: ‘<html code>’
})
export class MyComponent {
}
o Where
 selector: tag which is used as a container
 template: used to define the html code (view)
 styles:
 templateUrls:
 styleUrls:
o To add a custom component:
 Create a component class inside src/app
(my.component.ts)
 Add meta-data related to Component

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: '<h1>My Component</h1>'
})
export class MyComponent {

 Declare the component class in AppModule’s


declarations (src/app/app.module.ts)

 Metadata
o Extra information added to the class

Binding
 Types
o Interpolation
 Use {{ }} to insert the value of a variable
 E.g.

// display the value of personName inside the div


<div>{{personName}}</div>

o Attribute binding
o Class Binding
o Event Binding

Add bootstrap to angular project


 Install bootstrap
o npm install --save bootstrap
 load bootstrap css
o use @import to load bootstrap css
o open styles.css and add
 @import ‘~bootstrap/dist/css/bootstrap.css’
 where ~ represents node_modules
Creating Re-usable Components
 every component can receive input from its consumer
o to receive an input from consumer
 import Input from @angular/core
 call @Input function on the class members
 user the class members
 every component may emit an event as its output
o to emit an event
 import Output and EventEmitter from @angular/core
 call @Output() on the event emitter object
 call emit() on event emitter when the event is getting
occurred

export class FavoriteComponent {


@Input() isFavorite:boolean = false;
@Output favoriteToggled = new EventEmitter();
.
.

toggle() {
// occur an event
this.favoriteToggled.emit();
}
}

Directive
 Instruction(s) given to angular to perform some action(s)
 Types
o *ngFor
 used to iterate over a collection
 exposes built-in variables
 index: position
 first: true if the element is at the first position
 last: true if the element is at the last position
 even: true if the position is even position
 odd: true if the position is odd position
 syntax:
<div *ngFor=”let <tmp> of <collection>”></div>
 E.g.
<div *ngFor=”let contact of contacts”></div>
o *ngIf
 used to add a conditional logic
 Syntax:
<div *ngIf=”<condition>”></div>
 E.g.
<div *ngIf=”contacts.length == 0”>no
contacts</div>
the div will be added to the page when the

contacts array is empty
 otherwise the div element will NOT be added
o *ngSwitchCase
 used to select an element based on condition
 Syntax:

<div [ngSwitch]=”<variable>”>
<div *ngSwitchCase=”<value>”>
contents</div>
</div>

 E.g.

selectedValue = 1;
<div [ngSwitch]=”selectedValue”>
<div *ngSwitchCase=”1”> value 1</div>
<div *ngSwitchCase=”2”> > value 2</div>
<div *ngSwitchCase=”3”> > value 3</div>
</div>

Add Http module


 Import HttpModule in app.module.ts

import { HttpModule } from '@angular/http';

 Add HttpModule in imports list

Imports: [
BrowserModule,
HttpModule
]

You might also like