This course concentrates mainly on Javascript based front-end frameworks, and in particular the Angular framework (Currently Ver. 6.x). This course will use Typescript for developing Angular application. Typescript features will be introduced in the context of Angular as part of the exercises. You will also get an introduction to the use of Angular Material and Angular Flex-Layout for responsive UI design. You will be introduced to various aspects of Angular including components, directives and services. You will learn about data binding, Angular router and its use for developing single-page applications. You will also learn about designing both template-driven forms and reactive forms. A quick introduction to Observables, reactive programming and RxJS in the context of Angular is included. You will then learn about Angular support for client-server communication through the HTTP client and the use of REST API on the server side. A quick tour through Angular animation support and Angular testing rounds off the course. You must have either completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of front end web-UI frameworks to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended.
At the end of this course you will:
- Be familiar with client-side Javascript frameworks and the Angular framework
- Be able to implement single page applications in Angular
- Be able to use various Angular features including directives, components and services
- Be able to implement a functional front-end web application using Angular
- Be able to use Angular Material and Angular Flex-Layout for designing responsive Angular applications
- Be able to use Observables and RxJS in the context of Angular applications

Revisiones

SS

This is a very good course on Angular whether you already have an experience with angular.js or only experience in javascript. This course provides with hands on experience with the concepts.

AQ

May 01, 2020

Filled StarFilled StarFilled StarFilled StarFilled Star

I've tried many tutorials from around the web but the tutorials that Mr. Jogesh K. Muppala provided is the best. Very professional and at same time easy to understand.

De la lección

Angular Services, Routing and Single Page Applications

In this week, you learn about data binding in Angular. You will learn how to design basic services. You will learn about Angular router and its use in designing single page applications. You will also learn about single page applications and use Angular Router to design single page applications.

Impartido por:

Jogesh K. Muppala

Transcripción

[MUSIC] Let's now take a piercing look at dependency injection. What exactly is dependency injection and how is it relevant to Angular? Let's talk about that next. So, what exactly is dependency injection? Dependency injection Is a software design pattern. This is a pattern that is useful for implementing applications where you have one object that is dependent on another object in a way that is efficient. Now the Dependency Injection, as we realize, has two parts. Dependency and injection. Let's talk about the dependency first. Dependency means that your object is dependent on another object. So, that is why that is a dependency between your object and another object. Injection is talking about passing the dependency to a dependent object. So, if you have an object, if there is a mechanism that allows you to be able to take an object and then make it available to a second object, so that the other object can make use of it without being aware of exactly how the first object is implemented or cleared. So, in this case the object that is dependent is unaware, or does not need to worry about how the other object is implemented. It just needs to make use of it, within your object, wherever it is. Dependency Injection was coined by Martin Fowler in 2004. And is a useful software design stressing further on dependency. If an object is dependent on another object there are three ways it can access the other object. 1, It can create the dependent object itself by using the new operator you have seen this in the case of classes. So, for example, if you need a new object of a class type, then you create that object using the new within languages, like C++ or Java, and even type script. Then, you can make use of that particular object. The other way is to declare the other object as a global variable, and then you look up the dependency using the global variable. The third way of doing this is to have the dependency passed into you, wherever it is needed. So if you're dependent on something else, then that something else will be injected into you by a system wherever it is required. So, now the third option gives you a lot of flexibility in the way that software is designed. So in this approach, in the third approach, there is no need for hard coding after dependency. In the first two approaches, the dependency is hard coded in there, because you need to be fully aware of how you create the object that you are dependent upon, within your own object. In the third object, because the other object is being injected into you whenever you need it, you don't really care how it is created, as long as you have access to it. And the other advantage that this approach brings about is that it facilitates ease of testing your application because when you need an object that you are dependent upon, instead of passing in the dependent object you could even create a mock object of the type and then pass it in in order to test your specific object. This separation between the dependent object and the other object is very, very useful as we realize in carrying out testing. We'll discuss this briefly when we look at angular testing later on in this course. Dependency Injection brings about four different roles that we need to consider. First of course is the service that you're going to make use of within your component for example and that needs to be injected in. Second the client which is dependent upon the service which in this case is your component. Third, the interface, once injected how do you make use of that service. And finally the injector, the entity that is responsible for injecting that object into your object. As you will pretty soon realize, angular express dependency injection very much in the way it is implemented. So this is what facilitates the separation of a business logic from the dependency construction so you can write your business logic in the independent object and then inject them wherever it is require. And the dependency is pass into the object that is consuming it wherever it is needed. Now, how is this injection taken care of? This injection is taken care of by the angular injection subsytem. The angular injection subsystem takes care of creation of these services and then inject them into your component wherever you need them. So it also takes care of resolving the dependencies and also, providing those objects to other components that require these objects. So the angular injector subsystem provides all these mechanisms for us to enable this. How does it actually work? We will look at that in the exercise that follows, where we will use a service that we create In the components that we designed for our Angular application. [MUSIC]