Download to read offline
Uploaded bySaurabh Juneja
Angular 4
Angular is a framework for building single-page applications. It uses TypeScript, which is a superset of JavaScript, and includes features like modules, components, directives, and services. Modules contain components and the root module is AppModule. Components have an HTML template and class with logic to control the template. Services provide reusable functionality like data access. Directives modify views by providing instructions within component templates. Setting up Angular involves installing Node.js, TypeScript, typings, Angular CLI, and creating a new project with ng new. The main.ts file acts as the entry point and bootstraps the app module. The tsconfig.json file provides TypeScript configuration and compiles TS to JS.
More Related Content
Angular 4
- 1.
- 2. Motivation • Creating singlepage 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 oneor more components • Root module is AppModule • app.module.ts – default name • @NgModule decorator
- 5. Component • Have htmltemplate 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 thatdoes a well defined specific function • Eg: DB interaction, logger service, input validation • Offer service to components
- 7. Directives • Provide instructionto 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 standsfor 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