Angular 5 presentation for beginners
- 1. Presented by : Imran Qasim Complete Angular JS 5 In Urdu & Hindi 2017 By: Perfect Web Solutions 1
- 3. What is Angular ? • An Open-Source JavaScript Framework • It’s used to build Single Page basedWeb Application (SPA) • Developed by Google, • Release date March 2017, • Current version 4.4.6 (stable). 3
- 5. Why Angular JS? • Speed &Performance, • Smaller application, • Modular application, • Cross-platform Web, Mobile &Desktop, • SPA, • RESTful API, • Uses TypeScript, • It has a huge community on GitHub. 5
- 6. What Is TypeScript ? 6
- 7. What is Type Script ? • Free & Open-Source programming language, Developed & maintained by Microsoft. • A superset ofJavaScript. • Full Object-Oriented Programming with features like classes, interfaces & modules… • Support for ECMAScript and uses arrow function syntax. • Compiles to plainJavaScript. 7
- 8. Single Page Application (SPA) 8
- 9. Single Page Application ? One and Only HTMLpage for the entire application, Dynamically update the single page with new data if needed, as the user interacts with theapp, Show and Hide some components during the interaction process, No reloading or refreshing duringnavigation, More responsive & fluid app as a result, Full separation between the presentation logic & business logic, Asynchronous Requests (AJAX), JSON response & RESTful API. 9
- 11. Development Environment Setup Node.js is an open-source, cross-platform JavaScript run-time environment. we use itto: > Run a developmentserver. > Use the npm tool. npm is a Node.js Package Manager for JavaScript programming language. npm is automatically installedwith Nodejs. 11
- 12. Development Environment Setup To develop the application usingTypeScript we need to install the TypeScript package using thecommand, Angular CLI (Command Line Interface) is a tool that allows us to create a project, generate it’s parts, build it andrun it on the development server directly through the command line, 12
- 13. Development Environment Setup Visual Studio Codeas a Text Editor 13
- 14. Welcome APP 14
- 15. Creating Welcome APP Go to your projects directory, Using Angular CLI ng new command create the Welcome APP application, Go to the Welcome APP directory, Run the application using another Angular CLI command ng serve, 15
- 16. Basic Structure of Angular Application 16
- 17. BasicStructure 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. 17
- 18. BasicStructure 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. 18
- 19. BasicStructure of ANGULAR Application node_modules folder contains the packages installed by the npm tool, app folder contains all the work, components, modules… 19
- 23. 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… Theyshould be declared in @NgModule decorator, Modules can cooperate to achieve someapp functionalities. 23
- 24. 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 itdynamically, A Component is a TypeScript class with the Decorator @Component. 24
- 25. 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 andsyntax which belong to Angular, A Template may contain some Custom Tags, that represent another Component, the selectors. 25
- 26. 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 26
- 27. 27
- 28. A Directive is a TypeScript class with the Decorator @Directive. Directives appear within HTML tag as attributes. Two kind of directives: Structural & Attribute. Structural Directives change the layout by addingor removing Template elements, Example: *ngFor &*ngIf. Attribute Directives change the appearance orthe behavior of an existing Template element, Example: ngModel, ngStyle & ngClass. 28
- 29. 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… Thiskind of functionalities should not be done in the Component, AComponent should only take care of rendering the Template (view). 29
- 30. Thank You! 30