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
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