Introduction to angular | Concepts and Environment setup
Download as PPTX, PDF•0 likes•78 views
The document outlines the essentials of Angular, an open-source JavaScript framework developed by Google for building single-page web applications. It covers key components such as data binding, directives, services, and the development environment setup, including installation of Node.js and Angular CLI. A live demo application link is also provided for practical understanding.
Introduction to angular | Concepts and Environment setup
- 1. - Ansley Stany Rodrigues
- 2. Agenda: 1. Theory and Concepts 2. Development environment setup 3. Live demo application
- 3. • Angular is an open source JavaScript framework that is used to build single page based web applications. • Developed by Google • One framework. Mobile & Desktop. Angular:
- 4. Building Blocks of Angular2 Application
- 5. Angular Frameworks : • Router • Http • Forms • Upgrade • Compiler • Platform • Core and common Building Blocks of Angular2 continued …
- 6. Libraries : • Rx • RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code • Reflect • Zone • System • Shim • A shim is a library that brings a new API to an older environment, using only the means of that environment.
- 7. Template: • A template combines HTML with Angular markup that can modify HTML elements before they are displayed. Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding: • Event binding lets your app respond to user input in the target environment by updating your application data. • Property binding lets you interpolate values that are computed from your application data into the HTML.
- 8. Property Binding vs Event Binding :
- 9. Component : • Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. • Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient
- 10. Directives:
- 12. Custom Directives: • An attribute directive minimally requires building a controller class annotated with @Directive, which specifies the selector that identifies the attribute. The controller class implements the desired directive behavior.
- 13. HostListener and HostBinding: • @HostBinding and @HostListener are two decorators in Angular that can be really useful in custom directives. @HostBinding lets you set properties on the element or component that hosts the directive, and @HostListener lets you listen for events on the host element or component.
- 14. Use:
- 15. Dependency Injection: • Dependency injection (DI) lets you keep your component classes lean and efficient. Application injectors
- 17. Service: • For data or logic that isn't associated with a specific view, and that you want to share across components, you create a service class. A service class definition is immediately preceded by the @Injectable() decorator. • The decorator provides the metadata that allows your service to be injected into client components as a dependency.
- 18. Development environment setup: Node.js : Download and install node.js from https://nodejs.org/en/download/ (download a stable version - 8.x or 10.x or higher) Check version using : node –v Node package manager: Check npm (Node package manager ) version : npm –v Text Editor: Visual Studio Code , Sublime or any IDE
- 19. • Install angular-cli globally using npm install -g @angular/cli • To download a starter project navigate to https://stackblitz.com/ and click the Angular button to load a starter project. • alternatively you can also use the cli commands to generate a project from https://cli.angular.io/
- 20. Use download button to download the project (not required if using cli)
- 21. • Extract the project (not required if using cli) • Open a command prompt from the folder. • Run : npm install to install dependencies. • If node-sass error, download the appropriate node-sass binary and set the path in system variables as SASS_BINARY_DIR • Run : npm start to start the dev server . • Navigate to localhost:4200 to see the app working.
- 22. main.ts app.module.ts app.component.ts app.component.html • Main.ts file is entry point of our application. • Main.ts file bootstrap app.module.ts file • This file bootstrap our first component i.e app.component.ts • This file render app.component.html file. • Final HTML template How the app starts: