Angular
0 likes166 views
Angular is a JavaScript framework for building client-side web applications. It was created and is maintained by Google. Some key points: - Angular uses components to build modular applications - It utilizes TypeScript for type safety and features like classes and interfaces - The framework emphasizes dependency injection, data binding, and directives
![Databinding
• {{ value }} —> interpolation
• [property] = “value” —> property binding
• (event) = “handler” —> event binding
• [(ngModel)] = “property” <—> two way binding](https://image.slidesharecdn.com/angular-vinod-190507034122/85/Angular-22-320.jpg)
Angular
- 2. What is Angular? • Angular is a JavaScript client side framework for creating powerful web or mobile applications • Created and maintained by Google • The most popular JavaScript framework as of date • Create HTML-like elements (components) • a combination of HTML, CSS and JavaScript
- 3. What is Angular? • Complete re-write of AngularJS • Component based • No controllers or scope • Streamlined dependency injection • Can write apps in TypeScript, Dart or JavaScript (ES5/ES6)
- 4. What is Angular? • SPA (Single Page Application) • Just one file - index.html, • components rendered dynamically • Cleaner code
- 5. What is Angular? • So many options • ES5 • CoffeeScript • DART • ES6 and ES7 • TypeScript
- 6. What is Angular? • Modular • Testable • Maintainable
- 7. JavaScript advances • ES6 (ES2015) • Classes • Modules • Decorators • TypeScript • ES6 and ES7 • Strong typing • Interfaces
- 8. TypeScript = All JavaScripts
- 9. Angular main concepts • Module • Component • Template • Data binding • Metadata • Service • Directive • Dependency injection
- 10. The App we are going to build
- 11. The App we are going to build
- 12. The App we are going to build
- 13. The App we are going to build
- 14. Component • @Component makes a class a reusable component • A component is a combination of data, functions, and HTML • Data —> state • Function —> behaviour • HTML —> view
- 17. An app is a tree of components
- 18. Metadata • Metadata is extra information which gives angular more info • @Component tells angular that the class is a component • @Directive tells angular that the class is a directive • @Injectable, @RouteConfig, @NgModule, …
- 19. AppHeaderComponent Importing resource from module Decorator Component’s state and behaviour defined here
- 20. Template • Is a way to describe a view using HTML • Templates can be included with the component • Or as an external file reference • Best practice is to use an HTML file
- 21. Template Data for the template (state)
- 22. Databinding • {{ value }} —> interpolation • [property] = “value” —> property binding • (event) = “handler” —> event binding • [(ngModel)] = “property” <—> two way binding
- 23. Service • “Substitutable objects that are wired together using dependency injection (DI)” • Used to share code across an application • Lazily initialised
- 24. Directives • A class with @Directive metadata • Two kinds: attributes and structural • Attribute directives alter the look or behaviour of an existing element • Structural directives alter the layout by adding, removing, and/or replacing elements in the DOM • A Component is a directive with a view
- 25. Dependency injection • A way to supply a new instance of a class with the fully-formed dependencies it needs • Most dependencies are services • Angular knows which service/s a component depend on by looking at the types of it’s constructor parameters • Services are injected by an injector which uses a Provider to create the service
- 26. injecting an instance of ContactService injecting an instance of Http (service) Dependency Injection
- 27. Module • Modules are optional, but a best practice • export tells TypeScript that the resource is a module available for other modules • import tells TypeScript which resource to import from a module • Angular comes with a collection of library modules
- 28. Module …is basically a Script file in a folder.
- 29. Exporting a resource in a module… Importing a resource from a module…
- 30. Using router • Four things to take care of: 1. Import RouterModule, Routes from @angular/router 2. Define the route config using RouterModule.forRoot() 3. Use routerLink on hyperlinks or buttons 4. Create a <router-outlet> to dynamically place a component
- 31. 1. Import… import { RouterModule, Routes } from '@angular/router';
- 32. 2. Define routes
- 33. 3. Links…
- 34. 4. Router outlet
- 37. Setup • Create a work directory and init angular-cli • Type the command : • ng new angular-demo-app • It takes a long time to finish, have patience
- 38. Run • cd in to the app directory • Run the app • ng serve --port 8080 -o
- 42. main.ts
- 45. Adding a new component: ng generate component <Component-Name>
- 46. More options • Generate components: • ng generate component components/counter • ng g c components/counter • Generate service (injectables): • ng g s services/contacts • Generate directives: • ng g d directives/box • Generate pipes: • ng g p pipes/fullname
- 47. Check out my TOP rated Angular 7 course • Udemy: http://bit.ly/2LsqmMa • SkillShare: https://skl.sh/2JfpU2I • Visit https://vinod.co for other courses like ReactJS, MongoDB etc.