npm 包 ng-polymer-starter 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在前端开发中，使用组件化的方式进行开发已经成为一种常用的方式，而 Polymer 这个 Web 组件库也在逐渐流行。而 ng-polymer-starter 就是一个帮助 AngularJS 和 Polymer 共同工作的 npm 包，它可以快速搭建一个有结构的、易扩展的、高可维护度的项目。接下来，我们将引导你使用这个 npm 包进行前端开发。

准备工作

确保在你的电脑中安装了 Node.js 和 npm，可通过运行 npm -v 和 node -v 命令来检查是否已安装成功。
安装 gulp 和 bower，可执行以下命令：
```
$ npm install -g gulp bower
```

安装 ng-polymer-starter

打开命令行，进入到你的项目目录中，并运行以下命令：
```
$ npm install ng-polymer-starter --save-dev
```
在 gulpfile.js 中配置项目的相关信息，例如 appName、author、port 等，在运行 gulp init 时，会询问这些配置信息。
```
var appConfig = {
  appName: 'myApp',  // 项目名称
  author: 'myname',  // 作者
  port: 3000,  // 端口
};
```
运行 gulp init 命令，进行初始化项目操作，重命名项目名称、更改文件夹、安装项目的依赖等。
```
$ gulp init
```

项目结构

完成上述步骤后，你的项目结构应该如下所示：

-- -------------------- ---- -------
------
  -------------
  -------
    -----------------
    ----
      -------
    ---
      ------
  -------
    ------------
    -------
    -------
    ------
    -------------
    ------
    ------------
  ------
  ----------
  -----------
  ----------
  ------------

其中：

node_modules 文件夹包含安装在项目中的依赖；
public 文件夹包含前端代码，bower_components 为使用 bower 安装的依赖，在这里你选择的是 AngularJS 和 Polymer；
server 文件夹为服务器端代码；
tests 文件夹为测试代码。

开始开发

运行 gulp serve 命令，启动一个本地服务器，实时看到对代码所做的更改。
```
$ gulp serve
```
对编译后的代码进行修改后自动更新浏览器，并可以看到 AngulerJS 和 Polymer 集成开发的炫酷效果。

总结

ng-polymer-starter 是一个帮助 AngularJS 开发者们快速初始化自己的 Polymer 项目的 npm 包，而且它的使用也非常容易上手。在开发的过程中，我们始终要维持可阅读性、可扩展性和可维护性，这才是前端开发的金科玉律。祝您顺利进行 WEB 开发！

示例代码

在 public 文件夹下，将 app.js 文件改为以下内容：

-- -------------------- ---- -------
--------- -- -
  ---- --------

  ---------
    --- ---------
    ----------- -
      ------ -
        ----- -------
        ------ ------- -------
      -
    --
    ------------ -------- -- -
      ---------------- ------------
    -
  ---

-----

在 index.html 文件中，添加以下内容：

-- -------------------- ---- -------
--------- -----
------
  ------
    -------------- -- -- -----------
  -------
  ------
    -----------------
    ------- ----------------------------------------------------------------------
    ------- -------------------------
  -------
-------

完成后，即可启动本地服务器，在浏览器中查看输出。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562ef81e8991b448e0a7c