yeoman,generator-angular

前言

最近一个月新项目启动,为了更快速的搭建架构使用了yeoman(1.8.3)和generator-angular。

yeoman是一个脚手架工具,而generator-angular就是Yeoman generator for AngularJS,专门为Angular创建的一个脚手架工具。旨在提供快速搭建前端架构,提供开发环境,代码合并压缩混淆,一系列的自动化操作。

 

安装

首先yeoman 是nodejs下的工具,所以肯定要有nodejs和npm

用npm全局安装yo, grunt-cli, bower, generator-angular and generator-karma

如果你要使用sass,还需要安装Ruby 和 Compass

接下来创建一个项目的文件夹,在文件夹下运行

yo angular [app-name]

安装的每一步选择在这里我不具体列举出来

值得注意的是,安装过程gulp和grunt的选择,在generator-angular中gulp还是实验性质的,所以更推荐grunt,

安装完成后你会发现项目文件夹下多了一大堆的文件

在项目文件夹根目录下运行grunt serve页面会自动打开,你编辑代码页面也会自动刷新

grunt build命令是用于创建发布版本,文件的工程文件夹在app内,而dist就是build后生成出来的

 

用法

yeoman的主要用法如上:

举例,创建一个controller只需要运行命令

yo angular:controller home

yeoman会自动生成一个home.js并引入到index.html文件,并且home.js里已经写好了一个叫做HomeCtrl的controller,甚至已经在test文件夹内生成了一个用作单元测试的js文件,

这样把很多的人工操作自动化后会省去很多麻烦,而且能更好的规避错误。

 

angular:route的方法在建立路由的同时同时建立了controller和view,是不是感觉非常方便,

但是由于angular-route的局限性,我还是使用了ui-router,这样一来angular:route的方法我就没有使用了

但是总体上还是非常方便的

更多细节,可以参考https://github.com/yeoman/generator-angular

前端编码规范

前言

首先,写这篇代码规范是为了我自己在以后的项目中方便引用,让前端人员统一标准,方便在开发中保持代码的一致性,HTML和CSS的规范参照bootstrap编码规范,以下多为JS规则

IDE要求使用webstorm,能够更方便的统一大家的代码。

语法

  • HTML和CSS用两个空格来代替制表符(tab);
  • JS用四个空格来代替制表符(tab);
  • webstorm设置HTML和CSS格式化的方法:File-Settings,Editor-CodeStyle-HTML(或者CSS),在Tabs and Indents选项卡下把TabSize和Indent的值均改为2;
  • webstorm格式化快捷键Ctrl+Alt+L;

命名规则

文件命名规则:单英文单词,多单词使用“-”连接或者小驼峰方法:

    <div id="crayon-5897dc30e0e13560354732" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div><div class="crayon-num">2</div><div class="crayon-num">3</div><div class="crayon-num">4</div><div class="crayon-num">5</div><div class="crayon-num">6</div><div class="crayon-num">7</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e13560354732-1"><span class="crayon-v">index</span><span class="crayon-sy">.</span><span class="crayon-e">html</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-2"><span class="crayon-v">task</span><span class="crayon-o">-</span><span class="crayon-v">bg</span><span class="crayon-sy">.</span><span class="crayon-e">jpg</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-3"><span class="crayon-v">title</span><span class="crayon-o">-</span><span class="crayon-v">bg</span><span class="crayon-sy">.</span><span class="crayon-e">png</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-4"><span class="crayon-v">project</span><span class="crayon-o">-</span><span class="crayon-v">task</span><span class="crayon-sy">.</span><span class="crayon-e">css</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-5"><span class="crayon-v">project</span><span class="crayon-o">-</span><span class="crayon-v">ctrl</span><span class="crayon-sy">.</span><span class="crayon-e">js</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-6"><span class="crayon-v">projectCtrl</span><span class="crayon-sy">.</span><span class="crayon-i">js</span></div><div class="crayon-line" id="crayon-5897dc30e0e13560354732-7">&nbsp;</div></div></td>
                </tr>
            </table>
        </div>
    </div>

Css类名命名规则:英文单词,多单词使用“-”连接

    <div id="crayon-5897dc30e0e31730698901" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div><div class="crayon-num">2</div><div class="crayon-num">3</div><div class="crayon-num">4</div><div class="crayon-num">5</div><div class="crayon-num">6</div><div class="crayon-num">7</div><div class="crayon-num">8</div><div class="crayon-num">9</div><div class="crayon-num">10</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e31730698901-1"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">div </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"task-list-title"</span><span class="crayon-o">&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-2"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">h3 </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"task-list-title-h3"</span><span class="crayon-o">&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-3"><span class="crayon-h"> </span>这里是标题<span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-4"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-e">h3</span><span class="crayon-o">&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-5"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-e">div</span><span class="crayon-o">&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-6"><span class="crayon-h"> </span><span class="crayon-ta">&lt;style&gt;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-7"><span class="crayon-h"> </span><span class="crayon-k ">.task-list-title</span><span class="crayon-sy">{</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-8"><span class="crayon-h"> </span><span class="crayon-e ">float</span><span class="crayon-sy">:</span><span class="crayon-i ">left</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-9"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e31730698901-10"><span class="crayon-h"> </span><span class="crayon-ta">&lt;/style&gt;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

Javasctipt命名规则:英文单词,多单词使用小驼峰

    <div id="crayon-5897dc30e0e39427812276" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div><div class="crayon-num">2</div><div class="crayon-num">3</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e39427812276-1"><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-v">scope</span><span class="crayon-sy">.</span><span class="crayon-v">taskOpen</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e39427812276-2"><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-v">scope</span><span class="crayon-sy">.</span><span class="crayon-v">taskOpenState</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-5897dc30e0e39427812276-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

代码格式化

把webstorm的格式化换行去掉,设置方法:找到File-Settings,Editor-General-Appearance,去掉Show right margin(configured in Code Style options)的勾选

其他书写规范

<a>标签中href属性不使用时,不用#作为填充,使用空白来填充,例如:

    <div id="crayon-5897dc30e0e3f025556872" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e3f025556872-1"><span class="crayon-o">&lt;</span><span class="crayon-i">a</span><span class="crayon-h"> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">""</span><span class="crayon-h"> </span><span class="crayon-v">ng</span><span class="crayon-o">-</span><span class="crayon-v">click</span><span class="crayon-o">=</span><span class="crayon-s">"openPopbox()"</span><span class="crayon-o">&gt;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">&gt;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

协议

不要指定引入资源所带的具体协议。
当引入图片或其他媒体文件,还有样式和脚本时,URLs 所指向的具体路径,不要指定协议部分(http:, https:),除非这两者协议都不可用。
不指定协议使得 URL 从绝对的获取路径转变为相对的,在请求资源协议无法确定时非常好用,而且还能为文件大小节省几个字节。

    <div id="crayon-5897dc30e0e45660479833" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e45660479833-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"//cdn.com/foundation.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

    <div id="crayon-5897dc30e0e4b262851307" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div><div class="crayon-num">2</div><div class="crayon-num">3</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e4b262851307-1"><span class="crayon-sy">.</span><span class="crayon-i">example</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5897dc30e0e4b262851307-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">background</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-c">//static.example.com/images/bg.jpg);</span></div><div class="crayon-line" id="crayon-5897dc30e0e4b262851307-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>

注释

首先代码注释永远不嫌多,不管是不是给别人看或者协同开发,注释必须尽可能的详尽,就算是你自己写的代码也可能时间太久或者逻辑太复杂而忘记具体功能,所以一定要写注释;
其次注释能帮助你快速理解代码所做的事情,看一段有注释的代码和一段没有注释的代码是两个概念,前者可以让你很快的理解代码的用途和方法,后者需要自己慢慢分析,而时间就是开发成本;
再次注释能帮你更好的整理你的逻辑,在写注释的时候,往往能发现一些自己忽略掉的一些东西,减少挖坑的次数;

    <div id="crayon-5897dc30e0e52962507286" class="crayon-syntax crayon-theme-sublime-text crayon-font-sourcecodepro crayon-os-pc print-yes notranslate" style="margin-top: 12px;margin-bottom: 12px;font-size: 14px !important;line-height: 24px !important">

        <div class="crayon-plain-wrap"></div>
        <div class="crayon-main">
            <table class="crayon-table">
                <tr class="crayon-row">
            <td class="crayon-nums ">
                <div class="crayon-nums-content" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-num">1</div><div class="crayon-num">2</div><div class="crayon-num">3</div><div class="crayon-num">4</div><div class="crayon-num">5</div><div class="crayon-num">6</div><div class="crayon-num">7</div></div>
            </td>
                    <td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important;line-height: 24px !important"><div class="crayon-line" id="crayon-5897dc30e0e52962507286-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">offset</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">includeLabels</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">// If the labels are included we need to have a minimum offset of 20 pixels</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-c">// We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">offset</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">20</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5897dc30e0e52962507286-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
                </tr>
            </table>
        </div>
    </div>