Download as PDF, PPTX
Uploaded byWebStackAcademy
Angular - Chapter 1 - Introduction
The document provides an overview of Angular, a structural framework for building dynamic web applications using HTML and JavaScript/TypeScript. It outlines Angular's evolution, key features, the role of open-source development, and tools such as Node.js and Angular CLI that support application development. The document also includes guidance on creating and managing Angular applications, along with insights on TypeScript and project structure intricacies.
Angular - Chapter 1 - Introduction
- 1.
- 2.
- 3. www.webstackacademy.com What is Angular? •Angular framework consist of: Code / File organization Libraries Programming language support Building project And many more… A structural framework for building dynamic web apps in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript
- 4. www.webstackacademy.com BCD What is aFramework? A • A framework can be broadly defined as: Exposes Application Programming Interface (API) Is built to do things in a certain way (Methodology) Has architecture to support methodologies • Today’s rich web applications requires complex functionalities where coding needs to be done faster and smarter • Raise of Single Page Applications (SPA) demands excellent user experience
- 5. www.webstackacademy.com BCD Should I callit as AngularJS or Angular? A • AngularJS (Angular 1): Released in 2010 Primarily introduced as a front-end JavaScript based framework • Angular 2: Completely redesigned and rewritten (2016) Not compatible with AngularJS TypeScript as the programming language • Angular 3: Version compatibility issues The version got skipped • Angular 4: Backward compatible with Angular 2 (2017) The terminology of “AngularJS” or “Angular 2” has gone by then Common terminology of Angular came into picture Angular 5: Released in Nov 2017 Angular 6: Released in May 2018 Angular 7: Planned in 4Q 2018
- 6.
- 7. www.webstackacademy.com BCD What Angular isNOT? A • Backend (server side) framework/technology • A scripting or programming language (like JavaScript or Java) • A library, plugin or extension • Design Pattern Angular is one of the recent success stories of OpenSource way of developing software. Let us spend some time on: • OpenSource software development – How? • What do you mean by “free” software? • What are the benefits of using OpenSource?
- 8. www.webstackacademy.com BCD OpenSource – Developmentprocess A These OpenSource development keeps happening on a continuous manner. By the time you realize version X, it would have moved to Y with some changes. Most of the times OSS ensures backward compatibility, there could be some exceptions though (ex: Angular 1.0 vs. Angular 2.0)
- 9.
- 10. www.webstackacademy.com BCD Node.js A • Node.js isa JavaScript runtime built on Chrome's V8 JavaScript engine • It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient • It helps to build scalable web applications for the backend • One of the primary reasons why the "JavaScript Everywhere" has become a reality • Over 9 million instances of Node.js is deployed across various servers across the globe
- 11. www.webstackacademy.com BCD Node.js – NVMand NPM A • Node Version Manager (NVM): • It is a tool (script) to install Node.js into the system • Main use is to help managing multiple versions of Node.js in the same machine • Node Package Manager (NPM): • NPM is the package manager for JavaScript • World’s largest software registry • Primary aim to promote re-usability $ node –-version // Version of Node.js $ nvm –-version // Version of NVM $ npm –-version // Version of NPM $ npm list // List all the packages
- 12. www.webstackacademy.com BCD Angular CLI A • Commandline interface for Angular • Part of the NPM, required NVM to launch web apps • It generates components, routes, services and pipes • Helps to launch and test applications • All commands start with ng in the beginning. Two samples are given below, more to come! $ ng new helloApp // Creates a new app $ ng serve --open // Launches the app at port 4200
- 13. www.webstackacademy.com BCD What is TypeScript? A •TypeScript is JavaScript for application-scale development • TypeScript is a strongly typed, object oriented, compiled language • It was designed by Anders Hejlsberg (designer of C#) at Microsoft • TypeScript is superset of JavaScript compiled to JavaScript. Its unique philosophy is to make sure good development practices and develop applications at scale • Since frameworks like Node.js is designed to run JavaScript in the server side, TypeScript “Transpiles” into JavaScript $ tsc --version // Check typescript version
- 14. www.webstackacademy.com BCD And finally….our friends! A BracketVS code Hot Module Replacement (HMR)
- 15.
- 16. www.webstackacademy.com BCD Creating First App A •Create and launch your first application using the following two commands • This would generate a particular directory structure with so many pre-populated directories, sub-directories, files etc.. • At first sight it will be overwhelming for anybody, till we get used to it • Let us take a overview of all these files and what they mean. Please note knowing all possible files and options may not be required at this instance, even some of them are out of scope of this course! $ ng new myFirstApp // Creates the application $ ng serve –-open // Launches the app automatically
- 17. www.webstackacademy.com For End toEnd testing Directory Structure
- 18. www.webstackacademy.com Directory Structure Containsapp code. All Angular components, templates, styles, images, and anything else your app needs go here Any files outside of this folder are meant to support building your app App resources such as images can be kept here
- 19. www.webstackacademy.com Directory Structure Definesthe AppComponent along with an HTML template, CSS stylesheet, and a unit test It is the root component of what will become a tree of nested components as the app evolves
- 20. www.webstackacademy.com Directory Structure DefinesAppModule, the root module that tells Angular how to assemble the app
- 21. www.webstackacademy.com Directory Structure Thisfolder contains one file for each of your destination environments, each exporting simple configuration variables to use in your app The files are replaced on-the-fly when you build your app
- 22.
- 23. www.webstackacademy.com Directory Structure Themain HTML page that is served when someone visits your site Most of the time you'll never need to edit it The CLI automatically adds all js and css files when building your app so you never need to add any <script> or <link> tags here manually
- 24. www.webstackacademy.com Directory Structure The mainentry point for your app
- 25. www.webstackacademy.com Directory Structure Differentbrowsers have different levels of support of the web standards Polyfills help normalize those differences
- 26. www.webstackacademy.com Directory Structure Globalstyles that affect all of your app need to be in a central place
- 27. www.webstackacademy.com Directory Structure Thisis the main entry point for your unit tests It has some custom configuration that might be unfamiliar, but it's not something you'll need to edit
- 28. www.webstackacademy.com Directory Structure TypeScriptcompiler configuration for Angular app (tsconfig.app.json) Unit tests (tsconfig.spec.json)
- 29. www.webstackacademy.com Directory Structure Configurationfor Angular CLI In this file you can set several defaults and also configure what files are included when your project is built
- 30. www.webstackacademy.com Directory Structure Simple configurationfor your editor to make sure everyone that uses your project has the same basic configuration
- 31. www.webstackacademy.com Directory Structure Git configurationto make sure auto- generated files are not committed to source control
- 32.
- 33. www.webstackacademy.com Directory Structure Unit testconfiguration for the Karma test runner, used when running ng test
- 34. www.webstackacademy.com Directory Structure npm configurationlisting the third party packages your project uses
- 35. www.webstackacademy.com Directory Structure End-to-end testconfiguration for Protractor, used when running ng e2e
- 36. www.webstackacademy.com Directory Structure Basic documentationfor your project
- 37. www.webstackacademy.com Directory Structure TypeScript compilerconfiguration for your IDE to pick up and give you helpful tooling
- 38. www.webstackacademy.com Directory Structure Lintingconfiguration for TSLint together with Codelyzer, used when running ng lint Linting helps keep your code style consistent
- 39. www.webstackacademy.com WebStack Academy #83, FarahTowers, 1st Floor, MG Road, Bangalore – 560001 M: +91-809 555 7332 E: training@webstackacademy.com WSA in Social Media: