The viewer doesn’t yet have a good understanding of ES6 and TypeScript, which makes it hard for him to read and understand Angular 2 code. Thus, we go over the fundamental features and we’ll take a look at our development setup, on top of which we build our application.
- [Man] Hi and welcome to section 1, getting started. This is an introductory section, where we will go over some important concepts that will help us better understand angular two. In this section, we will look at some fundamental features of ES6 and prepare our development environment for working in this new paradigm of front end development, namely web components and how angular, as well as auto frame works implementing. Now let's move to the project setup. In this video you should gain a better understanding of a few key ES6 features and how we leverage TypeScript and SystemJS to load ES6 code into our browser.
So to begin with our project, we will use a very simple setup which is based on the one described on the angular website. So actually, if you open the five minute quickstart, you will see a description of a simple setup for our first angular two application. This setup doesn't add too much boilerplate right from the beginning, and will be just enough for us to get started with our development cycle. But before digging too much into explaining the details of the setup, let's quickly take a look at some of the most important ES6 features.
An interesting and much used new feature are the so-called arrow functions. I have prepared a sample, where we have a person clause and a method registers say hello which registers on a click event which is present within our html page. What we do right here below is we create a new instance of that person class we invoke the register, say hello, and then we provocate the click event on our button. Now let's start application. As you can see, what we get is hi, I am object, html button element, and my name is, here something's missing, the name which we paste in before.
So the problem here is that this here doesn't point to our class instance, but rather to the element, namely the button on which the click event has been registered. This is a common problem in ES5. Now while there are a couple of work arounds available for this, we are going to do now is to use the so-called arrow functions which we described before. We can write it in a very straightforward manner, and now if we save our modifications, we will see our application once again, and now we get the correct message.
We get, hi, I am an object, which is our class, person, and my name is Yuri. So as you have ssen, we just create a class person, and this is the way it is currently done in ES5, but as you can see, it is not a very natural and easily understandable approach, especially for people coming from other languages. That's probably also why they introduced the dedicated class cuer in ES6. So let's create a class person here, and convert our code.
First of all, the constructer, we simply copy and paste our name association up here, obviously it also takes a parameter, next step is to move up here, the register says hello. We can simply copy it up, and remove the whole paragraph prior to that part, and also the function key was no more needed. As you can see, it already gets a much more concise and easy readable way. The code below can just be left here.
As it is, we can still instantiate just normally, now we feel safe, we see we get still the same message as before, so that means the code is working. Great, we can now move over to the last feature, which we are going to show in this video, which are the modules. So first of all, let's take our last person here and move it to its designated file. Create a person TS file, and copy paste it in here, and let's also click the TypeScript arrow by defining a local memory variable.
Good, so now we have to export this class, such that it can be imported in another file. Let's jump back to our bootstrap LTS file, and here is where we actually use the new import statement. What is, for importing group six modules from another file into this here. We open the curly braces, and then we can use the relative path to our file without using the extension. Finally, we import to personal object, we exported previously, and what is nice here, as you can see is the alt completion support types it gives us.
Just below here is the conflict of system JS, where we define our package, and one step further below here, is where we find the main entry file, the main entry file which loads up our application which is our app boot instruct file. Now it might also be worth going to take a look at the documentation of system JS, which you can find on GitHub, and especially there is a config API MD file, which describes some more advanced configuration options, which you might definitely need in a more complex setup.
So in this video, we learned about TypeScript and some of the fundamental features of ES6. We have also seen the first version of our setup that will help us build our angular two components on top of it. Next video, we will talk about the new paradigm in front end development, namely web components and how angular as well as autoframeworks approach them.
Get up to speed with one of the most important building blocks of Angular 2: component-based directives, aka components. Components are reusable HTML widgets that replace the controller-based architecture in Angular. This course guides you through the various steps in migrating to Angular 2 and building real-world Angular components of your own.
Author Juri Strumpflohner starts by setting up a modern development environment with TypeScript and ES2015 support. Next, he explains what components are, how to build them, and how they differ from directives. He provides an opportunity to apply these new concepts while building a fictitious dashboard application for a home automation system.
Next, learn about HTML rendering templates, see how to establish a data flow between different components, and even find out how to integrate external libraries. Juri also shows how to make components production-ready and maintainable by applying automated unit and end-to-end testing techniques. As a bonus, discover how to bring your Angular 2 components to other environments such as the server side and mobile devices.
- Upgrading to Angular 2
- Feeding a component with data
- Building a foundation for your Angular app
- Building reusable models
- Comparing components and directives
- Integrating an external library
- Bundling and minification
- Maintaining components
- Testing and debugging Angular 2 components
- Building hybrid mobile apps with Angular 2 and Iconic 2