介绍
在前端开发中，使用组件化的方式进行开发已经成为一种常用的方式，而 Polymer 这个 Web 组件库也在逐渐流行。而 ng-polymer-starter 就是一个帮助 AngularJS 和 Polymer 共同工作的 npm 包，它可以快速搭建一个有结构的、易扩展的、高可维护度的项目。接下来，我们将引导你使用这个 npm 包进行前端开发。
准备工作
确保在你的电脑中安装了 Node.js 和 npm，可通过运行
npm -v和node -v命令来检查是否已安装成功。安装
gulp和bower，可执行以下命令：- --- ------- -- ---- -----
安装 ng-polymer-starter
打开命令行，进入到你的项目目录中，并运行以下命令：
- --- ------- ------------------ ----------
在
gulpfile.js中配置项目的相关信息，例如appName、author、port等，在运行gulp init时，会询问这些配置信息。--- --------- - - -------- -------- -- ---- ------- --------- -- -- ----- ----- -- -- --
运行
gulp init命令，进行初始化项目操作，重命名项目名称、更改文件夹、安装项目的依赖等。- ---- ----
项目结构
完成上述步骤后，你的项目结构应该如下所示：
------
-------------
-------
-----------------
----
-------
---
------
-------
------------
-------
-------
------
-------------
------
------------
------
----------
-----------
----------
------------其中：
node_modules文件夹包含安装在项目中的依赖；public文件夹包含前端代码，bower_components为使用 bower 安装的依赖，在这里你选择的是 AngularJS 和 Polymer；server文件夹为服务器端代码；tests文件夹为测试代码。
开始开发
运行
gulp serve命令，启动一个本地服务器，实时看到对代码所做的更改。- ---- -----
对编译后的代码进行修改后自动更新浏览器，并可以看到 AngulerJS 和 Polymer 集成开发的炫酷效果。
总结
ng-polymer-starter 是一个帮助 AngularJS 开发者们快速初始化自己的 Polymer 项目的 npm 包，而且它的使用也非常容易上手。在开发的过程中，我们始终要维持可阅读性、可扩展性和可维护性，这才是前端开发的金科玉律。祝您顺利进行 WEB 开发！
示例代码
在 public 文件夹下，将 app.js 文件改为以下内容：
--------- -- -
---- --------
---------
--- ---------
----------- -
------ -
----- -------
------ ------- -------
-
--
------------ -------- -- -
---------------- ------------
-
---
-----在 index.html 文件中，添加以下内容：
--------- -----
------
------
-------------- -- -- -----------
-------
------
-----------------
------- ----------------------------------------------------------------------
------- -------------------------
-------
-------完成后，即可启动本地服务器，在浏览器中查看输出。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562ef81e8991b448e0a7c