9.8 KiB

Raw Blame History

title	localeTitle
Angular 2 Starter Project	Angular 2入门项目

本教程将使用Angular2构建一个非常简单的种子项目。我们将从最基本的应用程序开始，然后添加更多功能。

概观

通过创建包含角度特定标记的HTML模板来构建Angular 2应用程序。然后创建类来管理模板，并将所有内容包装到一个模块中，您可以将它们拼凑在一起以创建应用程序。这些模块称为组件。

Angular解释这些模块并使用它们在浏览器中显示您的应用程序。

入门申请

让我们开始使用最小的应用程序。我们将从包含单个模块的应用程序开始，该模块的唯一工作是显示一些文本。

我们将首先创建一个名为“app”的新文件夹。

$ mkdir app

如上所述，我们的应用程序将从单个模块或组件开始 ，它将向屏幕显示一些文本。我们可以使用纯JavaScript或TypeScript来制作一个有角度的2应用程序。使用TypeScript，它更容易，更方便程序员

让我们学习如何使用TypeScript创建组件。

创建一个名为_app.component.ts_的文件，如下所示：

    // app.component.ts 
 
    import { Component } from '@angular/core'; 
    @Component({ 
      selector: 'my-app', 
      template: '<h1>Free Code Camp Rocks!</h1>', 
      styles: <a href='http://plnkr.co/edit/BdvNONEmO3Jwg0EavX22' target='_blank' rel='nofollow'>` 
        h1 { color: darkgreen; font-family: Arial, Helvetica, sans-serif;} 
      `] 
    }) 
    export class AppComponent { }

每个Angular 2应用程序至少有一个组件，通常名为AppComponent 。组件使用其中的模板管理页面的一部分。

我们的组件演示了您将要编写的任何组件的基本结构。它包含：

import语句来引入我们需要的其他组件
组件装饰器 ，让angular知道要使用哪个模板以及如何创建组件。基本上，任何与组件相关的元数据。
组件类 ，它控制组件的外观和行为

让我们仔细看看组件中的每一行。

进口

import { Component } from '@angular/core';

由于角度应用程序是模块化的，我们可以导入我们可能需要的任何其他模块或库。在这里，我们将导入Angular 2核心模块，以使我们的组件可以访问@Component装饰器。每个应用都需要此导入才能开始使用。

由于我们导入了上面的Component函数，我们现在可以使用它来将元数据与我们的组件类相关联，这将告诉Angular我们应该如何创建组件以及它将提供的操作。

组件装饰器

    @Component({ 
      selector: 'my-app', 
      template: '<h1>Free Code Camp Rocks!</h1>' 
    })

Our metadata object has selector and template fields.

The selector specifies a CSS selector that indicates which HTML element will represent this component. The element we will use will be named "my-app". Angular will use this to create an instance of our component where it finds this element.
The template tells angular what template it will use for this component. This can refer to other Components or just a form of HTML that tells how to display the view for our component. Our template is just displaying an h1 element containing the text "Free Code Camp Rocks!".

Component Class

Our final line provides an empty class named AppComponent

export class AppComponent { }

If we want to build a more complex component we can add logic and properties to the class. This component is extremely basic and simply displays some html, so its class will remain empty.

We export our class so we can use it in other components in our application.

Next, we need to connect our root component to Angular. To do this we create another file in our app folder called main.ts that will have the following code:

   import { bootstrap }    from '@angular/platform-browser-dynamic'; 
   import { AppComponent } from './app.component'; 
   bootstrap(AppComponent);

This file imports the two items we need to start our app.

bootstrap - Angular's built in method that connects to the browser
AppComponent - Our component we created above (which is why we exported it) We then call bootstrap method with AppComponent

Finally, create index.html

   <html> 
     <head> 
       <title>Free Code Camp - Angular 2 Tutorial</title> 
       <meta charset="UTF-8"> 
       <meta name="viewport" content="width=device-width, initial-scale=1"> 
       <link rel="stylesheet" href="styles.css"> 
       <!-- 1\. Load libraries --> 
       <script src="https://npmcdn.com/core-js/client/shim.min.js"></script> 

       <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script> 
       <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script> 
       <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script> 

       <!-- 2\. Configure SystemJS --> 
       <script src="systemjs.config.js"></script> 
       <script> 
         System.import('app').catch(function(err){ console.error(err); }); 
       </script> 
     </head> 

     <!-- Display app in my-app element --> 
     <body> 
       <my-app>Loading Your App...</my-app> 
     </body> 
   </html>

In commented section 1, we loaded several libraries that improve the compatibility of this tutorial with different browsers/versions. It also imports system.src.js which is used as module loader to import the app.

In section 2, SystemJS is used to load our application and our various modules. In a production example we may want to use something else such as webpack. It was chosen here since we can use it with plunker.

This is all that is required to get our simple application running. Here is a link to a plunker that contains our working application. You can fork it into your own version and change whatever you'd like.

VIEW APP

Add Functionality and Another Component

Now let's add a bit more functionality to our program. We will create a counter that let's you increment it by clicking a button.

Our increment component will be its own module so that we can reuse it in later applications.

Let's name our file: app/increment-clicker.component.ts and set it up.

// app/increment-clicker.component.ts 
import { Component } from '@angular/core'; 

@Component({ 
   selector: 'increment-clicker', 
   template: ` 
     <div className="counter"> 
       <h1>{{curClicks}} clicks</h1> 
       <button type="button" (click)="incrementClicks()">Increment</button> 
     </div> 
   `, 
   styles: [` 
       .counter { 
         width: 100%; 
         margin: auto; 
         background: darkgreen; 
         border-radius: 5px; 
         color: white; 
         padding: 20px; 
         text-align: center; 
       } 
       .counter h1 { 
         margin: 0; 
         padding: 20px; 
         font-size: 36px; 
       } 
       .counter button { 
         background: #f1c40f; 
         border: 0; 
         box-shadow: 0px 5px 0px #927608; 
         padding: 20px; 
         width: 100%; 
         outline: none; 
         border-radius: 5px; 
         color: darkgreen; 
         font-weight: bold; 
       } 

       .counter button:hover { 
         background: #a9890a; 
         cursor: pointer; 
       } 
   `] 
}) 

export class IncrementClicker { 
 curClicks = 0; 

 incrementClicks() { 
   this.curClicks++; 
 } 
}

Our component structure is similar to our previous one, but we've added a bit of functionality here. You will notice our class is no longer empty. We've added a variable to track the clicks as well as a function to increment them when the user clicks the button.

You can display properties from your class in your template using double braces such as: {{ variableName }}

We bind the button click event to our class function using Angulars Event Bindings.

<button type="button" (click)="incrementClicks()">Increment</button>

Notice that we've also added some styling to our components. This way everything is self-contained in this module. You may also include a templateUrl and/or styleUrls properties instead to extract the template and style rules to an external file and link them here.

Now we just need to update our AppComponent to include our new component:

// app/app.component.ts 

import { Component } from '@angular/core'; 

/* Nested Component */ 
import { IncrementClicker } from 'app/increment-clicker.component'; 

@Component({ 
 selector: 'my-app', 
 directives: [IncrementClicker], 
 template: ` 
   <h1>Free Code Camp Rocks!</h1> 
   <increment-clicker></increment-clicker> 
 `, 
 styles: [` 
   h1 { color: darkgreen; font-family: Arial, Helvetica, sans-serif;} 
 `] 
}) 

export class AppComponent { }

To pull in our new IncrementClicker component we need to import it by including the class name as well as the location of the typescript file as we did on this line:

import { IncrementClicker } from 'app/increment-clicker.component';

We then add the IncrementClicker component as a directive to the AppComponent module using:

directives: [IncrementClicker],

最后，我们只需在模板中添加组件连接的标记。因此，我们的IncrementClicker组件中的选择器将匹配我们希望它显示的标记。
js template:

免费Code Camp Rocks！

,
我们的组件现已包含在我们的应用中！

更新代码  
[查看完整的应用程序](http://run.plnkr.co/plunks/BdvNONEmO3Jwg0EavX22/)

9.8 KiB Raw Blame History Unescape Escape

概观