Angular Tutorials: Premium Quality Tutorials on Angular and its Ecosystem https://angular-university.io The single resource a developer with a full time job needs for learning and keeping up with the fast moving Angular and its ecosystem, by providing very focused, summarised and high quality tutorials on Angular. Learn the framework from beginner to intermediate or advanced, be up-to-date on the latest developments and features, all in small bite-sized videos of less than 5 minutes. The courses include but are not limited to: - Angular For Beginners - https://angular-university.io/course/getting-started-with-angular2 - Angular Router - https://angular-university.io/course/angular2-routing- Angular Forms - https://angular-university.io/course/angular2-formsFollow us:Twitter - https://twitter.com/AngularUnivGoogle+ - https://plus.google.com/u/1/113731658724752465218Facebook - https://www.facebook.com/angular.university
- 💥Angular Unit Testing - Introduction to Jasmine Spies03:15
- 💥 Angular Testing - Step-by-Step Test Implementation (Jasmine Spec)03:15
- 💥 What is Firebase Storage? Learn its Key Features03:15
- 💥 Firebase Hosting - Key Features & Quick Deployment Guide03:15
- 💥 Firestore Security Rules - User Authorization Roles03:15
- 💥 Firestore Security Rules Fundamentals03:15
- 💥 Security in a Serverless Architecture - Firestore Security Rules03:15
- 💥 Angular Authentication with AngularFire & Firebase UI03:15
- 💥 Firebase Offline Support for the Firestore NoSQL Database - See it in Action03:15
- 💥 Firestore Data Modification Example with AngularFire03:15
- 💥 Firestore Queries and Performance Guarantees - orderBy and array contains03:15
- 💥 AngularFire Observable Streams - Real-time Updates03:15
- 💥 How To Query a Firestore Collection using AngularFire03:15
- 💥 Free Angular for Beginners Course03:15
- 💥 The Firestore NoSQL Database - Documents and Collections03:15
- 💥 Angular Impure Pipes In Detail03:15
- 💥 Angular AfterContentChecked Lifecycle Hook - Use Cases and Pitfalls03:15
- 💥 Angular OnPush Change Detection - How Does it Work?03:15
The course is an Web Application Security Fundamentals Course, where the application will use the Angular/Node stack.This course covers Angular 4 and all the server code is in Typescript, but the security concepts explained in it are applicable to other technology stacks.We will use several Angular and Node packages from Auth0, and we will also include a demo of how to use Auth0 for doing Application User Management.Security - A Fundamental Step in Your Software Development CareerSecurity is probably the number one advanced topic that Software Developers are expected to master when going forward in their software development careers.Security knowledge is hard to come by but its essential for advancing to more senior software development positions, like for example Application Architect or similar.Learning Web Security Fundamentals, knowing how to design an application for security, and knowing how to recognize and fix security issues is an essential skill for a senior developer.But the problem is that security knowledge is orthogonal to most other topics and it typically takes years to learn.The good news is that once you have it, Security knowledge has a much longer shelf live than most software development knowledge in general.Most of the vulnerabilities and fixes that you will learn in this course were useful 10 years ago, and will (very likely) still be useful 10 years from now - Angular and Node are just an example of one stack, to make the course examples more practical.Security is seen as something really hard to master - this is actually not the case! Application Security is much more approachable than you might think, depending on how you learn it.What Is The Best Way To Learn Security in a Fun and Practical Way?Here is what we will do: we are going to take the skeleton of a running application that has no security yet, and we are going to secure the application step-by-step.Using a couple of open-source packages from Auth0, we are going to implement the Sign-Up and Login functionality from scratch, and because security cannot be enforced only at the client-side, we will implement both the frontend in Angular and the backend in Node.As we secure the application, we are going to periodically put on our Black Hat, and we are going to attack the application many times during the course, to prove that the vulnerabilities are real!!By doing so, we will learn along the way the fundamentals of Authentication and Authorization, we will become familiar with common vulnerabilities like Dictionary Attacks, XSS, CSRF and others, and we will get familiar with commonly used cryptographic tools like Hashing, Salting, JWT, password storage recommendations and more.Please don't be intimidated by these concepts: The focus in this course will not be on the internals of each of the cryptographic tools that we will use, but instead on understanding on a high-level what problems do these tools solve, when to use each and why.We will also learn how to design our application for security, and we will learn how in many situations application design is ou best defense.Course OverviewWe will start at the beginning: we will see the proper way of doing User Management and Sign Up: we will learn how to store passwords in a database, and we will introduce cryptographic hashes in an approachable way.Once we have the Sign-Up functionality in place, we will implement Login and understand the need for a temporary identity token. Our first implementation will be stateful login, where the token is kept at the server level.And at this point we could think we have authentication in place, but we decide to prepare our application for scalability, so we decide to try a JWT (JSON Web Tokens) based approach, because we know that this is what services like Firebase and Auth0 use.We will use a couple of Auth0 packages to quickly refactor our Login to be JWT based, and learn the advantages of using JWT, and some potential disadvantages as well. And with this in place, we could think that we had a solid security solution.Its at this point that we will realize that this application is not secure at all!! We will put on our Black Hat, and we will conduct step-by-step an XSS script injection attack and we will steal the identity of another user and send it to an attack server.We decide to first protect our authentication token from theft, and then deal with XSS injection attack later. We try to move the JWT to Cookie storage, only to realize that it made us vulnerable to another attack: CSRF request forgery!We will proceed to further attack the application, and take the time to really understand the attack.At this point feeling more confident with the security of the application, we have decided to tackle the original XSS vulnerability and see how Angular provides built-in defenses for that, and when to bypass those defenses and why.
We will build a series of small open source libraries (about 7) of progressively increasing difficulty, and we will learn a large number of Angular advanced features in a very fun and practical way.We will build a series of small open source libraries (about 7) of progressively increasing difficulty, and we will learn a large number of Angular advanced features in a very fun and practical way.What Is The Best Way To Learn Advanced Angular Features ?Technology is never created in a vacuum - there are always certain original use cases for the appearance of a framework or even a framework feature. The best way to learn technology and according to some recent research to learn anything in general, is something called "Deliberate Practice".So the best way to learn Angular and its most advanced features is to simply take and use it to build something very concrete, like for example an application or a library -and do it in a step-by-step way.This is of course very time-consuming to do without any help because we will have to learn everything by ourselves along the way as we build something, gluing together an endless number of blog posts, documentation and Stackoverflow answers.Given this, here is what will do in this course: we are going to take Angular and use it to build a series of small reusable libraries. We are going to learn the advanced features of Angular in their original use cases, where they make the most sense and so are easier to learn.What Will We Build In This Course ?In this course we are going to start by getting familiar with the Node library ecosystem. We are going to learn how npm dependencies really work under the hood, and what are the features that have been making the NPM Node ecosystem explode with tens of thousands of packages.We are going to learn how and why the frontend ecosystem will also soon start benefiting from those features. Then we will start building a series of libraries: Our goal is that at the end of the course combine all the libraries we have built to create a reusable real-world dynamic modal payment widget, that will allow the user to submit payments in both Stripe and Paypal.We will split this major component into smaller libraries: As we will be introducing testing and all the ecosystem that comes with it, we will start simple by doing a Font Awesome customizable action button.Then we will progressively increase the difficulty of each library: we will build a dynamic tab container that allows to add new tabs at runtime, a reusable dynamic modal component with customizable content, a input mask directive to help the user introduce card numbers, a payment panel with a validated form for entering card data.All of these libraries are reusable on their own, but fit the larger picture of building a working payments modal widget that provides a great user experience.All of these will be tested and we will introduce animations where it makes the most sense and deploy everything to npm. We will discuss testing in detail, namely what parts of the library to test, how and and why. Each library will have a small sample application.What Will you Learn In this Course?We will learn how to use the Angular CLI to create a AOT compatible library, how to define a library module, how to isolate the styles of a component but still make them customizable, how to design components and directives to make them easier to maintain - making them customizable while at the same time giving the components great default behavior.We will cover all of the more advanced features of Angular, like templates, template outlets, ng-content, ng-container, style isolation and customization, AOT, global events, debugging with the CLI, @ViewChildren, @ContentChildren, Light DOM vs Shadow DOM, @HostBinding, @HostListener, dynamic components, directives, handling keyboard events, testing, animations and more (this is a non-extensive list).But more than presenting the features in isolation, we will use them in real use cases which will make the features much easier to learn.Course OverviewAs we will building a set of Angular libraries and deploying them in NPM, we will cover first NPM and its ecosystem - meaning how does the npm dependency management system work, and how the frontend development work is likely going to experience a similar growth to the Node ecosystem.For more videos tutorials on Angular, check the Angular University website - https://angular-university.io Follow us:Twitter - https://twitter.com/AngularUnivGoogle+ - https://plus.google.com/u/1/113731658...Facebook - https://www.facebook.com/angular.univ...Category
RxJS and Reactive Programming can sometimes be seen as hard to get into. Although RxJs is optional in many parts of the Angular API and we can usually use Promises instead, one of the items of the Angular Project Roadmap is to allow to build reactive style applications. So clearly reactive programming is a topic that is close to the framework.What is The Best Way To Learn RxJs ?Why is RxJs and reactive programming sometimes seen as hard to get into ? The main reason for that could be that Observables and reactive programming are presented as either a programming paradigm shift, an alternative to promises or a generalization of functions, which are approaches that don't help as much as we could think in the learning process.We are going to take an alternative learning take for learning these concepts: a problem / solution approach. RxJs and Observables are actually a very practical and effective solution to a very common set of problems that we face all the time while building asynchronous programs like user interfaces, and that by understanding those problems we are going to also understand RxJs - because it evolved over time as a solution to many of those problems.
These are sample lessons of the Angular Ngrx Reactive Extensions Architecture Course, the complete course is available here - https://angular-university.io/course/angular2-ngrxWe are going to build step by step a chat application that reproduces the situation that the Facebook team faced with the unread messages counter. We are going to solve the problem not by using the original Flux dispatcher, instead we are going to use a derived single store RxJs-based solution: The Angular Reactive Extensions Ngrx Store.We are going to use the Angular CLI to quickly scaffold an application, and implement the frontend of the chat application from scratch: from an empty folder - every line of code will be explained.The backend will also be explained but we will initially get a running backend as a starting point, so that we focus on the frontend architecture and the store solution.We are going to build the application using Reactive Programming principles and a set of libraries of the Angular Reactives Extensions (Ngrx) Ecosystem: this will include the Ngrx Store, Ngrx Effects, DB, Router integration.We are going to cover the benefits of Immutability and OnPush change detection, its advantages and disadvantages.For more tutorials on Angular , have a look at the courses available in the Angular Academy - https://angular-university.ioFollow us:Twitter - https://twitter.com/AngularUnivGoogle+ - https://plus.google.com/u/1/113731658724752465218Facebook - https://www.facebook.com/angular.university
Some of the latest features available since Angular RC5, without the deprecated APIs removed in RC6. This includes NgModule, the router lazy loading and setting a form value, resetting a form, etc.
This playlist contains tutorials on the Angular Router, from the Angular University - https://angular-university.io/course/angular2-routingOverviewSingle Page Applications have been around for many years now, but as we surf the Internet we rarely find them today. Why ? The main reason for that has been the difficulty of having single page apps be properly ranked by search engines.But there are some very good news for Angular Developers, and developers of single page apps in general: the Google crawler is now much better at crawling single page applications, meaning that today its more important than ever for a developer to be able to build such type of applications. Also Single Page apps are and will likelly continue to be very popular for buiding authenticated dashboards and enterprise applications.The bottom line is that In the upcoming years we can expect an increase in the number of single page applications, so the goal of this course is to prepare you for that scenario by doing a step by step deep dive into the Angular Router.What You Will LearnThis course covers the Angular Router in-depth. Its a continuously evolving course so you can expect new sections to be added as new releases are made. We are going to cover all the major routing concepts, starting at the beginning.First we will cover how can we setup the router and avoid right off the bat some very common pitfalls that happen to developers that are just trying out the router for the first time. We are going to learn both declarative template driven routing and imperative or programmatic routing, and we are going to cover in detail child routes: when to use them and why, how do they work.We are going to cover how the Angular Router allows us to easily implement some commonly used patterns like Master Detail. We are going to learn about the reactive features of the routers, namely we will cover the multiple parameters and query parameters observables.We will cover the notion of route snapshot and we are going to show how routing can be the source of accidental memory leaks and how we can prevent that. The course will also cover route guards and auxiliary routes: we are going to learn exactly what are auxiliary routes but more importantly we will cover when should we use them, why and what are some common use cases.The course finishes off with a very cool exercise where we are going to learn how we can build a widget dashboard by using the notion of auxiliary routes. With this course you can expect to get a solid foundation on the Angular router and feel confident tackling real world applications scenarios that involve the Angular Router.For more tutorials on Angular, have a look at the courses available in the Angular Academy - https://angular-university.ioFollow us:Twitter - https://twitter.com/AngularUnivGoogle+ - https://plus.google.com/u/1/113731658724752465218Facebook - https://www.facebook.com/angular.university
This playlist contains tutorials on Angular Forms, from the Angular University - https://angular-university.io/course/angular2-formsWhy Does Angular Need a Forms Module ?HTML Forms seem deceivingly simple. Yet Angular Forms is one of the main core modules of the framework, and its very powerful. Why do we need a full framework module to implement something so simple as forms ? The answer is simple: forms can be some of the most complex user interfaces that a developer might have to implement.There are simple forms of course, like for example a login and password form. But very quickly and especially in the case of dashboard development, enterprise applications, and CRUD applications we can have use cases where some very complex forms need to be implemented, spanning multiple tabs and with dialogs that edit parts of the form, all coupled with complex business logic validation rules.Keeping track of which parts of a large form are valid and displaying to the user relevant form error messages at the right time while keeping a good user experience is a non-trivial task, that can benefit a lot from the help of a framework.For an introduction to Angular Forms, have a look at our post: Introduction to Angular Forms - Template Driven vs Model DrivenWhat You will Learn In This CourseIn this Angular Forms tutorial you will learn how to implement both simple and complex forms in Angular, by using two different form building mechanisms: Template Driven and Form Driven or Reactive Forms. You will learn how to use each separately by using them to build the same form.You will learn when to use each form type and why. You will also learn how form development can benefit tremendously from using functional reactive programming techniques, and how Angular model driven forms make that easier than ever. You will learn how the reactive forms API exposes RxJs Observables that can be leveraged to implement these functional reactive techniques.In the end we are going to tie everything together with an exercise: we are going to build step by step a signup form which will include multi-field validation.For more tutorials on Angular, have a look at the courses available in the Angular Academy - https://angular-university.ioFollow us:Twitter - https://twitter.com/AngularUnivGoogle+ - https://plus.google.com/u/1/113731658724752465218Facebook - https://www.facebook.com/angular.university
This is a list of sample Angular Tutorials from the Angular University channel.For more tutorials on Angular , check out website https://angular-university.ioFollow us:Twitter - https://twitter.com/AngularUnivGoogle+ - https://plus.google.com/u/1/113731658724752465218Facebook - https://www.facebook.com/angular.university
Angular Rxjs and Observables - HTTP And Services - Build a Service Layer using Functional Reactive Programming Techniques
This playlist contains a large part of the course Angular For Beginners, from the Angular University - https://angular-university.io/course/angular2-httpOverviewFor building the service layer in Angular we have many options available. Should we build a service layer in a similar way to Angular 1, or are there better ways ? How do we use the new HTTP module ? Everything around this module revolves around the notion of Observable. What is an Observable?The goal of this course is to answer these questions by introducing the fundamentals of RxJs and Functional Reactive Programming and see how these notions apply in practice to the Angular HTTP module. We will learn how to use the HTTP module and Observables to build service layers in Angular .Course contentWe are going to introduce the notions of Stream and Observable, and explain how these two notions relate to the HTTP module. Then we are going to explain how Observables can be combined to create other Observables and how the HTTP module uses the notion of Observable to handle network calls.We are going to see how to use the several RxJs operators to do common operations, such as for example: sending a request to the server that depends on a previous request, sending multiple requests in parallel, retrying a request or canceling a request.Finally we are going to finish the course by using several of the presented RxJs operators to build a Typehead which cancels obsolete requests as the user types.What you will LearnAfter the completion of this course and the exercise you should feel comfortable with the notions of Stream, Observable and Functional Reactive Programming. You should be familiar with several frequently used RxJs operators and know how to use them to implement commonly needed use cases.You will be comfortable building service layers in Angular using Observables and the HTTP module in general, and will also have a good functional reactive programming foundation that will be helpful in other parts of Angular 2 that also use Observables: for example Forms or Routing.For more tutorials on Angular , have a look at the courses available in the Angular Academy - https://angular-university.ioFollow us:Twitter - https://twitter.com/AngularUnivGoogle+ - https://plus.google.com/u/1/113731658724752465218Facebook - https://www.facebook.com/angular.university
This playlist contains all the free courses available in the Angular University - https://angular-university.io/This includes an introduction to Angular 2 for beginners course, an Angular 2 Services and HTTP course - build a service layer with RxJs course, and more courses.