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
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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