Introduction to Angular 4 Programming

1. Angular 4

2. Motivation
• Creating single page application (SPA)
• Bring mobile app like feeling to web application
• Client server interaction making web application slow
• In Angular: Client handle request on its own through javascript
• Initial loading and DB operations require server call

3. Typescript
• By Microsoft
• Superset of javascript
• Have
• Modules
• Components
• Directives
• Services

4. Modules
• Have one or more components
• Root module is AppModule
• app.module.ts – default name
• @NgModule decorator

5. Component
• Have html template and component class
• Component class have data and logic to control html template
• One component can contain another
• Light weight
• Decorated typescript classes (@Component)

6. Service
• Class that does a well defined specific function
• Eg: DB interaction, logger service, input validation
• Offer service to components

7. Directives
• Provide instruction to modify view within components html template
• Eg:
• <input type=“text” autoGrow/>
• ngIf
• ngClass
• ngStyle
• Can create your own custom directives

8. Setting up Angular
• Install node.js from nodejs.org | verify: node –v
• Install typescript | windows command: npm install –g typescript
• Install typings | windows command: npm install –g typing
• Install angular cli | windows command: npm install -g angular-cli

9. Programming
• VSCode – IDE | Google to download from Microsoft
• ng new project_name
• cd project_name
• ng serve
• http://localhost:4200/

10. maint.ts
• ts stands for type script
• main => Entry point of project
• Compile code using JIT
• Boostrap the app module

11. tsconfig.json
• tsconfig.json => Provides Typescript(ts) compile
configuration(config.json)
• Typescript to javascript

12. package.json
• package.json => node package(package) configuration(.json)
• Contains details about 3rd party package our app uses
• Which are present in node_module folder