در این آموزش تصویری با نحوه طراحی اپلیکیشن های تک صفحه ای با Angular 2 آشنا می شوید.

این دوره یکی از بهترین و کاملترین دوره های Angular 2 می باشد.

این دوره آموزشی محصول Udemy است.

سرفصل های این مجموعه:

  • معرفی
  • Angular 2 چیست؟
  • ساخت پروژه Angular 2
  • آشنایی با ساختار پروژه
  • TypeScript چیست؟ چرا TypeScript؟
  • آشنایی با TypeScript Code
  • اجزای سازنده، قالب ها
  • آغاز به کار با قطعات
  • آشنایی با AppModules
  • استفاده از قالب ها و استایل ها
  • ایجاد اجزای جدید
  • درباره انتخابگرهای منحصر به فرد
  • استفاده از چندین کامپوننت
  • قراردادن محتوا با ng-content
  • بایندینگ ویژگی های سفارشی
  • اتصال به رویدادهای سفارشی
  • ngModel و AppModules
  • binding دو طرفه
  • Components & Databinding
  • پروژه: ایجاد سربرگ و کامپوننت
  • پروژه: ایجاد دستور العمل و کامپوننت
  • پروژه: ایجاد مدل دستور العمل و لیست کامپوننت
  • پروژه: جزئیات Recipe و Databinding
  • پروژه: لیست خرید کامپوننت
  • دایرکتیوها
  • دایرکتیور چیست؟
  • تعامل عناصر با HostListener و HostBinding
  • ngSwitch
  • مکانیزم Angular 2’s De-Sugaring
  • استفاده از NgModules
  • پروژه: لیست محتویات با ngFor
  • اشکال زدایی Angular 2
  • Chrome Debugger & Sourcemaps
  • خدمات و تزریق وابستگی
  • Service چیست؟
  • Dependency Injection چیست؟
  • خدمات و AppModules
  • استفاده از خدمات برای تعامل متقابل اجزا
  • پروژه: ایجاد سرویس دستور العمل
  • پروژه: ایجاد لیست خرید خدمات
  • پروژه: پاکسازی
  • مسیریابی
  • آشنایی با Angular 2 Router
  • راه اندازی Route
  • بارگذاری اجزاء
  • ناوبری با لینک
  • آشنایی با ناوبری مسیر
  • پارامترهای Route
  • پارامترهای Query
  • تغییرات پارامترهای کوئری در آخرین نسخه روتر
  • پارامترهای کوئری و دستور routerLink
  • Child Routes
  • استفاده از Guards با AppModules
  • Guards: CanActivate
  • Guards: CanDeactivate
  • استراتژی های Location

عنوان دوره: Udemy Angular 2 The Complete Guide

نویسنده: Maximilian Schwarzmüller

سطح: همه سطح ها

مدت دوره: 16 ساعت و 5 دقیقه



Angular 2 - The Complete Guide

Maximilian Schwarzmüller
All Levels
16.5 hours

Learn how to create modern web applications with the successor of Angular.js
From Setup to Deployment, this course covers it all! You'll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular 2 App with Modules and Offline Compilation and much more - and in the end: You'll learn how to deploy an application!

But that's not all! This course will also show you how to use the Angular 2 CLI and feature a complete project, which allows you to practice the things learned throughout the course!

And if you do get stuck, you benefit from an extremely fast and friendly support - both via direct messaging or discussion. You have my word! ;-)

With Angular 2 being in release candidate phase and almost released, now is the time to jump in and take the advantage of being amongst the first to fully use the power and capabilities Angular 2 offers! Learn all the fundamentals you need to know to get started developing Angular 2 applications right away.

This course will be kept up-to-date to ensure you don't miss out on any changes once Angular 2 is finally released!

Hear what my students have to say

Absolutely fantastic tutorial series. I cannot thank you enough. The quality is first class and your presentational skills are second to none. Keep up this excellent work. You really rock! - Paul Whitehouse

The instructor, Max, is very enthusiastic and engaging. He does a great job of explaining what he's doing and why rather than having students just mimic his coding. Max was also very responsive to questions. I would recommend this course and any others that he offers. Thanks, Max!

As a person new to both JavaScript and Angular 2 I found this course extremely helpful because Max does a great job of explaining all the important concepts behind the code. Max has a great teaching ability to focus on what his audience needs to understand.

This Course uses TypeScript

TypeScript is the main language used by the official Angular 2 team and the language you'll mostly see in Angular 2 tutorials. It's a superset to JavaScript and makes writing Angular 2 apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular 2 apps. Check out the free videos for more information.

TypeScript knowledge is, however, not required - basic JavaScript knowledge is enough.

Why Angular 2?

Angular 2 is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular 2 allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular 2 is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.

Due to the drastic differences between Angular 1 and Angular 2 you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular 2.

Get a very deep understanding of how to create Angular 2 applications

This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular 2 offers and how to apply them correctly.

Specifically you will learn:

Which architecture Angular 2 uses
How to use TypeScript to write Angular 2 applications
All about directives and components, including the creation of custom directives/ components
How databinding works
All about routing and handling navigation
What Pipes are and how to use them
How to access the Web (e.g. RESTful servers)
What dependency injection is and how to use it
How to use Modules in Angular 2
How to optimize your (bigger) Angular 2 Application
We will build a major project in this course
and much more!
Pay once, benefit a lifetime!

This is an evolving course! Angular 2 currently is in beta and this course will therefore be expanded and reflect futures currently not fully implemented or documented. You won’t lose out on anything!

Don’t lose any time, gain an edge and start developing now!

What are the requirements?
Basic HTML and CSS knowledge helps, but isn't a must-have
Prior JavaScript and TypeScript knowledge also helps but isn't necessary to benefit from this course
What am I going to get from this course?
Develop modern, complex, responsive and scalable web applications with Angular.js 2
Fully understand the architecture behind an Angular 2 application and how to use it
Use their gained, deep understanding of the Angular 2 fundamentals to quickly establish themselves as frontend developers
Create single-page applications with on of the most modern JavaScript frameworks out there
Who is the target audience?
Newcomer as well as experienced frontend developers interested in learning a modern JavaScript framework
This course is for everyone interested in learning a state-of-the-art frontend JavaScript framework
Taking this course will enable you to be amongst the first to gain a very solid understanding of Angular 2

Section 1: Getting Started
Lecture 1
Let me introduce myself as well as this course.

Lecture 2
What is Angular 2?
The most important question first: What is Angular 2? This lecture will give you an overview what Angular 2 actually is, why you would use it and what its advantages are.

Lecture 3
Creating an Angular 2 Project
Enough theory for now, let's create an Angular 2 app!

Lecture 4
Got Setup Issues (with Angular 2 CLI)?
Don't want to use the CLI or got problems with it? Try this project.

Lecture 5
Editing our First App
It's nice to have an automatically-created application, but it would be nicer if we could also change something in the code. Well, let's do that then.

Lecture 6
Understanding the Project Structure
What did the CLI actually create there? This lecture explores our project structure.

Lecture 7
Why TypeScript? What is TypeScript?
This course uses TypeScript. Why? What are its advantages? Learn more in this lecture!

Lecture 8
Understanding the TypeScript Code
Never saw TypeScript before? Let me guide you through the code you saw thus far.

Section 2: Components, Templates & Databinding
Lecture 9
Getting Started with Components
Let's explore what Components actually are and how they work.

Lecture 10
How an Angular 2 App gets started
How does an Angular 2 app actually get loaded/ started? Let's find out in this video!

Lecture 11
Understanding AppModules
What are AppModules? What does the AppModule do? Let's learn more, in this lecture.

Lecture 12
Using Templates & Styles
We got some options when it comes to using Templates and Styles. Let's see which options that are.

Lecture 13
First Summary
That was a lot - time for a first summary about Components and how the App starts!

Lecture 14
Creating a new Component
One Component is okay, but two is certainly better. Time to learn how to add a new Component to the Party!

Lecture 15
About Unique Selectors
Why do I name the Selectors the way I do name them? Because they should be unique! Why? Have a look at this lecture!

Lecture 16
Using multiple Components
Let's add another Component and see how all our components can work together.

Lecture 17
MUST WATCH: How to proceed with this Course
This is a must watch! There are some slight changes since I recorded the videos. It's not hard to adjust - but you need to watch this video to learn what you need to do!

Lecture 18
View Encapsulation & Styling
Remember the lecture about Styling? I mentioned that Styles are only applied to the Component for which the Styles are defined. How does Angular 2 do this? It's View Encapsulation what you're seeing here! What's that? Learn more in this video.

Lecture 19
Inserting Content with ng-content
Components can not only display static content. Indeed they have many ways to render dynamic content. This lecture teaches one way how to display content passed to a Component.

Lecture 20
Databinding Overview
Components, Components, Components... Cool to see all that in Action, but you certainly want to make them a bit more dynamic and flexible, right? Databinding to the rescue! Databinding allows you to let your Template/ View with your Code/ Component Body as well as with other parts of your App.

Lecture 21
String Interpolation
Databinding #1: String Interpolation. String Interpolation allows you to output text content in your template. You'll use that very often. Learn how it works here.

Lecture 22
Property Binding & Event Binding Overview
Databinding #2 & #3: Property Binding & Event Binding. Property Binding & Event Binding allow you to pass data/ fetch data to/ from HTML Elements (DOM Properties & Events) as well as Directives and Components. Learn more about it in this lecture.

Lecture 23
Property Binding
Property Binding allows you to pass data INTO something (DOM Properties => HTML Elements, Directives, Components). That's something you'll often use, learn how to implement it in this lecture.

Lecture 24
Binding to Custom Properties
Let's set up our own Property Binding on our own Component!

Lecture 25
Event Binding
Event Binding kind of is the opposite of Property Binding. It's all about getting Data OUT of something (DOM Events, Directives & Components). Learn more in this lecture.

Lecture 26
Binding to Custom Events
Time to create our own Event Binding with our own, custom Event.

Lecture 27
More Information on Property & Event Binding
There are things to add about Property & Event Binding. This lecture covers those extra information pieces.

Lecture 28
ngModel and AppModules
Lecture 29
Two-Way Binding
Databinding #4: Two-Way Databinding made Angular 1 popular. Angular 2 doesn't use it by default. WHAT??? No problem as you'll learn in this lecture. And you can still use it. Learn that, too, in this lecture.

Lecture 30
The Component Lifecycle
Components have a Lifecycle which Angular 2 runs through. Learn more about it in this lecture.

Lecture 31
Component Lifecycle Usage Examples
Lifecycle theory is great, seeing it in action is even better though. This lecture takes care about this!

Lecture 32
Template Access with Local References, ViewChild and ContentChild
How can you work with your HTML Elements in your templates? This lecture explains which easy & quick possibilities of referencing and accessing them Angular 2 offers you.

Section 3: Course Project - Components & Databinding
Lecture 33
Project Setup
Let's start working on our course project in this lecture!

Lecture 34
IMPORTANT: Required Changes
Definitely watch this lecture to learn more about required changes.

Lecture 35
Course Project: Creating the Header Component
Let's create the first Component (besides the Root Component) => The Header.

Lecture 36
Course Project: Creating the Recipes Component
Only seeing a Header isn't that awesome. Let's add another Component to the Party!

Lecture 37
Course Project: Creating Recipe Model & List Component
The App is taking Shape, but now we're making a big jump and add a couple of other important parts to it!

Lecture 38
Course Project: Recipe Detail & Databinding
Time to make everything a bit less static and use Databinding to work with Data in our App.

Lecture 39
Course Project: Shopping List Component
To finish the first part of the Course Project, we'll add another Component to it.

Section 4: Directives
Lecture 40
What are Directives?
Components are important. But Angular 2 is not only about Components. And Components are Directives, remember that? What are Directives then? And are there Directives which aren't Components (Answer: Yes!). Learn more about it in this lecture.

Lecture 41
Attribute Directives
Example Time! See some built-in Attribute Directives in Action to understand how they work and what they do!

Lecture 42
Building a Custom Attribute Directive
Built-in Directives are cool, custom Directives are awesome! Learn how to build your own Attribute Directive here. This also shows you how Directives work under the hood.

Lecture 43
Element Interaction with HostListener & HostBinding
How do Directives interact with the HTML Elements to which they are applied? Learn it in this lecture!

Lecture 44
HostListener: Passing Data
You may also pass the Event Object when using HostListeners. This Article explains how to do this.

Lecture 45
Directive Property Binding
Directives may use Property Binding as well. Learn how to set it up and use it in this lecture.

Lecture 46
Structural Directive Time! Learn how to use the built-in ngIf Directive.

Lecture 47
Structural Directive Time! Learn how to use the built-in ngFor Directive.

Lecture 48
Structural Directive Time! Learn how to use the built-in ngSwitch Directive.

Lecture 49
Angular 2's De-Sugaring Mechanism
What does the "*" mean in front of all those Structural Directives? This lecture explains what Angular 2 does behind the scenes.

Lecture 50
Building a Custom Structural Directive
Can we build our own Structural Directives? Yes! This lectures explains how to do that and what happens under the hood.

Lecture 51
Using NgModules
Section 5: Course Project - Directives
Lecture 52
Course Project: Ingredients List with *ngFor
Let's practice all that Directive stuff in our course project. First, we'll use ngFor to output the ingredients of our recipes.

Lecture 53
Course Project - Custom Dropdown Directive
I think a Custom Directive would also fit in great! Let's build a Dropdown Directive.

Section 6: Debugging an Angular 2 Application
Lecture 54
A brief introduction to this module

Lecture 55
Chrome Debugger & Sourcemaps
The Chrome Developer Tools offer great Debugging support. This lecture shows how to use the Chrome Debugger with TypeScript code.

Lecture 56
If you don't find the TypeScript Sourcemaps
Lecture 57
Augury is a Chrome Extension which helps you with Debugging Angular 2 Applications. Let's have a look at it in this video.

Section 7: Services & Dependency Injection
Lecture 58
What are Services?
Components & Directives are important. But until now it's sometimes difficult to connect everything. Also, you might have duplicate code. If only there was a place to centralize certain tasks...

Oh...there is! Learn what Services are and how they work!

Lecture 59
Example: Logging Service
Time to see Services in Action, let's build a little Logging Service.

Lecture 60
What is Dependency Injection?
We have Service. How do we use it? We need to inject into the places where we want to use it. What's Dependency Injection? This lecture helps you!

Lecture 61
Example: Injecting the Logging Service
Let's inject our Logging Service from one of the last lectures.

Lecture 62
Multiple Instances vs One Instance
Dependency Injection is really powerful. Learn how you may use it to control the instance it creates for you.

Lecture 63
Services & AppModules
Learn how to set up Application-wide service instances with AppModules.

Lecture 64
Injecting Services into Services
Sometimes you also need a Service inside a Service. That's of course possible, too. Learn how to inject a Service into a Service here.

Lecture 65
Using Services for Cross-Component Interaction
Services may also be used to let Components communicate efficiently with each other. Learn more about that in this lecture.

Section 8: Course Project - Services & Dependency Injection
Lecture 66
Course Project: Creating the Recipe Service
Project Time again! Time to add some Services to it. A Service to manage our Recipes for example.

Lecture 67
Course Project: Creating the Shopping List Service
Or let's also add a Service for our Shopping List.

Lecture 68
Course Project: Cross-Service Communication
As explained in the Service Module, Services are also great for Cross-Component Communication. Let's take advantage of that here!

Lecture 69
Course Project: Cleanup
There are some things which can be cleaned up/ improved in our project. Or some missing parts. This lecture takes care about these things.

Section 9: Routing
Lecture 70
Introduction to the Angular 2 Router
What is the Angular 2 Router, what does it do and why do we need it? This lecture should help you with these questions.

Lecture 71
READ FIRST: Angular 2 Router Version & Changes
Lecture 72
Setting up Routes
This module explains how to create Routes in an Angular 2 application.

Lecture 73
Loading Components
Time to load our components - otherwise our Routes don't do that much, do they?

Lecture 74
Navigation with Links
Lecture 75
Understanding Navigation Paths
There are a couple of options when it comes to creating Navigation Paths. Learn more about them, in this lecture.

Lecture 76
Imperative Routing (Triggered in Code)
Sometimes you don't want a clickable link, but instead trigger a Navigation Action in your Code. Learn more about your possibilities regarding this, in this lecture.

Lecture 77
Route Parameters
A lot of routes also pass some data to the target component. This lecture explores how to setup Route Parameters.

Lecture 78
Extracting Route Parameters
Passing Parameters is nice, but you also want to extract them, right? Learn more about your possibilities, in this lecture.

Lecture 79
Query Parameters
Sometimes you only optionally pass some data. That is typically done through Query Parameters. You may learn more about them and how to use them in your routing, in this lecture.

Lecture 80
Query Params Changes in latest Router Version
With the latest Router version (rc1), the way you access QueryParams changed. Though the old approach still works for now. Check out this article to learn more.

Lecture 81
Extracting Query Params
Passing them is nice - but how to use them? This lecture explores this question.

Lecture 82
Query Parameters and the routerLink Directive
You learned how to pass Query Parameters using Imperative Navigation. But how do you do it using Links (routerLink)? This lecture should help you.

Lecture 83
Passing Fragments and Preserving Query Params/ Fragments
Fragments are another (possible) part of your URL. This lecture shows you how to pass Fragments and also how you can ensure your active Query Params and Fragments to persist upon a URL change.

Lecture 84
Extracting Fragments in Code
You want to use a Fragment in your Code? This article quickly explains how to extract it.

Lecture 85
Child Routes
We got Routing. That's great! But sometimes you want to use some nested Routes. This lecture shows you how to do that.

Lecture 86
Redirecting Request
You may also redirect certain requests to other routes. Learn more about it, in this lecture.

Lecture 87
Styling Active Route Links
Showing the user where he currently is in your application is very important. Therefore, Angular 2 helps you with that by allowing you to place your own CSS classes on currently active Route Links.

Lecture 88
Using Guards with AppModules
There's one adjustment you need to make, to use Guards with AppModules. Let's see which one that is.

Lecture 89
Guards: CanActivate
Guards help you to control Route Access. This lecture teaches you how to control who's allowed to access a Route / Component, using the CanActivate Guard.

Lecture 90
Guards: CanDeactivate
Guards help you to control Route Access. This lecture teaches you how to control who's allowed to leave a Route / Component, using the CanDeactivate Guard.

Lecture 91
Location Strategies
Learn more about available Location Strategies