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
