在使用 AngularJS 1.x 开发前端应用时，我们经常需要创建新的组件（component）或指令（directive）。手动创建这些组件需要编写大量的模板代码，而且容易出错。为了解决这个问题，我们可以使用第三方的构建工具，比如 generator-ng-component-es5。
generator-ng-component-es5 是一个 Yeoman 生成器，它可以帮助我们快速创建 AngularJS 1.x 组件。它生成符合 ES5 标准的代码，可以在旧版浏览器上运行。
本文将介绍如何使用 generator-ng-component-es5 建立一个简单的 AngularJS 组件，并深入讲解其中的细节。
安装和使用
首先，我们需要安装 generator-ng-component-es5。在命令行中执行：
npm install -g yo generator-ng-component-es5
然后，我们新建一个文件夹，并进入该文件夹。执行命令：
yo ng-component-es5
它会询问一些问题，比如组件的名称、路径等等。回答完这些问题后，generator-ng-component-es5 就会自动生成组件的代码。
生成的代码
生成的代码包括以下文件：
component.js：组件的 JS 文件；template.html：组件的 HTML 模板文件；controller.js: 组件的控制器。
下面我们来分别介绍这些文件的内容。
component.js
component.js 是生成的组件的主要文件。它定义了一个 AngularJS 的 module，以及一个 component。代码类似于：
-- -------------------- ---- -------
--------- -- -
---- --------
--- ---------- - --------
-------
-------------------
------------------------- -
------------ ------------------------
----------- ----------------------
--------- -
------- ----
-------- ---
-
---
-------- ----------------------- -
--- ---- - -----
-- ---------- ---- ----
-
-----其中，moduleName 是我们自己定义的模块名称，myComponent 是我们自己定义的组件名称。templateUrl 是组件的 HTML 模板路径，controller 是组件的控制器。
在 bindings 中，我们可以定义组件的输入和输出。input1 表示输入参数，output1 表示输出参数。< 表示单向绑定，& 表示双向绑定。
template.html
template.html 文件是组件的 HTML 模板。其中，我们可以使用 AngularJS 自定义的指令和表达式，比如 ng-repeat、ng-click、{{}}。代码类似于：
-- -------------------- ---- -------
-----
------------------
----
--- --------------- -- ----- ----- -- --------
--------
------- -------------------------- -------------------------
-----
-----
------组件的模板文件应该放在 app/ 目录下，并且以组件名称命名，比如 myComponent.html。
controller.js
controller.js 文件包含组件的控制器代码。它是一个纯 Javascript 文件，可以直接使用原生 Javascript 的特性，比如 Promise。
-- -------------------- ---- -------
--------- -- -
---- --------
-------
----------------
------------------------------------ -----------------------
-------- ----------------------- -
--- ---- - -----
------------ - -------- -- -
-- ---------- -------------- ---- ----
--
--------------- - -------- ------- -
-- ------ ---- ---- ----
--------------------- --------
--
-
-----在控制器中，可以定义一些方法和属性，供组件中其他部分使用。组件可以在初始化时调用控制器中的 $onInit 方法。
示例代码
下面是一个简单的组件示例，它包含一个输入框和一个按钮。点击按钮时，会触发一个事件，并把输入框的值传递给父组件。
app/myComponent/myComponent.html
<div>
<input type="text" ng-model="$ctrl.inputValue">
<button ng-click="$ctrl.onButtonClick({value: $ctrl.inputValue})">click me</button>
</div>app/myComponent/myComponent.js
-- -------------------- ---- -------
--------- -- -
---- --------
-------
----------------
------------------------- -
------------ -----------------------------------
----------- ----------------------
--------- -
-------------- ---
-
---
-------- ----------------------- -
--- ---- - -----
------------ - -------- -- -
--------------- - ---
--
-
-----在父组件中，我们可以使用以下代码调用这个组件：
<my-component on-button-click="$ctrl.handleButtonClick(value)"></my-component>
其中，$ctrl.handleButtonClick 是父组件中的一个方法，用于处理点击事件并获取输入框的值。注意，这个方法应该在父组件的控制器中定义。这里只展示调用语句的部分。
结语
通过本文的介绍，我们学习了如何使用 generator-ng-component-es5 创建一个 AngularJS 组件，并深入了解了它的原理。希望本文对于前端开发初学者有所帮助，也希望大家能够善用这个强大的工具，提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb781e8991b448da3d2