Presentation explaining the concepts and theory of Angular2 framework for front-end development of web applications(Compent, template, Dependency Injection, Services, Component interaction, Directives, Data Binding, etc). A live demo example helps to understand the concepts better.

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:

11. Built in 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

16. Component injector:

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:

23. Demo application :
https://stackblitz.com/edit/angular-routing-databinding-injectable

24. References: https://angular.io/