Introduction To Angular 4 - J2I
- 1. Presented by DEBBABI Nader Introduction To Angular 4 Training Sessions Organized by Club Jeunes Ingénieurs ISAMM
- 2. ANGULAR One framework. Web, Mobile & Desktop.
- 3. Agenda >What is Angular ? >Motivation >TypeScript ? >Single Page Application (SPA) >Development Environment Setup >Hello World! >Bootstrapping the app >Building Blocks & Architecture
- 4. What is Angular ?
- 5. What is Angular ? An Open-Source JavaScript Framework, used to build Single Page based Web Application (SPA), Developed by Google, Release date March 2017, Current version 4.4.4 (stable).
- 6. Motivation
- 7. Motivation > Speed & Performance, > Smaller application, > Modular application, > Cross-platform Web, Mobile & Desktop, > SPA, > RESTful API, > Uses TypeScript, > Rxjs API Integration, > & It has a huge community on GitHub.
- 8. TypeScript ?
- 9. TypeScript ? Free & Open-Source programming language, Developed & maintained by Microsoft, A superset of JavaScript, Full Object-Oriented Programming with features like classes, interfaces & modules… Support for ECMAScript 5 and uses arrow function syntax, Compiles to plain JavaScript.
- 11. Single Page Application ? One and Only HTML page for the entire application, Dynamically update the single page with new data if needed, as the user interacts with the app, Show and Hide some components during the interaction process, No reloading or refreshing during navigation, More responsive & fluid app as a result, Full separation between the presentation logic & business logic, Asynchronous Requests (AJAX), JSON response & RESTful API.
- 12. Traditional way
- 14. ANGULAR for Client Web App
- 15. ANGULAR for Client Web App
- 17. Development Environment Setup Node.js is an open-source, cross-platform JavaScript run-time environment, we use it to: > Run a development server, > Use the npm tool. npm is a Node.js Package Manager for JavaScript programming language, npm is automatically installed with Nodejs,
- 18. Development Environment Setup To develop the application using TypeScript we need to install the TypeScript package using the command, Angular CLI (Command Line Interface) is a tool that allows us to create a project, generate it’s parts, build it and run it on the development server directly through the command line,
- 19. Development Environment Setup Visual Studio Code as a Text Editor,
- 20. Hello World!!
- 21. Hello World!! > Go to workspace directory, > Using Angular CLI ng new command create the Hello World application, > Go to the Hello World directory, > Run the application using another Angular CLI command ng serve,
- 22. Basic Structure of ANGULAR Application
- 23. Basic Structure of ANGULAR Application .angular-cli.json , package.json and tsconfig.json are the responsible files on the project configuration, it’s dependency management and it’s external packages.
- 24. Basic Structure of ANGULAR Application main.ts and index.html are the entry point to the application, Since we are developing a SPA index.html is the only HTML page in the whole project, style.css is the style sheet for the global app design.
- 25. Basic Structure of ANGULAR Application node_modules folder contains the packages installed by the npm tool, app folder contains all the work, components, modules…
- 28. Building Blocks
- 29. Building Blocks Every Angular app has at least one Module, the root module named AppModule, An Angular app is a Modular app, A module is a TypeScript class with the Decorator @NgModule, Each module in the application has it’s own Components, Directives, Services… They should be declared in @NgModule decorator, Modules can cooperate to achieve some app functionalities.
- 30. Building Blocks A Component controls a piece of screen called view, This view is defined by the Template associated to the Component, A Component handles the user interaction with the view (Template), passes data and properties to the view and updates it dynamically, A Component is a TypeScript class with the Decorator @Component.
- 31. Building Blocks A Component view is defined by its associated Template, A Template is bunch of HTML tags, Along side with the HTML, a Template typically contains some particular expressions and syntax which belong to Angular, A Template may contain some Custom Tags, that represent another Component, the selectors.
- 32. Building Blocks A Module, a Component, a Directive or a Service are just TypeScript Classes until we tell Angular about the difference between them, and that is done by the Metadata, We attach Metadata in TypeScript to a class by using Decorators, @NgModule, @Component, @Injectable… Metadata tells Angular which Template belongs to which Component and which Component belongs to which Module… Class + @Component + Metadata = A Component
- 33. Building Blocks
- 34. Building Blocks A Directive is a TypeScript class with the Decorator @Directive, Directives appear within HTML tag as attributes, Two kind of directives: Structural & Attribute Directives, Structural Directives change the layout by adding or removing Template elements, Example: *ngFor & *ngIf. Attribute Directives change the appearance or the behavior of an existing Template element, Example: ngModel, ngStyle & ngClass.
- 35. Building Blocks A Service is a TypeScript class with the Decorator @Injectable, A Service achieve some functionalities for the application such us fetching data from server, authentication… This kind of functionalities should not be done in the Component, A Component should only take care of rendering the Template (view).
- 36. Thanks for your attention !!