如何使用Angular 1.5的Component方法

Web Components are a set of features that allow the creation of reusable widgets in web documents and web applications.

Web组件是允许在Web文档和Web应用程序中创建可重用窗口小部件的一组功能。

The components model in Angular 1.5.x allows for encapsulation and interoperability of individual HTML elements. Previously in angular 1.4.x you could build components using .directive() method, with this method you could build custom HTML elements and attributes giving your application the modularity and encapsulation of DOM elements.

Angular 1.5.x中的组件模型允许单个HTML元素的封装和互操作性。以前在angular 1.4.x中，您可以使用.directive()方法构建组件，通过此方法，您可以构建自定义HTML元素和属性，从而为您的应用程序提供DOM元素的模块化和封装。

If that got the job done why should I use the new .component() approach?

如果完成了任务，为什么我应该使用新的.component()方法？

Good question buddy, let's answer that shall we?

好朋友，让我们回答吧？

先决条件 ( Prerequisites )

This article doesn't cover Angular basics and requires a basic understanding of Angular 1.

本文不介绍Angular基础知识，而是需要对Angular 1有基本了解。

You should have prior knowledge of how to build applications with Angular 1, and preferably be familiar with building custom directives with .directive() method helper.

您应该具有如何使用Angular 1构建应用程序的先验知识，并且最好熟悉使用.directive()方法助手来构建自定义指令。

Angular的1.5.x .component（）关闭 ( Angular's 1.5.x .component() Up Close )

The .component() method helper is just syntactic sugar of the good old .directive() method we all hate and love. There is practically nothing you can do with .component() that you can't do with .directive().

.component()方法助手只是我们都讨厌和喜欢的旧式.directive()方法的语法糖。使用.component()几乎没有什么可以用.directive()做什么。

.component() simplifies the way we create "components" - which roughly means UI directives. The component approach pushes the community to use defaults that have become best practices. Here are some defaults that components are shipped with:

.component()简化了我们创建“组件”的方式-大致意味着UI指令。组件方法促使社区使用已成为最佳实践的默认值。以下是组件随附的一些默认设置：

Components have isolated scopes by default.
默认情况下，组件具有隔离范围。
They automatically use controllerAs syntax therefore we can use $ctrl to access component data.
它们自动使用controllerAs语法，因此我们可以使用$ctrl来访问组件数据。
They use controllers instead of link functions.
他们使用控制器而不是link功能。
The bindToController option is on by default.
默认情况下， bindToController选项处于启用状态。

角组件：之前和之后 ( Angular Components: Before and After )

Below is an example of how we used to write components using the directive approach vs the component approach:

下面是一个示例，说明了我们过去使用指令方法还是使用组件方法来编写组件的方法：

// before
app.directive(name, fn)

// after
app.component(name, options)

样例代码 (Sample Code)

app.directive('listDirective', function () {
    return {
        // Isolated scope binding
        scope: {
            message: '='
        },
        // Inline template which is binded to message variable in the component controller
        template: '<div>Hello {{$ctrl.message}}</div>',
        // The controller that handles our component logic
        controller: function () {
                this.message = "Thomas directive"
        },
        //defaults, automatically set when using .component()
        controllerAs: '$ctrl',
        bindToController: true
    };
});

It's a simple component directive, with isolated scope, binding and controller. Now let's look at the component approach.

这是一个简单的组件指令，具有隔离的作用域，绑定和控制器。现在让我们看一下组件方法。

app.component('listComponent', {
    // isolated scope binding
    bindings: {
        message: '='
    },

    // Inline template which is binded to message variable
    // in the component controller
    template:'<div>Hello {{$ctrl.message}}</div>',

    // The controller that handles our component logic
    controller: function () {
        this.message = "Thomas component"
    }
});

Elegant right? You can see not much has changed, It is simpler and straightforward. Also, we get to enjoy some default settings. bindToController is set to true and controllerAs set to $ctrl all of this is done by the component itself.

优雅吧？您可以看到变化不大，这更加简单明了。另外，我们可以享受一些默认设置。 bindToController设置为true，而controllerAs设置为$ctrl所有这些都由组件本身完成。

将外部数据传递到组件 ( Passing External Data to Components )

When building an angular application, data is always loaded by services and passed to controllers then to the template. We could inject that particular service and get the data we need, but if another component or controller has loaded this data already we would be repeating ourselves.

在构建角度应用程序时，数据始终由服务加载，然后传递给控制器，然后传递给模板。我们可以注入该特定服务并获取所需的数据，但是如果另一个组件或控制器已经加载了该数据，我们将重复自己的操作。

So what do we do?

那么我们该怎么办？

This is where bindings comes in, we can achieve this by adding a parameter to pass data to our component, which would be used as follows:

这是绑定进入的地方，我们可以通过添加参数以将数据传递到组件来实现此目的，该参数将按以下方式使用：

// the data attribute will hold the data from other components or services.<our-component data="'this is the data we need'"></our-component>

In our component definition, we basically define the name of the attribute that will be added to our component along with the type binding we want to use. There are four different type of bindings:

在组件定义中，我们基本上定义了将要添加到组件中的属性的名称以及要使用的类型绑定。绑定有四种不同类型：

= Two-way data binding. This means that if you update that variable in your component scope, the change will be reflected on the parent scope;
= 双向数据绑定 。这意味着，如果您在组件范围内更新该变量，则更改将反映在父范围内；
< One-way bindings when we just want to read a value from a parent scope and not update it;
< 单向绑定，当我们只想从父范围读取一个值而不更新它时；
@ This is for string parameters;
@这是字符串参数 ;
& This is for callbacks in case your component needs to output something to its parent scope.
&这用于回调，以防您的组件需要向其父范围输出某些内容。

For more details read this docs

有关更多详细信息，请阅读此文档

In our own case we need to pass a string, so our component will look like this:

在我们自己的情况下，我们需要传递一个字符串，因此我们的组件将如下所示：

var app = angular.module('app',[]);

app.component('ourComponent', {
  // Binds the attibute data to the component controller.
  bindings: {
    data: '@'
  },

  // We can now access the data from the data attribute with `$ctrl`
  template:'<p>{{ $ctrl.data }}</p>'
});

Note that bindings are added to the local scope of your component, which is bound to a controller called $ctrl by default.

请注意，绑定被添加到组件的本地范围，默认情况下绑定到名为$ctrl的控制器。

组件间通信 ( Inter-Component Comunication )

When buiding an application using components, communication between these components is key in making the application as seamless as possible.

使用组件构建应用程序时，这些组件之间的通信是使应用程序尽可能无缝的关键。

Let's look at a scenario where you need an accordion to display some data to your users, you can use the default Bootstrap to implement this feature but it will be so hard to reuse the accordion even if you wanted to.

让我们看一下一个需要手风琴向用户显示一些数据的场景，您可以使用默认的Bootstrap来实现此功能，但是即使您愿意，也很难重用手风琴。

The best approach is to use two components accordion and accordion-panel, this components will comunicate together to build an accordion we can use anywhere in our application. Below is code snippets of how this can be achieved.

最好的方法是使用accordion和accordion-panel这两个组件，这两个组件将相互组合以构建可在应用程序中的任何地方使用的手风琴。下面是如何实现此目标的代码段。

var app = angular.module('app', [])

function AccordionController () {
  var self = this;
  // add panel
  self.addPanel = function(panel) {
    // code to add panel
  }

  self.selectPanel = function() {
    //code to select panel
  }
}

// register the accordion component
app.component('accordion', {
  template: '<!---accordion-template-->',
  controller: AccordionController
}

function AccordionPanelController () {
  // use parents methods here
  var self = this;

  // add panel
  self.parent.addPanel(self);

  // select panel
  self.parent.selectPanel(self);
}

// register the accordion-panel component
app.component('accordionPanel', {
  // require the parent component
  // In this case parent is an instance of accordion component
  require: {
    'parent': '^accordion',
  template: '<!---accrodion-panel-template-->',
  controller: AccordionController
}

In the code above, using property require we have required the parent component which in this is accordion and used all its methods within our child accordion-panel component. Therefore whenever there are any changes within these two components, they will respond accordingly.

在上面的代码中，使用property require我们需要父组件（在这里是accordion并在我们的子accordion-panel组件中使用了其所有方法。因此，只要这两个组件之间发生任何变化，它们都会相应地做出响应。

实作 ( Implementation )

Now that we have established what components are, the structure and how to build them. Let's actually make a component.

现在我们已经确定了什么是组件，结构以及如何构建它们。让我们实际制作一个组件。

环境设定 (Environment setup)

Below are the tools we need to complete this exercise:

以下是完成此练习所需的工具：

Create a folder called scotch-angular-components and in it, create the folders and files as follows.

创建一个名为scotch-angular-components的文件夹，并在其中创建文件夹和文件，如下所示。

├── bower.json
├── index.html
├── js
│   ├── app.js
│   └── components/
├── lib/
└── package.json

Create a new file in the root directory .bowerrc and add the following lines of code.

在根目录.bowerrc创建一个新文件，并添加以下代码行。

.bowerrc

{
    "directory" : "lib"
}

The above file specifies the directory where our front-end libraries will be installed. To understand how .bowerrc works in detail visit bower.io.

上面的文件指定了我们的前端库的安装目录。要了解.bowerrc工作原理，请访问bower.io 。

bower.json

{
  "name" : "getting-started" ,
  "description" : "Getting started with angular components" ,
  "main" : "" ,
  "license" : "MIT" ,
  "homepage" : "" ,
  "dependencies" : {
    "angular" : "^1.5.6" ,
    "bootstrap" : "^3.3.6"
  }
}

Bower depends on bower.json to keep track of all the front-end packages your application needs. Looking at it closely you will notice that bootstrap and angular are listed as dependecies.

Bower依赖bower.json来跟踪您的应用程序需要的所有前端软件包。仔细观察，您会发现bootstrap和angular列为依赖项。

These are the libraries we need in this exercise. Visit bower/spec to get more information regarding this file.

这些是我们在本练习中需要的库。访问bower / spec以获取有关此文件的更多信息。

To get our setup ready:

要准备好我们的设置，请执行以下操作：

Install http-server, npm install http-server -g
安装http-server， npm install http-server -g
Install Angular and Bootstrap, bower install
安装Angular和Bootstrap， bower install

If you do not have bower installed on your machine, run npm install bower -g. Now that we are done with the environment setup, let the fun begin.

如果您的计算机上未npm install bower -g ，请运行npm install bower -g 。现在我们完成了环境设置，让我们开始乐趣。

创建一个Angular应用 (Create an Angular App)

In index.html write the code below.

在index.html编写以下代码。

index.html

<!DOCTYPE html>
< html en = " us " ng-app = " app " >

< head >
  < title > Getting started with Angular 1.5.x components </ title >
  <!-- bootsrap css-->
  < link rel = " stylesheet " type = " text/css " href = " lib/bootstrap/dist/css/bootstrap.min.css " >
  <!-- angularjs-->
  < script src = " lib/angular/angular.min.js " > </ script >
  <!-- The main app script-->
  < script src = " js/app.js " > </ script >
  <!-- components -->
</ head >

< body >
    < div class = " container " ng-controller = " HomeCtrl as $ctrl " >
        < h1 > {{$ctrl.message}} </ h1 >
    </ div >
</ body >

</ html >

and in js/app.js.

并在js/app.js 。

js/app.js

js / app.js

( function ( ) {
 var app =  angular . module ( 'app' , [ ] ) ;
 // A controller that displays hello world
  app . controller ( 'HomeCtrl' , function ( ) {
     this . message = "Hello, world" ;
  } ) ;
} ) ( ) ;

So far we have created an angular application called app; we have also included bootstrap CSS for styling and our main application file app.js.

到目前为止，我们已经创建了一个名为app的角度应用app ；我们还包括用于样式设置的引导CSS和我们的主应用程序文件app.js

In the HomeCtrl we have initialised message to hello, world.

在HomeCtrl我们已初始化向hello, world发送消息。

In index.html we have required our controller with ng-controller directive and a div that is going to display our message.

在index.html我们需要使用ng-controller指令和一个div来显示消息ng-controller 。

Run http-server and visit http://localhost:8080. There we go, we got hello world printed out. This is a sign that angular is well set and working.

运行http-server并访问http://localhost:8080 。到这里，打印出你好世界。这表明角度设置正确并且可以正常工作。

添加组件 ( Adding Components )

For this demo, we are going to create four components, one that create a navigation bar and another one that displays a list of users with names , country and city the reside in and the last ones are the accordion and the accordion-panel that we discussed above.

在此演示中，我们将创建四个组件，一个组件创建一个导航栏，另一个组件显示一个具有用户名，居住国家和城市的用户列表，最后一个组件是我们的accordion和accordion-panel 。以上讨论。

We will start with the navigation bar.

我们将从导航栏开始。

In js/components create two files appComponent.js and appComponent.hmtl respectively.

在js/components创建两个文件appComponent.js和appComponent.hmtl 。

js/components/appComponent.js

js / components / appComponent.js

( function ( ) {
  'use strict' ;
  var app = angular . module ( 'app' ) ;

  app . component ( 'menuBar' , {
    // defines a two way binding in and out of the component
    bindings : {
      brand : '<'
     } ,
    // Load the template
    templateUrl : '/js/components/appComponent.html' ,
    controller : function ( ) {
    // A list of menus
      this . menu = [ {
        name : "Home" ,
        component : "home"
      } , {
        name : "About" ,
        component : "about"
      } , {
        name : "Contact" ,
        component : "contact"
      } ] ;
    }
  } ) ;
} ) ( ) ;

In the above file we are telling angular to create a component called menuBar, use template appComponent.html to render a list of menus this.menu.

在上面的文件中，我们告诉angular创建一个名为menuBar的组件，使用模板appComponent.html呈现菜单列表this.menu 。

js/components/appComponent.html

js / components / appComponent.html

< nav class = " navbar navbar-default " >
  < div class = " container " >
    < div class = " navbar-header " >
      < a class = " navbar-brand " href = " # " > {{$ctrl.brand}} </ a >
    </ div >
    <!-- Generated navbar -->
    < div >
      < ul class = " nav navbar-nav " >
        < li ng-repeat = " menu in $ctrl.menu " >
        < a href = " {{menu.component}} " > {{menu.name}}
            < span class = " sr-only " > (current) </ span >
        </ a >
    </ li >
      </ ul >
    </ div >
    <!-- generated navbar -->
  </ div >
  <!-- /.container-fluid -->
</ nav >

In this template you can see we are using ng-repeat directive to dynamically generate the navigation bar. We can access data from the component controller by using $ctrl, in this case $ctrl.menu will contain the array of menus and $ctrl.brand will contain the data passed by the brand attribute.

在此模板中，您可以看到我们正在使用ng-repeat指令动态生成导航栏。我们可以使用$ctrl从组件控制器访问数据，在这种情况下， $ctrl.menu将包含菜单数组，而$ctrl.brand将包含brand属性传递的数据。

If you visit the browser and refresh, you will still see Hello, world on the screen. This is because we have not added the component to our app. Let’s do that. Include the component in the head tag and replace the div element in index.html with the following code.

如果您访问浏览器并刷新，您仍将在屏幕上看到Hello, world 。这是因为我们尚未将组件添加到我们的应用中。来做吧。将组件包括在head标签中，并使用以下代码替换index.html的div元素。

index.html

<!--index.html-->

< head >
    <!--Components-->
     < script src = " js/components/appComponent.js " > </ script >
 </ head >

< body >
    < menu-bar brand = " Brand " > </ menu-bar >
</ body >

Refresh the page again and poof! We have our menu bar laid out beautifully.

再次刷新页面，然后加粗！我们的菜单栏布置精美。

When angular bootstraps the app, it will read the Dom element <menu-bar> and maps it to our component menuBar. Therefore, whenever angular encounters this element it will render out component for us.

当角度引导程序启动时，它将读取Dom元素<menu-bar>并将其映射到我们的组件menuBar 。因此，只要angular遇到此元素，它将为我们渲染组件。

Okay! Now that we have created our navigation component, let's add one more. We need a table that has names of users, the country of origin and the city they reside in. We could use a controller and populate the data in our view, but if we ever require this data in a different view we would have to repeat the same code again. To fix this we create another component.

好的！现在我们已经创建了导航组件，让我们再添加一个。我们需要一个表，其中包含用户名称，原籍国和他们所居住的城市。我们可以使用控制器并在视图中填充数据，但是如果我们需要在其他视图中使用此数据，则必须重复同样的代码。为了解决这个问题，我们创建了另一个组件。

In js/components create new files userComponent.js and userComponent.html. In userComponent.js write the following code.

在js/components创建新文件userComponent.js和userComponent.html 。在userComponent.js编写以下代码。

js/components/userComponent.js

js / components / userComponent.js

( function ( ) {
  'use strict' ;

  var app = angular . module ( 'app' ) ;

  app . component ( 'userInfo' , {
    // Binds caption to the parent scope
    bindings : {
      caption : '<'
    } ,
    // Loads the component template
    templateUrl : '/js/components/userComponent.html' ,
    controller : function ( ) {
      // The list of users we will be displaying
      this . records = [ {
        name : "Alfreds Futterkiste" ,
        city : "Berlin" ,
        Country : "Germany"
      } , {
        name : "Ana Trujillo Emparedados y helados" ,
        city : "México D.F." ,
        country : "Mexico"
      } , {
        name : "Blondel père et fils" ,
        city : "Strasbourg" ,
        country : "France"
      } , {
        name : "Bólido Comidas preparadas" ,
        city : "Madrid" ,
        country : "Spain"
      } ] ;
    }
  } ) ;
} ) ( ) ;

In this file, we have created a component userInfo which contains an array of users in the records variable. To render this data we need a template that will iterate through the records array and display it to the browser. In js/components/userComponent.html write the following code.

在此文件中，我们创建了一个组件userInfo ，该组件在records变量中包含一个用户数组。要呈现此数据，我们需要一个模板，该模板将遍历records数组并将其显示给浏览器。在js/components/userComponent.html编写以下代码。

js/components/userComponent.html

js / components / userComponent.html

< div class = " container " >
  < table class = " table table-bordered " >
    <!-- table caption will be displayed here-->
    < tr >
      < td id = " caption " colspan = " 4 " > {{$ctrl.name}} </ td >
    </ tr >
    < th >
      < td > Name </ td >
      < td > City </ td >
      < td > Country </ td >
    </ th >
    <!-- users will be displayed here-->
    < tr ng-repeat = " user in $ctrl.records " >
      < td > </ td >
      < td > {{user.name}} </ td >
      < td > {{user.city}} </ td >
      < td > {{user.country}} </ td >
    </ tr >
  </ table >
</ div >
<!-- component styling-->
< style type = " text/css " >
#caption {
  text-align: center;
}
</ style >

In this template, we have created a table which accesses the component data through the use of $ctrl, loops through it and displays it to us. That's it? Hold on we are not done yet, right now we have just defined the component but our app has no way of locating this component, to register this component we need to link our component script to the app and add user-info tag to index.html. This way when angular sees this user-info tag it will render our component. Let’s do that.

在此模板中，我们创建了一个表，该表通过使用$ctrl访问组件数据，并对其进行循环并将其显示给我们。而已？等等，我们还没有完成，现在我们已经定义了组件，但是我们的应用程序无法找到该组件，要注册该组件，我们需要将组件脚本链接到应用程序，并在index.html添加user-info标记index.html 。这样，当angular看到此user-info标签时，它将呈现我们的组件。来做吧。

index.html

<!--index.html-->
<!--in the head tag-->
< script src = " js/components/userComponent.js " > </ script >

<!--below <menu-bar> tag-->
  < user-info name = " ' Users Table ' " > </ user-info >

When you refresh your browser, you should see the users displayed in table as below.

刷新浏览器时，您应该看到下表中显示的用户。

Ok, we have got our users table, and navigation now lets build our accordion.

好的，我们已经有了用户表，现在可以通过导航来构建手风琴了。

This section will introduce you to how you can build components that are tightly coupled, working together to provide seanmless user exprecience. Lets get down to it.

本节将向您介绍如何构建紧密耦合的组件，一起工作以提供无缝的用户体验。让我们开始吧。

js.components/accordionComponent.js

js.components / accordionComponent.js

( function ( ) {
  'use strict'
  var app = angular . module ( 'app' ) ;
  // Accordion controler
  function AccordionController ( ) {
    var self = this ;
    var panels = [ ] ;
    // here we take the panel and add to our list of panels
    // to preselect the first panel we call turnOn function on the first panel
    self . addPanel = function ( panel ) {
      panels . push ( panel ) ;
      if ( panels . length > 0 ) {
        panels [ 0 ] . turnOn ( ) ;
      }
    } ;
    // when a panel is selected we would want to open the contets
    // here we take the panel find it in our array and turn if on if not selected
    // and off it it is.
    self . selectPanel = function ( panel ) {
      for ( var i in panels ) {
        if ( panel === panels [ i ] ) {
          panels [ i ] . turnOn ( ) ;
        } else {
          panels [ i ] . turnOff ( ) ;
        }
      }
    } ;
  }
// Register the component to the app
  app . component ( 'accordion' , {
    transclude : true ,
    template : '<div class="panel-group" ng-transclude></div>' ,
    controller : AccordionController
  } ) ;

} ) ( ) ;

In the above file we have two methods, addPanel and selectpanel. The addPanel method takes a panel and adds it into the list of panel existing in the component and preselects the first panel in our list.

在上面的文件中，我们有两种方法， addPanel和selectpanel 。 addPanel方法获取一个面板并将其添加到组件中现有面板的列表中，并预选择列表中的第一个面板。

As for the selectPanel this method will respond to the click event when the panel is seleted, it will take that respective panel toggle between on and off.

至于selectPanel当面板被selectPanel此方法将响应click事件，这将使各个面板在开和关之间切换。

* js/components/accordionPanel.js*

* js / components / accordionPanel.js *

( function ( ) {
  'use strict' ;
  // accordion-panel controller
  function AccordionPanelController ( ) {
    var self = this ;
    // register the panel in init
    self . $onInit = function ( ) {
      self . parent . addPanel ( self ) ;
    } ;
    // Turns on the panel by changing selected to true
    self . turnOn = function ( ) {
      self . selected = true ;
    } ;
    // Turns off the panel by changing selected to false
    self . turnOff = function ( ) {
      self . selected = false ;
    } ;
    // Selects a the current selected panel
    self . select = function ( ) {
      self . parent . selectPanel ( self ) ;
    } ;
  }
// Register the accordion-panel component
  app . component ( 'accordionPanel' , {
    transclude : true ,
    // require the parent component, in this case accordion component
    require : {
      'parent' : '^accordion'
    } ,
    // specify attribute binding
    // https://docs.angularjs.org/api/ng/service/$compile#-scope-
    bindings : {
      heading : '@'
    } ,
    // Accordion-panel template
    template : `
      <div class="panel panel-default">
        <div class="panel-heading" ng-click="$ctrl.select()">
          <h3 class="panel-title">{{$ctrl.heading}}</h3>
        </div>
        <div class="panel-body" ng-transclude ng-if="$ctrl.selected">
        </div>
      </div>
     ` ,
    controller : AccordionPanelController ,
  } ) ;

} ) ( ) ;

After building the accordion component, we need an accordion panel to hold any data we may have. This is part that will be turned on and off to provide the accordion effect.

构建了手风琴组件之后，我们需要一个手风琴面板来保存我们可能拥有的任何数据。这部分将被打开和关闭以提供手风琴效果。

In this file we have $onInit a lifeclycle hook, turnOn, turnOff and select methods. When our component is constructed, we need to register our panel to the parent component. Using $onInit hook, we have called the addPanel method to inform the parent component that we have added one more panel.

在此文件中，我们有$onInit周期挂钩， turnOn ， turnOff和select方法。构造组件后，我们需要将面板注册到父组件。使用$onInit钩子，我们调用了addPanel方法来通知父组件我们又添加了一个面板。

We then went ahead and defined turnOff and turnOn methods, this methods provide us with the ability to turn on and off the panels when selected. The select method works with the turnOn and turnOff to provide the toggle effect.

然后，我们继续定义了turnOff和turnOn方法，此方法使我们能够在选定面板时打开和关闭面板。 select方法与turnOn和turnOff以提供切换效果。

In the template we have created a panel, using bootstrap panels with a panel heading, panel title, and panel body. The panel heading has been bound to $ctrl.select() method through a click event, this means that when we click this heading, the select method will be called and will either turn on or off the panel. The panel body has been bound to the $ctrl.selected, when the header is clicked this value will toggle between true and false giving our component the toggle effect.

在模板中，我们使用带有面板标题，面板标题和面板主体的引导面板创建了一个面板。面板标题已通过click事件绑定到$ctrl.select()方法，这意味着当我们单击此标题时，将调用select方法，它将打开或关闭面板。面板主体已绑定到$ctrl.selected ，单击标题时，此值将在true和false之间切换，从而为我们的组件提供切换效果。

Now that we have build our components lets intergrate them together to form our accordion. In your index.html add the two components in your head tag * index.html

现在我们已经构建了组件，可以将它们集成在一起以形成我们的手风琴。在您的index.html中，在您的head标签中添加两个组件* index.html

...
< script src = " js/components/accordionComponent.js " > </ script >
< script src = " js/components/accordionPanelComponent.js " > </ script >
...

and below the user-info component add the following

在user-info组件下方，添加以下内容

...
 < div class = " container " >
   <!--The main accordion component-->
    < accordion >
      <!--The first panel with heading 1-->
      < accordion-panel heading = " heading 1 " >
        This a panel
      </ accordion-panel >
            <!--The secoind panel with heading 2-->
      < accordion-panel heading = " Heading 2 " >
        this is another panel
      </ accordion-panel >
    </ accordion >
  </ div >

...

Lets save our changes and refresh your browser! Your page should look similar to this.

保存我们的更改并刷新您的浏览器！您的页面应与此类似。

The accrodion we have built works the same way as native bootstrap accordion. The beauty here is that we can resuse these components to build an accordion anywhere in our application.

我们构建的加速器与本地自举式手风琴的工作方式相同。这里的好处是，我们可以在应用程序中的任何位置重用这些组件来构建手风琴。

There you have it! We have built an angular application using components - simple and easy.

你有它！我们已经使用简单易用的组件构建了一个角度应用程序。

结论 ( Conclusion )

Building an angular application using .controller() and .directive() can become tedious and dirty. When your application scales your codebase can get messier. With the component approach, you can build your application in small feature specific blocks that are highly scalable, maintainable and elegant.

使用.controller()和.directive()构建角度应用程序可能会变得乏味且肮脏。当您的应用程序扩展时，您的代码库会变得更加混乱。使用组件方法，您可以在高度可伸缩，可维护且美观的小型功能特定模块中构建应用程序。

翻译自: https://scotch.io/tutorials/how-to-use-angular-15s-component-method