
Understand the architecture of angular apps, with a front-end client in the browser and a back-end server, using http endpoints and APIs to fetch data from databases.
Set up your development environment by installing the stable node (minimum 6.9) and install angular CLI globally via npm to create your first Angular project, then verify with ng --version.
Discover the core structure of an angular project, from e2e tests and node_modules to the source folder with modules, components, assets, and environments, plus bootstrapping the app module.
Discover how cohesion unifies related point operations by converting an interface-based design into a point class with x and y fields and draw and getDistance methods.
Learn how to use access modifiers in TypeScript to prevent outside modification of coordinates by marking fields as private, ensuring predictable behavior and reducing bugs.
Learn how to simplify TypeScript constructors by prefixing parameters with private or public access modifiers to have the compiler generate and initialize fields, reducing boilerplate and controlling field visibility.
Explore the fundamentals of building Angular applications and gain a basic understanding of components, templates, directives, and services to start creating with Angular.
Learn to use dependency injection in Angular by injecting the courses service in the constructor, decoupling the component, and registering the provider in the app module.
Explore displaying data on your views, applying dynamic classes and styles to dom elements, formatting data with pipes, and handling events raised from the dom element.
Learn how property binding works in Angular, distinguish between DOM properties and HTML attributes, and bind the colspan attribute using ATTR to fix the error.
Explore two Angular approaches to read input values: use the event object to access event.target.value, or declare a template variable to access input.value.
Explore how the ngFor directive responds to changes in component state by adding, removing, and updating courses. Observe how change detection updates the DOM after onAdd, onRemove, and onChange actions.
Explore ngStyle in Angular, using a bound object to toggle background color, text color, and font weight based on canSave, and compare inline styles with class-based styling.
Learn to validate Angular forms using FormControl and FormGroup, track input state, compare template-driven and reactive forms, and unit test complex validation logic.
Apply html5 validators in angular, such as required, minlength, maxlength, and pattern, to enforce input constraints and render error messages with ngIf using the errors object and dynamic minlength feedback.
Learn how to add a checkbox to an Angular form with bootstrap, using ngModel and a name isSubscribed, label it subscribe to mailing list, and view the values as json.
Build reactive forms in Angular by explicitly creating control objects in code, enabling dynamic forms, and supporting custom and asynchronous validation, including username uniqueness checks against the server.
Add validation to reactive forms by applying Validators (required, minlength, maxlength, pattern, email) to form control objects, access via form.get and a getter, and render error messages.
Learn to apply multiple validators to an angular form control using an array, including required and minLength, and display specific error messages in the template.
Implement a custom validator function in Angular forms by encapsulating static validator methods in a dedicated UsernameValidators class, returning validation errors or null.
Create a custom Angular username validator shouldBeUnique to simulate a server check for 'mosh'. Learn asynchronous, non-blocking validation with setTimeout and why async validators need a different signature.
Review reactive forms by building a form object as a group with name as a FormControl and topics as a FormArray, then bind using FormGroup, FormControlName, FormGroupName, and ngFor.
Connect Angular applications to back-end services and APIs, perform CRUD operations, and extract a reusable data service for multiple endpoints. Learn to handle errors and apply separation of concerns.
Explore using a fake http service with jsonplaceholder.typicode.com as the back-end for an Angular app, learning to fetch, create, update, and delete posts without a real database.
Implement delete functionality in the Angular course by sending an http delete request to the post endpoint with the post id, then remove it from the array with splice.
Explore separation of concerns by refactoring post management into a dedicated service that handles http calls, enabling isolated unit tests and reusable backend logic.
extract a post service with Angular CLI, move http calls from component to PostService, inject the service, and implement getPost, getPosts, createPost, updatePost, and deletePost to ensure separation of concerns.
Handle expected errors in Angular by annotating the error as Response and checking 404 and 400 statuses, then use form.setErrors(error.json) for field errors.
Configure routes to map paths to components and enable navigation in your application. Add a router outlet to display the active component and create links to navigate between routes.
Learn how to apply dynamic active states in navigation bar with routerLinkActive directive, replacing the static bootstrap active class with active and current classes to highlight the current page.
Angular is one of the most popular frameworks for building client apps with HTML, CSS and TypeScript. If you want to establish yourself as a front-end or a full-stack developer, you need to learn Angular.
If you've been confused or frustrated jumping from one Angular 4 tutorial to another, you've come to the right place. In this course, Mosh, author of several best-selling courses on Udemy, takes you on a fun and pragmatic journey to master Angular 4.
By the end of watching this course, you'll be able to:
Right from the beginning, you'll jump in and build your first Angular app within minutes. Say goodbye to boring tutorials and courses with rambling instructors and useless theories!
Angular 2+ has been written in TypeScript. So, in section 2, you'll learn the fundamentals of TypeScript and object-oriented programming to better understand and appreciate this powerful framework.
Over the next 8 hours, you'll learn the essentials of building client apps with Angular:
So, if you're a busy developer with limited time and want to quickly learn how to build and deploy client apps with Angular, you can stop here.
If you're more adventurous and want to learn more, there is far more content for you! Over the following sections, you'll learn about more advanced topics:
All that covers just over 21 hours of high-quality content. This is equivalent to a book with more than a thousand pages! But the kind of book that every line is worth reading, not a book that you want to skim! If you have taken any of Mosh's courses before, you know he is very clear and concise in his teaching and doesn't waste a single minute of your precious time!
Finally, at the end of the course, you'll build and deploy a real-time e-commerce application with Angular 4, Firebase 4 and Bootstrap 4. This application exhibits patterns that you see in a lot of real-world applications:
You'll see how Mosh creates a brand new Angular project with Angular CLI and builds this application from A to Z, step-by-step. No copy/pasting! These 8.5 hours are packed with tips that you can only learn from a seasoned developer.
You'll learn how to apply best practices, refactor your code and produce high quality code like a professional developer. You'll learn about Mosh's design decisions along the way and why he chooses a certain approach. What he shares with you comes from his 17 years of experience as a professional software developer.
You're not going to get this information in other Angular courses out there!
And on top of all these, you'll get:
PREREQUISITES
You don't need familiarity with TypeScript or any previous versions of Angular. You're going to learn both TypeScript and Angular from scratch in this course.
WHAT OTHER STUDENTS WHO HAVE TAKEN THIS COURSE SAY:
"Absolutely amazing Angular course. Mosh not only introduces key concepts behind Angular, but also pays attention to coding style and good practices. Additionally, course is contstantly enhanced and updated. Also, student questions are answered by Tim - Mosh's teaching assistant. Awesome!" -Calvis
"I am amazed of how dedicated you are in providing updates and more contents to this course. This kind of value is what define a great course and made me feel that the money is well spent. Keep it up! Furthermore, lessons are arranged and planned really carefully. This made the learning experience more seamless and exciting. Thanks Mosh!" -Rashid Razak
"This is another excellent course from the wonderful author Mosh. Thank you Mosh for your awesome course on Angular. Inspite of being a Pluralsight subscriber for the last 3 years, I have subscribed 10 out of 16 courses so far Mosh has produced in Udemy. Also I have viewed 3 of his courses in Pluralsight. That is how I got introduced to this brilliant author. This speaks about the quality of his content. Once again Thank you Mosh for all your efforts. Hope to see a Design Patterns course from you soon." -Dhanasekar Murugesan
"Fantastic course, well laid out, good speed, and explains the why behind everything he does, shedding light on what's under the hood. Also, Mosh has a very practical and elegant coding style worth emulating." -Mack O'Meara
"This is the second course I've taken with Mosh as the instructor and I've signed up for another. The quality of the audio, video, and content shows Mosh invests his time and money to create great and valuable videos. The material is relevant, up-to-date, and provides the student with the ability to succeed in the subject matter (in this case Angular). My expectations were exceeded again. I'll be taking more courses with Mosh!" -John
30-DAY FULL MONEY-BACK GUARANTEE
This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, and do the exercises, and if you are not happy for any reasons, contact Udemy for a full refund within the first 30 days of your enrolment. All your money back, no questions asked.
ABOUT YOUR INSTRUCTOR
Mosh (Moshfegh) Hamedani is a software engineer with 17 years of professional experience. He is the author of several best selling Udemy courses with more than 120,000 students in 192 countries. He has a Master of Science in Network Systems and Bachelor of Science in Software Engineering. His students describe him as passionate, pragmatic and motivational in his teaching.
So, what are you waiting for? Don't waste your time jumping from one tutorial to another. Enroll in the course and you'll build your first Angular app in less than 10 minutes!