Angular

Types in Typescript
Syntax :- let a:number

 var (scope to parent method)

 let (scope to block)
 any
 number
 boolean
 string
 number[] = [1,2,3]
 any[] = [1,true,’a’, false]
 enum color {Red =0, Green=1, Blue=2} // by default red will get value 0 and then
incremental, So it’s better to assign value.
 Const

Type Assertions
let message; // type will be any so endsWith method will not recognized. So use default method
we need to define type let message:string;
message = ‘abc’
let endsWithC = message.endsWith(‘c’);
Wrapping
Let alternativeWay = (<string>message).endsWith(‘c’);
Let alternativeWay = (message as string).endsWith(‘c’);
Arrow Function (lamda expression)
Let doLog = (message) => console.log(message);

Interfaces
let drawpoint = (point: number) => {}
drawpoint({x:1,y:2});
Inline annotation
let drawpoint = (point:{x: number ,y: number }) => {}
drawpoint({x:1,y:2});

interface Point {
x:number,
y:number,
draw: () => void
}
let drawpoint = (point: Point) => {}
drawpoint({x:1,y:2});

Classes
Cohesion: - Related thing should be part of one unit i.e., go together.
Group properties and method highly related.
Use export in class to use in different file and use import in other file

Object
let point = new Point();
point.x = 10;
point.y = 10;
point.draw();

Constructor
Class point
Constructor(x?: number, y?: number){ // once we make parameter optional then all right side
parameter will be optional.
this.x = x;
this.y = y;
}
let point = new Point(10,20);
point.draw();

Access Modifier
 public - default
 private – setter getter
 protected

Constructor(private x?: number, private y?: number){ // generate the field x , y and initialize no
need to declare explicitly
}
getX and setX
getX(){ return this.x}
setX(value){ this.x = value}
property get X() use this property as field let x= point.x; or set X() point.x =2;

Modules
Each file is module. We need to use export class to access in other file.
Import the class in other file. Import {Point} from ‘../point’ // name of module not file name

Components
@Component({
selector: 'page-more-category',
templateUrl: 'more-category.html',
})

1 angular module i.e AppModule  Appcomponent  present in project

 Imports  Module
 Exports
 Declarations  Components
 Providers
 Bootstrap  AppComponents
How selectors is render.
It’s search the selector in appComponent which is declare in AppModule. Or This directive is
declared in other module like browserModule.

Building Block of angular apps

Components
A components is encapsulation of data, Html templates, Logic.
Every application should have one component which called AppComponent (RootComponent)

https://github.com/sudheerj/angular-interview-questions#what-is-interpolation

Ionic 3
Introduction and Environment setup
 Node JS
 node -v
 npm -v
 For mac download homebrew : brew install node
 Npm install ionic cordova -g
 Ionic -v
 Cordova -v
 Editor -> vscode, atom, sublime, brakets
 Vscode plugin
o Angular language service
o Angular v4 Typescript snippets
o TSLint
o Atom one dark theme

Angular primer
 An angular application is build using one module and inside that module we have group of
components. We might have navbar component,
 Component made of metadata this describe particular bit of information about the
component such as HTML we pass our Template, style and more.
 Template: This will define the html and style of the component
 Class: We can use the function in our view. We have rich dynamic templates
 Module is a grouping of components. It this is messsager midule then we have everthing
regarding messanger module.
Angular CLI
 npm install @angular/cli -g
 ng new projectName

Angular project folder structure

 e2e This stand for end2End unit testing and e2e testing we can create automation test of
opening browser, clicking for basic we app.e2e.spec.ts
  node_module represent the all the dependency of the project
 src where our application leave

o app.module.ts, app.component.ts, app.component.html, app.component.css

app.component.html

 assest for images

 environment
 We have to declare <app-root> to render the data in page
 Main.ts

NgModule
 We can import thing like
o Provider
o Declaration
o Import
o Export
o Bootstrap
  Index.html  main.ts  bootstrapModule (Appmodule)  bootstrap(AppComponent)
 AppComponent <app-root>  index.html

Components
 Appcomponent is a part of AppModule. Functionality will be define inside the class.
 @Component consist of template, selector, styles
 Decorator allows us to add particular metadata to our component

Angular CLI basic

 ng serve -o
 ng generate component hello  component name will automatically added in appModule
 ng test
 ng build –prod
 ng doc ngmodule -o

Data Binding
 {{ greeting.toUpperCase() }} {{ 1 + 1 }} interpolation

Events
 (click)=”sayHello()”
 Other event such as keyup,

NgModel – Two day data-binding

 Banana in a box
 [(ngModel)]=”greeting” two way data binding

*NgIf Directive



 #showGreeting is template Variable

*NgFor Directive

Component Communication
 From parent component to child component we use @input at child component


Pipes
 We have pipetransform interface to create custom pipe
  Custom pipe syntax

Ionic CLI
 Npm install ionic@latest -g
 Ionic start MyProject blank/tabs/sidemenu --type=ionic1
 Ionic serve
 Ionic cordova run android -l
 Ionic generate directive directiveName
o Component
o Directive
o Page
o Pipe
o Provider
o Tabs
 Ionic docs
 Accounts in ionic.io for ionic cloud
 Ionic link  to create or link an existing apps in cloud so we can have an access for push,
deploy, package, auth, feedback and settings
 Ionic view from Appstore to share the app to tester
 Ionic upload
 Generate icon and splash
o Icon.png 192*192
o Splash.png 2208*2208
o Ionic cordova resources android
Getting started with Ionic
Ionic folder structure

 Hook -> we can add specific script to the build time as our application using cordova. It has
different stage of lifecycle of build such as
  Node_modules : we have all dependencies of our project
 Platform, plugins, resources,
 Ionic plugin add
 Src  app (app.module.ts …) , assets, pages, theme
 www : this will represent the build of our projects

HTML tag
 ion-header -> ion-navbar -> ion-title
 ion-content -> ion-item -> ion-list -> ion-list-header
 ion-footer -> ion-toolbar
 ionic-lable and ion-input
 Attributes -> color=”primary”, floating, type=”number”, ion-button, block, clear

Create a greeting application

 Ionic lab


 

Lazy laod
Using @IonicPage decorator allow us to lazyload the page only load subsequent pages when the
application needs

BMI Calculator

Navigation
Theming
Project 1: GitHub Profile Searcher
Project 2: Chat Application UX design
Project 3: Chat application Development with firebase
Component and native Integration