Angular 2 promises cross-platform coding, greater development efficiency, better speed and performance and incredible tooling to create applications, both mobile and desktop.
We will begin by grasping the concepts of Angular 2, and apply them to an application that grows in complexity throughout the course, culminating in a fully-featured example of song-library.
You will discover how to present data to users while also ensuring that their interactions on the UI are handled by the presentation layer of your app. Then we will take a look at business logic needs so that the system behaves exactly as per your requirements; here services and other abstraction layers will come into play.
You will also learn how to create forms with ease, and smoothly handle validation. At the end, we’ll glue all these development aspects with reactive and asynchronous programming, which you will embrace as you learn to control flows and story lines of actions in the app.
This course will not only teach you the ropes of developing with the framework, but also help you build more complex and future-proof applications.
About The Author
Mathieu Chauvinc is a Managing Director at Red Ape Solutions, where he aspires to keep the company at the bleeding edge of web technologies. On a daily basis, he leads the tech team of 15 and collaborates with them in building complex single page applications and neat hybrid mobile apps. He has been involved in web technologies for over a decade, from Django to Node.js and Go, SQL to NoSQL, Mootools to Angular 2, continuously trying to keep the right balance between the excitement of new frameworks and the stability of proven ones. He always has a special place in his heart for Python and Django.
He holds a Master’s in Engineering from the German University Karlsruhe and a Master’s in Engineering from the French ENSAM (Paris). Despite an engineering background, he has always had a passion for knowledge sharing, which has followed him until today, and he regularly conducts corporate or free training sessions on various IT topics in his country of residence, Malaysia.
We need to get started with our project. For this, we’ll use a seed project and install all dependencies so that a simple gulp task allows us to run our app.
Is it worth it to use TypeScript for Angular 2 projects? We think it is, and we’ll show why in this video.
We need to react to the user’s interactions such as clicking and typing. For this, we’ll bind to events.
Cluttering our entire app into a single root component will not be scalable, nor allow us to reuse components.
So we’ll create our own component to handle a smaller part of the application.
As we add more specific, reusable components, they will need to communicate with one another. We’ll use @Input and @Output to communicate to and from parent and child components.
Sometimes, the markup coded in a template needs to be kept in the template of a smaller component. This is called content projection, and we’ll use ng-content to achieve that.
Some components don’t expect to display anything. They need to act on the existing element they are added to. These are called directives in Angular 2 and are basically components without a view. We’ll create one.
The business layer needs to be separated from the presentation layer. Also data is often pulled from a server. We’ll make use of built-in injectables and in particular the HTTP service to achieve those two goals.
Logic should not be kept inside a component. So we’ll build our own service to take care of the loading of data and mapping to track objects.
The strength of dependency injection is that a constructor does not need to know what implementation of each of its dependencies it uses. Using "provide," we can override a service and make full use of the strengths of dependency injection.
It is rare for all components in an application to want to use a service in the same manner. There will always be small customizations needed, even within the same application. The hierarchy of injectors makes it possible to handle those intricacies while remaining DRY.
Tests are great to ensure quality of work, avoid breaking changes and in general make developers feel comfortable about the code they write. We’ll use a typical testing setting to unit-test an ES6 class and the service we built earlier.
Sites rarely have a single page; we need to be able to navigate from one page to another. We’ll use Angular’s router to enable such navigation.
Pages that display a single item, for example, an article or a track, need to read their ID from the URL of the route. We will create a route that includes such a parameter and capture it from the target component.
Under a single item page, it is common to have sub-items, for example, the details for a track, and the artist for a track. We can handle all routes from the main component, but that’s messy and not very future proof. With the new router’s child routing abilities, we will extend a single item route defined at the top level, with sub-routes defined on the single track page component.
At various, important moments in an application, we might want to interject and conduct some actions. Hooks provide a way to do so in a very pluggable manner.
Separating concerns between view logic and presentation is vital. However, it is also helpful to use a declarative way to apply simple modifications on data from within the template. To achieve this, we will use pipes that are built into Angular 2.
Existing pipes in Angular 2 cover a fair amount of use cases of pipes. But not all. We create our own pipe and extend it to use parameters.
One of the promises of Angular 2 is to be more efficient and faster. When confronted with mutable objects, Angular assumes they may have been modified; except within pipes. Let’s consider ways to deal with that exception, good and bad.
Many components simply load data asynchronously and then set the given data onto the template. The async pipe offers to deal with such a case, as well as to guarantee that on destroy, the corresponding listeners will be stopped, thus avoiding memory leaks.
Almost every site or app contains at least one form. Sometimes, forms can be simple and we want a quick way to implement them while still making use of validation and error display. We will build a fully template-based form that is quick, yet powerful.
Template-based forms can quickly get cluttered and its declarativity soon becomes a lack of separation of concerns. Using NgFormModel, we can ensure that more complex and future proof forms are built.
Every form needs validation, be it required fields, e-mail checking or more unique requirements. We will use built-in and customer validators to evaluate a form’s validity and to display the corresponding errors.
Asynchronous processes, when they combine several actions, can be complex. Promises allow handling of such flows in a very natural way, which even at times makes us forget that the flow is asynchronous.
When it comes to combining events, API calls, and various other asynchronous tools, everything becomes even more complicated and confused. Observables offer a cohesive interface to combine those tools, and furthermore extend it with operators to accomplish just about anything with streams.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.