Angular is an open-source TypeScript-based front-end web application platform maintained by Google. It uses MVC and dependency injection patterns. Key features include components, services, routing and calling remote services. Version 1 was released in 2009 as AngularJS and the latest version is Angular 5. It is used to build large web applications and sites like Google and Uber.

1. Angular
Javascript Web Framework
URL: https://angular.io/
Erik Lienhard
Khoa Do

2. What is Angular
• TypeScript-based front-end web application platform
• Open source
• Maintained mainly by Angular Team at Google
• Uses MVC Framework
• Service Based Architecture
• Install with npm install –g @angular/cli

3. Version History
• 2009 – AngularJS 1.0 released
• September 14, 2016 – Angular 2.0
• March 23, 2017 – Angular 4.0
• November 1, 2017 – Angular 5.0

4. Typescript
• Typescript is a typed superset of JavaScript that compiles to plain
JavaScript
• Open Source
• Contains interfaces. Example: interface IPerson { firstName: string; …
• Typed means that you can declare types. Example: fullName: string;
• Compile with tsc example.ts
• Install with npm install –g typescript@latest

5. Components
• Fundamental building blocks of Angular applications
• Display data on the screen, Listen for user input, and Take action based
on that input
• Typescript file that contains a class that has a @Component attribute
• Typescript file converted to Javascript during compilation
• Optional template html or in-lined
• Selector property is the markup. Example: selector: myele =>
<myele></myele>
• Can be generated by: ng generate component mycomponent

6. Dependency Injection
• A technique in software engineering whereby one object supplies the
dependencies of another object.
• Dependency is the object to be that can be used as a service.
• Injection is passing the dependency to the object that requires it
• Angular makes heavy use of dependency injection
• Example: constructor( myService: MyService) …

7. Services
• Components should be focused on managing views.
• Services should be the construct used to fetch or save data.
• Can be used to handle business logic.
• Can be used to share information among classes.
• Services are created by dependency injected and used by components or
other services.
• Can be created using a typescript class with @Injectable attribute.
• Can be generated: ng generate service myservice.

8. Routing
• Takes care of navigation in Angular
• Can be generated: generate module app-routing –flat –module=myapp
• Looks like the following:
• const routes: Routes = [{ path: ‘mypath', component: MyComponent }];
• Path is: /mypath
• RouterOutlet tells Angular where to display the output of the
component. Example: <router-outlet></router-outlet>

9. Calling a Remote Service
• Angular can call remote services
• Restrictions are not as strict as Ember
• import { HttpClient, HttpHeaders } from '@angular/common/http’;
• Returns Observable<MyObject>
• Call: this.http.get<MyObjecty>(“/myservice”)

10. Built with Angular
Notable Angular projects include:
Sources: http://www.mobiloitte.com/blog/top-10-apps-websites-developed-angularjs and https://www.eduonix.com/blog/web-programming-
tutorials/top-15-websites-and-apps-built-with-angularjs/

11. References
• http://angular.io - Main site
• http://angular.io/docs - documentation
 http://www.mobiloitte.com/blog/top-10-apps-websites-developed-
angularjs – Top 10 Angular Apps

12. Thank you!
Image source: http://wecoloringpage.com/emoticon-bowing-coloring-page/