AngularJS for the Real World - Learn by creating a WebApp
- 7 hours on-demand video
- 1 article
- 100 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Develop a Real Time MV* Web Application with AngularJS and Firebase
- Build an AngularJS SPA (Single Page Application)
- Get familiar with concepts like 2-Way DataBinding, Services, Views, Routing, Directives and much more..
- Learn about the Angular built-in services, focusing on the $http service that will help you handling XHR
- Learn how to secure your application by building Authentication and Authorization functionalities
- Learn how to implement an AngularJS API in your application
- Master all the built-in AngularJS directives such as ng-repeat, ng-if, ng-switch, ng-show & ng-hide, ng-model, ng-controller and so on
- Write better code by implementing AngularJS best practices
In this lesson we'll take a quick look at the topics covered in this AngularJS course.
In this lesson you'll write your very first angular application, You'll learn how to use the ng-app directive in an html template and take a look at the ng-model directive to interact with the scope properties.
Global variables are 99% of the times pure evil. Let's move our module declaration outside of the global variable and use instead the NG native getter and setters to declare and access it. On a side note, we'll move our controller into a separated file to organize better our project.
In this lecture, we'll introduce the ngRoute AngularJS Module and the corresponding $route service. We'll see how to define routes (our application URLs) during the angular configuration phase and how is possible to navigate between routes with no refresh from the browser. We'll introduce NgView, the ngRoute matching directive to display a route content inside the template.
After taking this lesson, you'll have a basic Angular SPA (Single Page Application) .
Students FAQ #1: If you are planning to run your Angular Application from a subfolder, you need to make sure that your base HREF is configured properly in order to avoid issues. In this lecture you'll learn how to configure it the right way.
Note: This Lecture addresses a question asked from a few students, trying to set Html5 Mode when running the Angular Application from a subfolder (e.g. localhost/subfolder).
When it comes to templating, AngularJS offers a rapid way to include partial html from external files in our main template. NgInclude allows to load and compile external HTML fragments in our app, as long as they are hosted on the same domain. We'll write a "partial" html file and then we'll load it by using this directive.
In this lecture, you'll learn how the ngSubmit directive can be used to trigger an AngularJS function that will process the form data submitted by a user.
On a side note, we'll take a look at how to prevent, thanks to the angular.copy function, a common mistake that happens when dealing with 2-way data binding and passing objects by reference.
This lecture will teach you how to refactor your Business Logic inside a reusable NG Service (we'll create our first Factory) and, on a side note, we'll take a look at how to use annotations when injecting dependencies in our application.
A quick look at how to use the ng-options directive to generate a list of dynamic options for our categories list.
Track by is back. In this AngularJS lecture, we'll learn how to use it to set a default option in our select list.
In this AngularJS lecture, we'll talk about a few different things. We'll learn how to deal with radio buttons (with a particular attention to our application scope), how to set default values and how to load them dynamically by using the ng-value directive.
In this lecture we will talk about how to work with checkboxes in AngularJS: We'll see how to map true/false values and how to use the ng-value directive to set custom values. We will also see how the ng-click directive works
The ngIf directive is very useful when we want to remove and add elements from/to the DOM. In this lecture we will see how to use it to display our content dynamically based on conditions.
Validating user data is one of the most important things in web development. Why? Keep in mind that malicious users often attack websites using injection techniques or a user can submit invalid data causing errors. Preventing these situations is mandatory if you want to build a robust and secure webapp (and validation should be performed both on frontend and backend sides).
In this lecture, you'll learn how to:
- switch on Angular validation (opposite to the native HTML one);
- track form's properties in a controller by giving the form a name;
How do you understand if a form field was filled in or not? Or if the user has already moved the focus on a field or not? Again, how do you understand if the form is valid? In this lesson we'll see what are the tools that Angular provides to answer to these questions.. In addition you'll be introduced to the AngularJS Batarang plugin.
In this lecture we will learn how to display help messages under certain particular conditions only: for example, in case of a required field, we can check the minimum and maximum length and decide to display or hide the message using the ngShow and ngHide directives.
In this lesson we will define a regular expression by using the ngPattern directive, in order to apply a validation on a date field in our form, so that the user will be forced to fill in the data in the format we are expecting.
Disallowing form submission in case of invalid data is an easy way to prevent processing and storing inconsistent data. in this lesson we will see 2 techniques to achieve this result. In the first example we will apply a $valid condition to the AngularJs ng-submit directive and in the second case we will disable the submit button.
In this lesson we will learn how to beautify our AngularJs form and at the same time how to improve the UX in order to make more evident to the user the different validation errors. We will add a red border to invalid fields using the built-in Angular CSS classes (for example ng-pristine, ng-touched) and we'll learn how to apply a conditional css class to a DOM element, thanks to the ng-class directive.
AngularJs offers an easy way to provide a specific error message to each failed validation. Think about a field with multple validation rules: we need a way to be as specific as possible to drive the user to the solution in the shortest time. Using ng-messages will solve the problem! Going further, we will group error messages together in order to create a template by using the ng-template directive and we'll take a look at how to override a specific error message in the template.
- Beginner/Intermediate in HTML and CSS
In this Course you'll learn how to build an Angular 1.x Real Time Application using Firebase and AngularJS while leveraging great Angular Development best practices.
Added a new Section (30+ mins of brand new content): Authentication and Authorization with AngularJS and Firebase.
"The best AngularJS course I have seen", "Great course, with clear explanation, easy to follow and a lot of content", "Teaching and Learning Angular at it's best", "This course is simply awesome ... , after taking this course, I became aware of what I'm doing and what I'm coding".
This AngularJS course will teach you how this framework can dramatically improve your efficiency, reduce your coding time and deliver your next project as a Single Page Application (SPA).
You'll learn how to create AngularJS directives, controllers, modules, how 2-way data binding works and, more important, how to build an AngularJS Web Application from scratch.
You'll learn some of the best practices and how to deal with common mistakes that a developer can face when dealing with AngularJS projects and you'll dig deeper into the built-in components of this technology.
The framework is developed and maintained by Google. At the minute it has more then 1.3K contributors on GitHub and is being used in more than 243.000 live websites (Youtube, IndieGoGo, Aerlingus, Virgin America, Forbes are only a few) and is backed by a wide community (more than 122k questions only on stackoverflow).
There are plenty between documentation, tutorials, examples and fiddles in additions to discussion groups, specialized sites and forums where you can find inspiration or solutions to common problems.
If you are new to AngularJS, no worries. I will drive you through the main topics and will not assume that you are already familiar with the framework.
On the other hand, If you already know AngularJS, you know that it can be as sweet as a rainbow unicorn or as bitter as your worst nightmare: this is why we will teach you a few best practices as well as examples of patterns and anti-patterns all over the course, so that you'll learn a more efficient and clear way of coding your NG apps.
Content and Overview
In this course you'll find 7+ hours of video content; source code is provided for each lesson and in general there will be 2 downloadable attachments per lesson: the start and final source code; this will let you double check that your changes are correct as long as you proceed throughout each chapter. Links to external resources are also provided where useful. Last but not least, I will support you with each question you might have.
The course is divided in 16 sections, each one consisting in several videos (more than 63in total) where we will cover the different components of the AngularJS framework.
By the end of course, you will:
- Learn how to setup AngularJS and how its architecture is built; (Installation, MVW approach)
- Acquire familiarity with the main AngularJS components: modules, controllers, routing, 2 way data binding, dependency injection, prototypical inheritance, scopes, filter, directives, services and templates;
- We will talk a lot about forms, user data validation and filtering. You will learn how to implement a robust form with validation, thanks to Angular Forms and its built-in validator. In other words you will learn how to improve the user experience of your application;
- Learn how to use $http to query a webserver and handle promises in a response;
- Be able to build a full Backend Mock to test your application, by using the Angular $HttpBackend service in the NgMock module;.
- We will dedicate some lessons to custom directives: first a simple implementation then we will unveil the secrets of the "link function", how to isolate the scope and how to make directives reusable with any application.
- Transform your App into a Real Time application, and learn how to use Firebase and Angular to make updated content available in Real Time on any device.
- Learn how to secure your application by building Authentication and Authorisation functionalities.
What you will obtain at the end of the course
At the end of the course you will have a deep understanding of the basic concepts of AngularJS, and you will be ready to start your next project by using this great framework.
- This AngularJS (1.x) Course is meant for Web Developers looking to build a solid knowledge on AngularJS
- Beginners will find a solid AngularJS foundation enriched with real world examples and best practices
- Developers already familiar to AngularJS but looking to improve their skillset