Creating Components in Angular 2 with Typescript and ES5

Core points

• Angular 2.0 uses TypeScript (a superset of JavaScript) to optimize performance, improve page speed and workflow automation. TypeScript allows developers to use type information to annotate JavaScript code, thus helping to catch errors in the code base.
• Angular 2.0 introduces the concept of components, which are reusable blocks of code that contain views and logic. Components replace instructions as the main element of the framework, ensuring that one part of the application's code does not interfere with another part of the code.
• Creating components in Angular 2.0 using TypeScript involves defining component classes and importing necessary functions from Angular. Then, decorate the class with the @Component decorator and export it for use in other parts of the application.
• Angular 2.0 also supports ES5, which is the standard JavaScript version that runs in most browsers. To create components using ES5 in Angular 2.0, developers can use methods on ng objects to define components and add functionality. Then you can run the code directly in the browser without the need for a server.

This article was reviewed by Stephan Max, Jeff Smith and Ravi Kiran. Thanks to all SitePoint peer reviewers for getting SitePoint content to its best!

As the end of the year approaches, the Angular team is closer than ever to releasing a stable version of Angular 2.0. This will reshape the way Angular applications are developed, but will have better results. In this article, I'll show you some of the core concepts in Angular 2.0 and how to use them. Specifically, I'll walk you through the process of building Angular 2 components from start to finish. First, we'll learn more about how to do this with TypeScript, and then we'll migrate the Angular component so it can be run with pure ES5.

The code for this tutorial can be found in our GitHub code base. The code base has two branches, one for the TypeScript version and one for the ES5 version. If you want to clone a specific branch, use git clone <url> --branch <branch></branch></url>.

What are components?

The usage of components in JavaScript has increased significantly over the past few months. They are used in projects like React, Knockout, Ember, and more, so it is no surprise that Angular integrates them into version 2.0. Code modularity has always been a focus of the Angular team, and the use of components highlights this because they allow us to break code into encapsulated blocks.

So what are components? It is essentially a piece of code that can be reused throughout the application. It contains two parts: view and logic. By leveraging the Angular development team's attention to components, we can take advantage of some very powerful features. Angular 2 makes it very easy to create dynamic applications consisting of different components that have replaced instructions as the core of the framework. In Angular 2, directives are lightweight components that are only used to add some functionality to the DOM. Now, Angular developers don't have to worry about messing up their applications due to conflict issues related to isolating $scope. Instead, using components is a way to ensure that one part of the application's code does not interfere with another part of the code.

TypeScript

Angular 2.0 has been created to use TypeScript, which is a superset of JavaScript. Angular developers have spent a lot of time completing this release. They work hard to optimize performance, including page speed and workflow automation. TypeScript is similar to other transcoders, allowing developers to write code that can be easily converted to valid JavaScript. That being said, it has become more popular over the past year, so the Angular team decided to use it to create frameworks.

One of the benefits of using TypeScript is its type system, which allows developers to comment JavaScript using type information. This annotated code will run through the compiler, which helps catch errors that otherwise lurk in the code base waiting for user discovery. Now let's take a look at the practical application of TypeScript.

Below, I extracted an example from TJ Van Toll's article "The Rise of TypeScript". In this function we see that the height and width parameters should be numeric types. : number before the function body specifies the return type, which is also a numeric type. Therefore, any non-numeric content passed to this function will cause the compiler to throw an error at compile time.

<code class="language-typescript">function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。</code>

Type declarations help us document APIs and make our code easier to maintain over time.

Installation

The process of compiling TypeScript into JavaScript is very simple. First get the TypeScript package from npm:

<code class="language-bash">npm install -g typescript</code>

After the installation is complete, compiling TypeScript into JavaScript is as simple as running the following command from the command line (the TypeScript file is saved with the .ts extension):

<code class="language-bash">tsc <filename.ts></filename.ts></code>

Now, let's see how Angular 2 can leverage the power of TypeScript to easily create custom components. The code for our first example can be found in the TypeScript branch of our GitHub code base.

Create components in TypeScript

Because TypeScript is a superset of JavaScript, any valid JavaScript can work properly in .ts files. By using TypeScript, developers can extend their JavaScript code to take advantage of the latest ES6 features. In this example, we will use the class.

Below, I created a component using TypeScript code. I first imported Angular using the ES6 import syntax. In this example, we will define a component and a view of that component. Once done, we will need Angular's bootstrap function to make Angular run the code. In this code we will see the @ symbol, which is used to tell Angular what we are trying to build.

<code class="language-typescript">function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。</code>

Because Angular 2 is built on top of TypeScript, the framework recognizes our @Component annotation and knows that we are trying to create a new component. Additionally, it tells Angular that whenever it sees <user-name></user-name> in our HTML, we want to instantiate a component.

As mentioned above, the component contains two parts:

• View
• Logistic

Since the component is defined, we now need to create views and logic.

After our component, we can add some TypeScript code to define our view. Let's take a look at the continuation of the above code and see for yourself how easy Angular makes adding views to custom components:

<code class="language-bash">npm install -g typescript</code>

Now, when I add <user-name></user-name> to my index.html file, this template is injected into the DOM. That being said, the logical part of our component is empty because our UserComponent class does not contain any code.

In the example above, I have only one empty class. But now, I will create a name variable and then render this name variable in our view using the expression:

<code class="language-bash">tsc <filename.ts></filename.ts></code>

You will also see the bootstrap function I mentioned earlier. Although they share a name, this function is used to start or boot our Angular application and is not related to the Twitter BootStrap framework. If we forget to pass our component into this function, Angular will not know to load our component.

I also want to note quickly that our application must use some kind of server to display correctly. If you access it directly, System.js will not be able to load our main module, which contains our code.

Now, users using this example's repository can run

in the root directory. After running this command, we can view the actual effect of our components by visiting node app.jshttps://www.php.cn/link/f74d6ef882234fd34400a296b1da6149. Hopefully this illustrates how easy Angular makes adding logic to components!

Migrate our components to ES5

For those who want to use ES5 to take advantage of the power of 2.0, the Angular 2 team has created a framework version that can be simply put into the website. This is necessary because ES5 has no module system, so we need some kind of self-executing bundle. If you looked at the code for the first example, you will see that I need to add three different script tags to the application. In this example, we just need to add the following script.

<code class="language-typescript">function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。</code>

With this script, developers can use their knowledge of ES5 without worrying about sacrificing any of the framework's capabilities. Let's see how to build Angular components using ES5. The code for this example can be found in the ES5 branch of our GitHub code base. That is, let's get started!

To recreate components using ES5 instead of TypeScript, I will use some different approaches. This is basically the same as what I did in the example above, but we will use the method link on the ng object instead of using the @ symbol. This is shown in the following code:

<code class="language-bash">npm install -g typescript</code>

Now we can continue to add features to our components that will be displayed when our application reads the <user-name></user-name> selector.

Let's use the View and Class methods. In our View method, we just need to pass in the template string we used earlier. Since classes are not supported in ES5, we will simulate our use of them in the Class method by creating a simple constructor that will contain our name attribute.

<code class="language-bash">tsc <filename.ts></filename.ts></code>

But we are missing something. In our TypeScript example, we used the bootstrap function to start our Angular code. Here's how to do the same in ES5:

<code class="language-typescript">import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
  selector: 'user-name'
})</code>

This should be placed under our custom application code. This will cause Angular to boot our application and load the components after the page loads. Unlike our previous example (requires a server), this page can be viewed directly in the browser.

As you can see, the Angular team provides a clear solution for users who want to build 2.0 applications with ES5. If you are interested in this, I highly recommend that you check out the a.js library, which allows developers to build Angular applications in ES5 using TypeScript-like syntax.

Conclusion

Hope this gives you an in-depth look at various aspects of Angular that will appear in the next version of the framework. If you want to further build a complete application with Angular 2 and TypeScript (in this case the message board), then I suggest you check out this article: Get started with Angular 2 with TypeScript.

I also want to know your experience with Angular 2. Have you tried it? Have you built something you want to share? Please let me know in the comments.

FAQs on Creating Components in Angular 2 using TypeScript and ES5

How to create components in Angular 2 using TypeScript?

Creating components in Angular 2 using TypeScript involves several steps. First, you need to import Component symbols from the Angular core library. You then define a component class and decorate it with the @Component decorator. The decorator tells Angular that the class is a component and provides metadata such as selectors and templates. Finally, you export the component class so that you can use it in other parts of the application. Here is a basic example:

<code class="language-typescript">function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。</code>

What is the difference between TypeScript and ES5 in Angular 2?

TypeScript and ES5 are both languages ​​you can use to write Angular 2 applications, but they have some key differences. TypeScript is a statically typed superset of JavaScript that adds types and other features to the language. It is the preferred language for Angular 2 because it makes the code more robust and easier to maintain. ES5, on the other hand, is a standard JavaScript version that runs in most browsers. Angular 2 applications can be written using ES5, but you will miss some of the benefits of TypeScript.

(The remaining FAQs are related to Angular and React, and do not match the original topic, so they are omitted.)

The above is the detailed content of Creating Components in Angular 2 with Typescript and ES5. For more information, please follow other related articles on the PHP Chinese website!