Download to read offline
Intro to Angular @GDG Wolverhampton DEV-FEST 2024
- 2. @angular Build your webapp in few mins Version 1.0 Introduction to Angular
- 3. @angular Even better talk Mycat Rhubarb.github.com @cat she/her ngConf 28/8/2021 Emma Twersky @twerske she/her
- 4. @angular ● A powerfulopen-source web application framework developed and maintained by Google. ● Used for building single-page applications (SPAs) with dynamic, interactive user experience.
- 5. @angular Angular Team CoreValues Community where everyone feels welcome Apps developers love to build Apps users love to use
- 6. @angular Why Angular ➔ Component-BasedArchitecture: Enables code reusability and easy maintenance. ➔ Two-Way Data Binding: Automatically syncs data between the model and the view, reducing boilerplate code. ➔ Dependency Injection: Simplifies managing dependencies, making apps more modular and testable. ➔ Comprehensive Tooling: Offers CLI tools, routing, and built-in services to streamline development. ➔ Strong Community and Ecosystem: Extensive resources, tutorials, and support from developers worldwide.
- 7. @angular Angular Core Concepts ➔Angular Components : Building Blocks of any Angular application. Each component controls a view on the screen and consists of an HTML template, CSS styles, and TypeScript logic. Examples: Header, Footer, Forms, or any reusable UI element. ➔ Modules : Organizes Components and related functionality. An Angular app usually has a root module (AppModule) and can have feature modules for specific functionality. Helps with lazy loading and scaling large applications. ➔ Services : Reusable Classes that contain business logic, data-fetching, or shared state. Designed to be injected into components using Angular’s Dependency Injection (DI). Examples: AuthService for authentication,
- 8. @angular Angular Core Concepts ➔Angular Components : Building Blocks of any Angular application. Each component controls a view on the screen and consists of an HTML template, CSS styles, and TypeScript logic. Examples: Header, Footer, Forms, or any reusable UI element. ➔ Data Binding: Mechanism for connecting UI and data seamlessly. One- way Binding: Data flows from component to view or vice versa. Two-way Binding: Syncs data between the view and model, useful for form inputs and dynamic content.
- 9. @angular Why These ConceptsMatter ➔ Modularity and Reusability: Components and services make code easier to reuse and maintain. ➔ Separation of Concerns: Keeps application logic separate from UI elements, enhancing scalability and testability. ➔ Efficient Development: Data binding and dependency injection streamline coding by reducing boilerplate and improving maintainability.
- 10. @angular Course Outcomes ● Developan application with the Angular CLI ● Build components and routes ● Build model and service
- 11.
- 12. @angular Skills we'll need ➔HTML ➔ CSS ➔ TypeScript
- 13. @angular Installation and Setup 1Node.js (active LTS or maintenance LTS) 2 npm (included with Node.js) 3 Angular CLI 4 Download starter project (https://github.com/tee-wealth001/task-manager)
- 14. @angular $ npm install-g @angular/cli
- 15.
- 16.
- 17.
- 18.
Editor's Notes
- #2 Welcome to Introduction to Angular. In this course, I'll guide you through building your first Angular application and deploying it to the cloud. Before we get to the very cool project you'll be building, let's take a minute to explore Angular.
- #3 What is Angular?
- #4 Angular is a web framework that allows teams to deliver web apps with confidence. Angular provides the tools to build powerful, scalable applications.
- #5 Angular is built on three core values: We want to create a platform that developers love to use. This allows developers to build apps that users love to use, and, finally, ensure that we create a community where everyone feels welcomed. Since you are starting your Angular journey with us today, we want to welcome YOU to the community - we think you're going to have a great time. Teams of different sizes use Angular. We've seen small teams build great apps and we've seen enterprise level organizations use Angular to build some incredible things. So you are in great company.
- #6 Why do teams and organizations choose Angular? Well, we think it has to do with some of the strengths of the framework. First, we have world class developer tooling that puts a focus on developer productivity. Angular developers are able to take advantage of tooling like the Angular CLI that boosts productivity from the start, Angular DevTools that provide important insights into applications and the language service that supercharges their IDE experience. If you want to know more about these tools check out the notes for this video for links to other content where we dive deeper into the tools I mentioned. Angular is an opinionated framework, let me explain - we want to reduce decision fatigue when building applications so it comes with some things already chosen for you. For example, developers won't need to choose a router solution - they can just use the built in router and focus on what matters: building that new application. We also like to call Angular "evergreen". With each new version we aim to bring the community and their projects along with us as we move Angular forward. We even have tooling that can help identify the parts of Angular that need to be updated and we provide the commands to make that update easier for users. Finally, we bring best practices from the start. Angular uses TypeScript as the programming language for web applications. Along with that we are able to include things like compile time (or when you are writing your applications) checks that help you spot bugs early on. There are even more best practices that developers are able to leverage when choosing Angular. Resources: Angular Language Service Angular CLI (video, docs)
- #7 Why do teams and organizations choose Angular? Well, we think it has to do with some of the strengths of the framework. First, we have world class developer tooling that puts a focus on developer productivity. Angular developers are able to take advantage of tooling like the Angular CLI that boosts productivity from the start, Angular DevTools that provide important insights into applications and the language service that supercharges their IDE experience. If you want to know more about these tools check out the notes for this video for links to other content where we dive deeper into the tools I mentioned. Angular is an opinionated framework, let me explain - we want to reduce decision fatigue when building applications so it comes with some things already chosen for you. For example, developers won't need to choose a router solution - they can just use the built in router and focus on what matters: building that new application. We also like to call Angular "evergreen". With each new version we aim to bring the community and their projects along with us as we move Angular forward. We even have tooling that can help identify the parts of Angular that need to be updated and we provide the commands to make that update easier for users. Finally, we bring best practices from the start. Angular uses TypeScript as the programming language for web applications. Along with that we are able to include things like compile time (or when you are writing your applications) checks that help you spot bugs early on. There are even more best practices that developers are able to leverage when choosing Angular. Resources: Angular Language Service Angular CLI (video, docs)
- #8 Why do teams and organizations choose Angular? Well, we think it has to do with some of the strengths of the framework. First, we have world class developer tooling that puts a focus on developer productivity. Angular developers are able to take advantage of tooling like the Angular CLI that boosts productivity from the start, Angular DevTools that provide important insights into applications and the language service that supercharges their IDE experience. If you want to know more about these tools check out the notes for this video for links to other content where we dive deeper into the tools I mentioned. Angular is an opinionated framework, let me explain - we want to reduce decision fatigue when building applications so it comes with some things already chosen for you. For example, developers won't need to choose a router solution - they can just use the built in router and focus on what matters: building that new application. We also like to call Angular "evergreen". With each new version we aim to bring the community and their projects along with us as we move Angular forward. We even have tooling that can help identify the parts of Angular that need to be updated and we provide the commands to make that update easier for users. Finally, we bring best practices from the start. Angular uses TypeScript as the programming language for web applications. Along with that we are able to include things like compile time (or when you are writing your applications) checks that help you spot bugs early on. There are even more best practices that developers are able to leverage when choosing Angular. Resources: Angular Language Service Angular CLI (video, docs)
- #9 Why do teams and organizations choose Angular? Well, we think it has to do with some of the strengths of the framework. First, we have world class developer tooling that puts a focus on developer productivity. Angular developers are able to take advantage of tooling like the Angular CLI that boosts productivity from the start, Angular DevTools that provide important insights into applications and the language service that supercharges their IDE experience. If you want to know more about these tools check out the notes for this video for links to other content where we dive deeper into the tools I mentioned. Angular is an opinionated framework, let me explain - we want to reduce decision fatigue when building applications so it comes with some things already chosen for you. For example, developers won't need to choose a router solution - they can just use the built in router and focus on what matters: building that new application. We also like to call Angular "evergreen". With each new version we aim to bring the community and their projects along with us as we move Angular forward. We even have tooling that can help identify the parts of Angular that need to be updated and we provide the commands to make that update easier for users. Finally, we bring best practices from the start. Angular uses TypeScript as the programming language for web applications. Along with that we are able to include things like compile time (or when you are writing your applications) checks that help you spot bugs early on. There are even more best practices that developers are able to leverage when choosing Angular. Resources: Angular Language Service Angular CLI (video, docs)
- #10 Let's discuss what you can expect in this course. By the end of this course you will be able to: Use Angular's tooling to build an application Update the application by using fundamental Angular skills such as building components and page routing And finally, create services and make HTTP requests.
- #11 Here's the application that we'll be building together: Meet Homes, this is an application that will enable users to find housing. The application features a grid of houses with a description and location.
- #12 Let's turn our focus to the skills needed to complete the course: A basic understanding of HTML, CSS and TypeScript. Alright, now that we know what we're going to be building, let's get started!
- #13 First, you'll need to install nodejs so you can use the Angular CLI and have access to npm, the node package manager. So first, install node js - choose a version that's either active or in maintenance long term support mode. In a browser, navigate to nodejs.org to find download and installation instructions. Your installation should include NPM.
- #14 Now that node and npm are installed we're ready to install the Angular CLI. From the command line, run the following command: npm install -g @angular/cli
- #15 When the installation completes, we can confirm that our installation was successful by running the following command from the command line: ng version
- #16 The output of "ng version" should contain information about the installed version of Angular on your machine - such as the Angular version, Node version, package manager version and even the OS being used. This tutorial is using Angular version 15.
- #17 When the installation completes, we can confirm that our installation was successful by running the following command from the command line: ng version
- #18 When the installation completes, we can confirm that our installation was successful by running the following command from the command line: ng version