Ng talk
- 2. intro 1. What is a Framework? and Why we use it ? 2. What and why Angular ? 3. Your first step to be an AWESOME Ng-dev ?
- 3. Why do I need a Framework Framework is a technology that provide us with the right tools to build a web application while also defining how it should be designed and how the code should be organized.
- 4. Pros for using a Framework 1. Most JS frameworks these days are opinionated. 2. Help you write well maintained and scalable clean-code. 3. Eliminate the risk of reinventing the wheel.
- 5. 1. What is Angular Angular is a Javascript framework to build more interactive web apps AKA single-page application(SPA). It is designed for both Web, Desktop(Electron)and Mobile platforms(NativeScript).
- 6. So what is a single-page application or SPA ? A single-page application is an app that works inside a browser and does not require page reloading during use.
- 8. Why Angular
- 10. Let’s talk some Angular :D
- 11. Angular CLI (command line interface)
- 12. Angular cli is a command line interface to scaffold and build angular apps. Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box.
- 13. Getting started with the Angular Cli ng new Create well structure apps out of the box. ng generate Generate components, routes, services and pipes with a simple command. ng serve Easily test your app locally while developing.
- 14. A word about TypeScript the future of Javascript
- 15. A word about TypeScript the future of Javascript
- 19. Component The fundamental building block in an ng app, consist of 02 main parts: 1. @Component Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime. 2. Controller A class that control the logique of the component
- 21. Template binding We call the syntax of {{...}} template binding and what we mean by it is to tell the view that we want to use the value of the expression inside the brackets at this location.
- 23. Built in directives Angular provide a number of built in directives, which are attributes we add to our HTML elements that give us a dynamic behavior.
- 24. NgIf The ngIf directive is used when you want to show or hide an element based on a Boolean condition. Therefor the element will be removed from the DOM if the expression returns false.
- 26. NgSwitch ngSwitch directive works is similar to how the switch statement works which is by allowing a single evaluation of an expression, and then display nested elements based on the value that resulted from that evaluation.
- 28. NgFor the role of this directive is to repeat a given DOM element (or a collection of DOM elements) by looping through an element on each iteration.
- 30. Pipes in Angular Angular pipes are a way to write display-value transformations that you can declare in your HTML.
- 33. Thanks! Where to find me: Twitter: @aymenokay LinkedIn: Aymene Bennour Email: aymenebennour@gmail.com