{"id":39060,"date":"2023-10-30T20:53:09","date_gmt":"2023-03-21T17:50:13","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/"},"modified":"2024-05-04T06:45:05","modified_gmt":"2024-05-03T22:45:05","slug":"%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/","title":{"rendered":"\u6211\u5c1d\u8bd5\u4e86YEOMAN\u7684\u6559\u7a0b"},"content":{"rendered":"<h1>\u9996\u5148<br \/>\nor<br \/>\n\u9996\u5148\u8981\u8bf4\u660e<\/h1>\n<p>\u6211\u4f1a\u6309\u7167YEOMAN\u7f51\u7ad9\u4e0a\u7684\u6559\u7a0b\u9010\u6b65\u64cd\u4f5c\u3002<\/p>\n<h1>\u73af\u5883<\/h1>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Max OSX 10.10.2<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">node v0.12.0<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">npm v2.5.1<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">git v2.3.0<\/ul>\n<h1>\u8ba9\u6211\u4eec\u642d\u5efa\u4e00\u4e2a\u7f51\u7edc\u5e94\u7528\u7a0b\u5e8f<\/h1>\n<p>\u4f5c\u4e3a\u4e00\u4e2a\u793a\u4f8bWeb\u5e94\u7528\u7a0b\u5e8f\uff0c\u6211\u5c06\u521b\u5efa\u4e00\u4e2aTODO\u5e94\u7528\u7a0b\u5e8f\u3002<br \/>\n\u60a8\u5c06\u80fd\u591f\u901a\u8fc7\u62d6\u653e\u6765\u6dfb\u52a0\u3001\u5220\u9664\u3001\u6574\u7406TODO\uff0c\u4ee5\u53ca\u8fdb\u884c\u79bb\u7ebf\u4fdd\u5b58\u3002<\/p>\n<p>\u5b8c\u6210\u8fd9\u4e2acodelab\u5927\u7ea6\u9700\u898160\u5206\u949f\u3002<\/p>\n<h1>\u9047\u89c1\u53f6\u66fc<\/h1>\n<p>Yeoman\u53ef\u4f7f\u75281\u52302\u4e2a\u547d\u4ee4\u6765\u751f\u6210\u6574\u4e2aWeb\u5e94\u7528\u7a0b\u5e8f\u6216\u5355\u4e2a\u7ec4\u4ef6\uff08\u5982\u63a7\u5236\u5668\u6216\u6a21\u578b\uff09\u7684\u5e38\u89c4\u4ee3\u7801\u3002<\/p>\n<p>yo:\u30b9\u30ad\u30e3\u30d5\u30a9\u30fc\u30eb\u30c7\u30a3\u30f3\u30b0\u30c4\u30fc\u30eb\u3002<br \/>\n\u9762\u5012\u306a\u4f5c\u696d\u3067\u3042\u308b\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u56fa\u6709\u306escaffold\u3092\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u3067\u3084\u3063\u3066\u304f\u308c\u308b\u3002<\/p>\n<p>\u4e3a\u4e86\u63d0\u9ad8\u751f\u4ea7\u6548\u7387\uff0c\u6211\u4eec\u8fd8\u5c06\u4e0e\u5176\u4ed6\u5de5\u5177\u8fdb\u884c\u534f\u4f5c\u3002<\/p>\n<p>grunt :\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30d3\u30eb\u30c9\u3001\u30d7\u30ec\u30d3\u30e5\u30fc\u3001\u30c6\u30b9\u30c8\u3067\u4f7f\u7528\u3002<\/p>\n<p>gulp\uff1a\u8a2d\u5b9a\u3088\u308a\u3082\u30b3\u30fc\u30c9\u3092\u597d\u3080Grunt JS\u306e\u4ee3\u66ff\u30c4\u30fc\u30eb\u3002<\/p>\n<p>bower\uff1a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4f9d\u5b58\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3002<\/p>\n<h1>\u7b2c\u4e00\u6b65\uff1a\u642d\u5efa\u5f00\u53d1\u73af\u5883<\/h1>\n<h2>\u5b89\u88c5\u5148\u51b3\u6761\u4ef6<\/h2>\n<p>\u5982\u679c\u5c1a\u672a\u5b89\u88c5\uff0c\u8bf7\u8fdb\u884c\u5b89\u88c5\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Node.js v0.10.x\u4ee5\u4e0a<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">npm v2.1.0\u4ee5\u4e0a (Node\u306b\u540c\u68b1)<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">git<\/ul>\n<h2>\u5b89\u88c5Yeoman\u5de5\u5177\u96c6\u3002<\/h2>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>npm <span class=\"nb\">install<\/span> <span class=\"nt\">--global<\/span> yo bower grunt-cli\r\n<\/code><\/pre>\n<p>\u51fa\u73b0\u65e0\u6cd5\u8bbf\u95ee\u5b89\u88c5\u76ee\u5f55\uff08EACCES\uff09\u7684\u9519\u8bef\u3002\u867d\u7136\u60f3\u8981\u4ee5su\u6743\u9650\u8fd0\u884c\uff0c\u4f46\u5728\u907f\u514d\u89e3\u51b3\u65b9\u6848\u4e2d\u5199\u7740\u4e0d\u8981\u4f7f\u7528su\u3002\u8bf7\u6309\u7167\u6b64\u9875\u9762\u8fdb\u884c\u4fee\u590d\u3002<\/p>\n<p>\u5728.zshrc\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">NPM_PACKAGES<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"<\/span><span class=\"k\">${<\/span><span class=\"nv\">HOME<\/span><span class=\"k\">}<\/span><span class=\"s2\">\/.npm-packages\"<\/span>\r\n\r\n<span class=\"nv\">NODE_PATH<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"<\/span><span class=\"nv\">$NPM_PACKAGES<\/span><span class=\"s2\">\/lib\/node_modules:<\/span><span class=\"nv\">$NODE_PATH<\/span><span class=\"s2\">\"<\/span>\r\n\r\n<span class=\"nv\">PATH<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"<\/span><span class=\"nv\">$NPM_PACKAGES<\/span><span class=\"s2\">\/bin:<\/span><span class=\"nv\">$PATH<\/span><span class=\"s2\">\"<\/span>\r\n\r\n<span class=\"c\"># Unset manpath so we can inherit from \/etc\/manpath via the `manpath`<\/span>\r\n<span class=\"c\"># command<\/span>\r\n<span class=\"nb\">unset <\/span>MANPATH <span class=\"c\"># delete if you already modified MANPATH elsewhere in your config<\/span>\r\n<span class=\"nv\">MANPATH<\/span><span class=\"o\">=<\/span><span class=\"s2\">\"<\/span><span class=\"nv\">$NPM_PACKAGES<\/span><span class=\"s2\">\/share\/man:<\/span><span class=\"si\">$(<\/span>manpath<span class=\"si\">)<\/span><span class=\"s2\">\"<\/span>\r\n<\/code><\/pre>\n<p>\u521b\u5efa\u4e00\u4e2a ~\/.npmrc \u6587\u4ef6<br \/>\n\u524d\u7f00=${HOME}\/.npm-packages<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">mkdir<\/span> <span class=\"s2\">\"<\/span><span class=\"k\">${<\/span><span class=\"nv\">HOME<\/span><span class=\"k\">}<\/span><span class=\"s2\">\/.npm-packages\"<\/span>\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">source<\/span> ~\/.zshrc\r\n<\/code><\/pre>\n<p>\u518d\u6b21\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1anpm install &#8211;global yo bower grunt-cli\u3002<\/p>\n<h2>\u786e\u8ba4\u5b89\u88c5<\/h2>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yo <span class=\"nt\">--version<\/span> <span class=\"o\">&amp;&amp;<\/span> bower <span class=\"nt\">--version<\/span> <span class=\"o\">&amp;&amp;<\/span> grunt <span class=\"nt\">--version<\/span>\r\n<\/code><\/pre>\n<h1>\u6b65\u9aa42\uff1a\u5b89\u88c5Yeoman\u751f\u6210\u5668<\/h1>\n<p>\u5728\u4f20\u7edf\u7684Web\u5f00\u53d1\u5de5\u4f5c\u6d41\u4e2d\uff0c\u5e38\u5e38\u9700\u8981\u82b1\u8d39\u5f88\u591a\u65f6\u95f4\u6765\u7ec4\u88c5\u5178\u578b\u7684\u4ee3\u7801\u3001\u4e0b\u8f7d\u4f9d\u8d56\u5173\u7cfb\u4ee5\u53ca\u624b\u52a8\u521b\u5efaWeb\u6587\u4ef6\u5939\u7ed3\u6784\u3002<\/p>\n<p>\u519c\u6c11\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u5c06\u4f1a\u62ef\u6551\u8fd9\u4e2a\u3002<br \/>\n\u8ba9\u6211\u4eec\u4e3aAngularJS\u9879\u76ee\u5b89\u88c5\u4e00\u4e2a\u751f\u6210\u5668\u5427\uff01<\/p>\n<h2>\u5b89\u88c5AngularJS\u751f\u6210\u5668<\/h2>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>npm <span class=\"nb\">install<\/span> <span class=\"nt\">--global<\/span> generator-angular@0.9.2\r\n<\/code><\/pre>\n<p>\u9664\u4e86\u76f4\u63a5\u4f7f\u7528npm install\uff0c\u60a8\u8fd8\u53ef\u4ee5\u901a\u8fc7Yeoman\u5bf9\u8bdd\u83dc\u5355\u4ece\u751f\u6210\u5668\u4e2d\u641c\u7d22\u3002\u8fd0\u884cyo\u547d\u4ee4\u5e76\u9009\u62e9&#8221;Install a generator&#8221;\u3002<\/p>\n<h1>\u7b2c\u4e09\u6b65\uff1a\u4f7f\u7528\u751f\u6210\u5668\u6765\u642d\u5efa\u811a\u624b\u67b6\u3002<\/h1>\n<p>\u5728\u4e2d\u56fd\u7684\u571f\u751f\u571f\u957f\u7684\u8bed\u5883\u4e0b\uff0cYeoman \u8fd9\u4e2a\u8bcd\u7684\u610f\u601d\u662f\u6839\u636e\u5177\u4f53\u7684\u914d\u7f6e\u8981\u6c42\u751f\u6210\u7528\u4e8eWeb\u5e94\u7528\u7a0b\u5e8f\u7684\u6587\u4ef6\u3002<\/p>\n<h2>\u521b\u5efa\u9879\u76ee\u6587\u4ef6\u5939<\/h2>\n<p>\u521b\u5efa\u6211\u7684\u5f85\u529e\u4e8b\u9879\u6587\u4ef6\u5939<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">mkdir <\/span>mytodo <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">cd <\/span>mytodo\r\n<\/code><\/pre>\n<p>\u8fd9\u4e2a\u6587\u4ef6\u5939\u662f\u7528\u6765\u653e\u7f6e\u642d\u5efa\u597d\u7684\u6587\u4ef6\u7684\u4f4d\u7f6e\u3002<\/p>\n<p>\u4f5c\u4e3a\u989d\u5916\u7684\u9644\u52a0\u798f\u5229\uff0cAngular\u751f\u6210\u5668\u4f1a\u52a8\u6001\u5730\u4f7f\u7528\u6587\u4ef6\u5939\u540d\u79f0\u6765\u521b\u5efa\u5e94\u7528\u7684\u547d\u540d\u7a7a\u95f4\u3002<br \/>\n\u4f8b\u5982\uff0c\u5982\u679c\u662fmytodo\uff0c\u90a3\u4e48\u5c31\u4f1a\u53d8\u6210angular.module(&#8216;mytodoApp&#8217;, [])\u3002<br \/>\n\u5728\u7ee7\u7eed\u4e4b\u524d\uff0c\u8bf7\u786e\u4fdd\u6ca1\u6709\u8f93\u5165\u9519\u8bef\u3002<\/p>\n<h2>\u4eceYeoman\u83dc\u5355\u8bbf\u95ee\u751f\u6210\u5668\u3002<\/h2>\n<p>\u6267\u884cyo\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yo\r\n<\/code><\/pre>\n<p>\u6211\u4eec\u4e00\u76f4\u5728\u5bfb\u627e\u65b9\u6cd5\u6765\u4f7fYo\u53d8\u5f97\u66f4\u597d\uff01\u6211\u4eec\u662f\u5426\u53ef\u4ee5\u533f\u540d\u62a5\u544a\u4f7f\u7528\u7edf\u8ba1\u6570\u636e\u4ee5\u4fbf\u968f\u65f6\u95f4\u6539\u8fdb\u8be5\u5de5\u5177\uff1f\u66f4\u591a\u4fe1\u606f\u8bf7\u89c1\uff1ahttps:\/\/github.com\/yeoman\/insight \u548c http:\/\/yeoman.io (Y\/n)<\/p>\n<p>\u55e8\uff0cKazuya\uff01\u4f60\u60f3\u505a\u4ec0\u4e48\uff1f<br \/>\n\u9009\u62e9\u4e00\u4e2a\u751f\u6210\u5668<br \/>\n\u276f Angular<br \/>\nKarma<br \/>\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500<br \/>\n\u66f4\u65b0\u4f60\u7684\u751f\u6210\u5668<br \/>\n\u5b89\u88c5\u4e00\u4e2a\u751f\u6210\u5668<br \/>\n\u5bfb\u627e\u4e00\u4e9b\u5e2e\u52a9<br \/>\n\u5e26\u6211\u79bb\u5f00\u8fd9\u91cc\uff01<br \/>\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500<\/p>\n<p>\u60a8\u662f\u5426\u60f3\u4f7f\u7528Sass\uff08\u5e26\u6709Compass\uff09\uff1f\u4e0d\u9700\u8981<br \/>\n\u662f\u5426\u8981\u5305\u62ecBootstrap\uff1f\u662f\u7684<br \/>\n\u60a8\u60f3\u5305\u542b\u54ea\u4e9b\u6a21\u5757\uff1f\uff08\u6309&lt;\u7a7a\u683c&gt;\u9009\u62e9\uff09<br \/>\n\u276f\u25c9 angular-animate.js<br \/>\n\u25c9 angular-cookies.js<br \/>\n\u25c9 angular-resource.js<br \/>\n\u25c9 angular-route.js<br \/>\n\u25c9 angular-sanitize.js<br \/>\n\u25c9 angular-touch.js<\/p>\n<p>[?] \u662f\u5426\u53ef\u4ee5\u533f\u540d\u62a5\u544a\u4f7f\u7528\u7edf\u8ba1\u6570\u636e\u4ee5\u6539\u8fdb Bower \u5de5\u5177\uff1f\u53ef\u4ee5\u9009\u62e9\u662f\u6216\u5426\u3002<\/p>\n<p>Yeoman\u4f1a\u81ea\u52a8\u5728\u627e\u5230\u7684Web\u5e94\u7528\u7a0b\u5e8f\u4f9d\u8d56\u5173\u7cfb\u4e0a\u4e3a\u5de5\u4f5c\u6d41\u7a0b\u5f15\u5165\u65b9\u4fbf\u7684Grunt\u4efb\u52a1\u5e76\u81ea\u52a8\u642d\u5efa\u8d77\u811a\u624b\u67b6\u3002<\/p>\n<h2>\u53d1\u7535\u673a\u7684\u8bbe\u7f6e<\/h2>\n<p>\u6709\u4e9b\u751f\u6210\u5668\u63d0\u4f9b\u81ea\u5b9a\u4e49\u9009\u9879\u8bbe\u7f6e\u4ee5\u52a0\u5feb\u5f00\u53d1\u73af\u5883\u7684\u521d\u59cb\u8bbe\u7f6e\uff0c\u4ee5\u5b9a\u5236\u5171\u540c\u7684\u5f00\u53d1\u5e93\u3002 (\u4f8b\u5982\u521a\u624d\u63d0\u5230\u7684SaaS\u548cBootstrap\u9009\u62e9)<\/p>\n<p>AngularJS\u7684\u751f\u6210\u5668\u63d0\u4f9b\u4e86\u4f7f\u7528Sass\uff08\u5305\u62ecCommpass\uff09\u6216\u5305\u62ecTwitter Bootstrap\u7684\u9009\u9879\u3002<\/p>\n<h1>\u6b65\u9aa44\uff1a\u5bf9\u7531Yeoman\u751f\u6210\u7684\u5e94\u7528\u8fdb\u884c\u8bc4\u4f30\u3002<\/h1>\n<p>\u4e3a\u4e86\u67e5\u770b\u5b9e\u9645\u4e0a\u5df2\u7ecf\u642d\u5efa\u597d\u7684\u811a\u624b\u67b6\uff0c\u6253\u5f00mytodo\u76ee\u5f55\u3002<\/p>\n<pre class=\"post-pre\"><code>\u2523 app\uff1aWeb\u30a2\u30d7\u30ea\u306e\u89aa\u30c7\u30a3\u30ec\u30af\u30c8\u30ea  \r\n\u2503\u3000\u2523 index.html\uff1aAngular\u30a2\u30d7\u30ea\u306e\u57fa\u790e\u306ehtml\u30d5\u30a1\u30a4\u30eb  \r\n\u2503\u3000\u2523 404.html, favicon.ico, robots.txt\uff1a\u4e00\u822c\u7684\u306b\u4f7f\u308f\u308c\u308bWeb\u30d5\u30a1\u30a4\u30eb  \r\n\u2503\u3000\u2523 scripts\uff1aJS\u30d5\u30a1\u30a4\u30eb  \r\n\u2503\u3000\u2503\u3000\u3000\u2523 app.js\uff1a\u30e1\u30a4\u30f3\u306eAngular\u30a2\u30d7\u30ea\u30b3\u30fc\u30c9  \r\n\u2503\u3000\u2503\u3000\u3000\u2517 controllers\uff1aAngular\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9  \r\n\u2503\u3000\u2523 styles\uff1aCSS\u30d5\u30a1\u30a4\u30eb  \r\n\u2503\u3000\u2517 views\uff1aAngular\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u683c\u7d0d\u5834\u6240  \r\n\u2523 bower_components, bower.json\uff1abower\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u308bJavaScript\/web\u306e\u4f9d\u5b58\u95a2\u4fc2  \r\n\u2523 Gruntfile.js, package.json, node_modules\uff1aGrunt\u30bf\u30b9\u30af\u3067\u5fc5\u8981\u306a\u8a2d\u5b9a\u3068\u4f9d\u5b58\u95a2\u4fc2  \r\n\u2517 test\uff1ascaffold\u3055\u308c\u305f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u7528\u306e\u5178\u578b\u7684\u306a\u30c6\u30b9\u30c8\u3092\u542b\u3080\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u7528\u306e\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u3068\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8  \r\n<\/code><\/pre>\n<h1>\u6b65\u9aa45\uff1a\u4f7f\u7528\u6d4f\u89c8\u5668\u9884\u89c8\u5e94\u7528\u7a0b\u5e8f<\/h1>\n<p>\u56e0\u4e3aYeoman\u662f\u5176\u4e2d\u4e00\u90e8\u5206\u7684\u529f\u80fd\uff0c\u6240\u4ee5\u4e0d\u9700\u8981\u5bf9\u672c\u5730Web\u670d\u52a1\u5668\u8fdb\u884c\u7279\u6b8a\u8bbe\u7f6e\u6765\u8fdb\u884c\u9884\u89c8\u3002<\/p>\n<h2>\u670d\u52a1\u5668\u5f00\u59cb<\/h2>\n<p>\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u540e\uff0c\u5c06\u5728localhost:9000\u4e0a\u542f\u52a8\u57fa\u4e8eNode\u7684HTTP\u670d\u52a1\u5668\u3002<\/p>\n<pre class=\"post-pre\"><code>$ grunt serve\r\n<\/code><\/pre>\n<p>\u6ca1\u6709\u53d1\u751f\u3002\u9519\u8bef\u3002\u3002\u3002<\/p>\n<pre class=\"post-pre\"><code>Warning: ENOENT, no such file or directory '\/\u7701\u7565\/mytodo\/app\/bower.json' Use --force to continue.\r\n<\/code><\/pre>\n<p>\u6309\u7167Stack Overflow\u7684\u5efa\u8bae\uff0c\u5c06Gruntfile.js\u6587\u4ef6\u4e2d\u7684cwd\u5c5e\u6027\u6ce8\u91ca\u6389\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ Automatically inject Bower components into the app<\/span>\r\n<span class=\"mi\">164<\/span>     <span class=\"nx\">wiredep<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"mi\">165<\/span>       <span class=\"nx\">options<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"mi\">166<\/span>         <span class=\"nx\">cwd<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">&lt;%= yeoman.app %&gt;<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"mi\">167<\/span>       <span class=\"p\">},<\/span>\r\n<span class=\"mi\">168<\/span>       <span class=\"nx\">app<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"mi\">169<\/span>         <span class=\"nx\">src<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">&lt;%= yeoman.app %&gt;\/index.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\r\n<span class=\"mi\">170<\/span>         <span class=\"nx\">ignorePath<\/span><span class=\"p\">:<\/span>  <span class=\"o\">\/<\/span><span class=\"err\">\\<\/span><span class=\"p\">.<\/span><span class=\"err\">\\<\/span><span class=\"p\">.<\/span><span class=\"err\">\\<\/span><span class=\"c1\">\/\/<\/span>\r\n<span class=\"mi\">171<\/span>       <span class=\"p\">}<\/span>\r\n<span class=\"mi\">172<\/span>     <span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ Automatically inject Bower components into the app<\/span>\r\n<span class=\"mi\">164<\/span>     <span class=\"nx\">wiredep<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"mi\">165<\/span>       <span class=\"nx\">options<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"mi\">166<\/span>         <span class=\"c1\">\/\/cwd: '&lt;%= yeoman.app %&gt;'<\/span>\r\n<span class=\"mi\">167<\/span>       <span class=\"p\">},<\/span>\r\n<span class=\"mi\">168<\/span>       <span class=\"nx\">app<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"mi\">169<\/span>         <span class=\"nx\">src<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">&lt;%= yeoman.app %&gt;\/index.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\r\n<span class=\"mi\">170<\/span>         <span class=\"nx\">ignorePath<\/span><span class=\"p\">:<\/span>  <span class=\"o\">\/<\/span><span class=\"err\">\\<\/span><span class=\"p\">.<\/span><span class=\"err\">\\<\/span><span class=\"p\">.<\/span><span class=\"err\">\\<\/span><span class=\"c1\">\/\/<\/span>\r\n<span class=\"mi\">171<\/span>       <span class=\"p\">}<\/span>\r\n<span class=\"mi\">172<\/span>     <span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<p>\u5f53\u518d\u6b21\u8fd0\u884c grunt serve \u65f6\uff0c\u5e94\u7528\u7a0b\u5e8f\u6210\u529f\u542f\u52a8\u3002<\/p>\n<h2>\u505c\u6b62\u670d\u52a1\u5668<\/h2>\n<p>\u8bf7\u6309Ctrl + C\u505c\u6b62\u3002<\/p>\n<h2>\u6587\u4ef6\u76d1\u63a7<\/h2>\n<p>\u5f53\u60a8\u4f7f\u7528\u6587\u672c\u7f16\u8f91\u5668\u66f4\u6539\u5e76\u4fdd\u5b58\u6587\u4ef6\u65f6\uff0c\u5373\u4f7f\u60a8\u4e0d\u8fdb\u884c\u4efb\u4f55\u64cd\u4f5c\uff0c\u6d4f\u89c8\u5668\u4e5f\u4f1a\u81ea\u52a8\u5f3a\u5236\u5237\u65b0\u3002<br \/>\n\u8fd9\u88ab\u79f0\u4e3a\u5b9e\u65f6\u91cd\u65b0\u52a0\u8f7d\uff0c\u5e76\u5728Gruntfile.js\u7684Grunt\u4efb\u52a1\u4e2d\u8fdb\u884c\u4e86\u8bbe\u7f6e\u3002<\/p>\n<h1>\u7b2c\u516d\u6b65\u5f00\u59cb\u7f16\u5199AngularJS\u5e94\u7528\u7a0b\u5e8f<\/h1>\n<p>\u8fd9\u4e2a\u90e8\u5206\u7684\u6240\u6709\u6b65\u9aa4\u5047\u8bbe\u60a8\u6b63\u5728\u7f16\u8f91\u4f4d\u4e8eapp\u6587\u4ef6\u5939\u5185\u7684\u6587\u4ef6\u3002<\/p>\n<h2>\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u6a21\u677f\u6765\u663e\u793a\u5f85\u529e\u4e8b\u9879\u5217\u8868<\/h2>\n<p>\u8bf7\u67e5\u770b\u5b98\u65b9\u7f51\u7ad9\uff0c\u4ee3\u7801\u5df2\u7701\u7565\u3002<\/p>\n<p>\u5c06\u4f4d\u4e8eviews\/main.html\u6587\u4ef6\u4e2d\u7684<\/p>\n<div>\n<p>\u6807\u7b7e\u7684&#8221;class&#8221;\u5c5e\u6027\u503c\u4ece&#8221;jumbotron&#8221;\u66f4\u6539\u4e3a&#8221;container&#8221;\u3002<\/p>\n<p>scripts\/controllers\/main.js<br \/>\n\u5c06\\$scope.awesomeThings\u66f4\u6539\u4e3a\\$scope.todos\u6570\u7ec4\u3002<\/p>\n<p>\u4fee\u6539\u6e90\u4ee3\u7801\u4ee5\u5728HTML\u7684input\u5b57\u6bb5\u4e2d\u8f93\u51fatodo\u9879\u76ee\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">ng-repeat\u5c5e\u6027<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u304b\u3089\u30a2\u30a4\u30c6\u30e0\u3054\u3068\u306b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u3059\u308bAngular\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">ng-model\u5c5e\u6027<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">input\u3001select\u3001textarea\u3001\u30ab\u30b9\u30bf\u30e0\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3067\u52d5\u4f5c\u3059\u308b\u3001<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"post-ul\">\u53cc\u65b9\u5411\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3092\u4f5c\u6210\u3059\u308bAngular\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6<\/ul>\n<h2>\u65b0\u589e\u5f85\u529e\u4e8b\u9879<\/h2>\n<p>\u5728&#8221;views\/main.html&#8221;\u4e2d\uff0c\u5728<\/p>\n<h2>\u548c<\/h2>\n<p>\u4e4b\u95f4\u6dfb\u52a0\u4e00\u4e2a\u8868\u5355\u3002<\/p>\n<p>\u811a\u672c\/\u63a7\u5236\u5668\/main.js<br \/>\n\u5b9e\u73b0addTodo()\u51fd\u6570\uff0c\u5e76\u5c06\u5176\u4e0eng-submit\u7ed1\u5b9a\u5728\u4e00\u8d77\u3002<\/p>\n<p>\u73b0\u5728\u53ef\u4ee5\u6dfb\u52a0\u4efb\u52a1\u4e86\u3002<br \/>\n\u4f46\u662f\u5982\u679c\u6dfb\u52a0\u7a7a\u7684\u5f85\u529e\u4e8b\u9879\uff0c\u4f1a\u51fa\u9519\u505c\u4e0b\u6765\u3002<\/p>\n<h2>\u5220\u9664\u5f85\u529e\u4e8b\u9879<\/h2>\n<p>\u5728views\/main.html\u4e2d\uff1a<\/p>\n<p>\u6dfb\u52a0\u4e00\u4e2a\u5220\u9664\u6309\u94ae\u3002<br \/>\n\u5c06\u7c7b\u540d\u4ece&#8221;form-group&#8221;\u6539\u4e3a&#8221;input-group&#8221;\u3002<\/p>\n<p>\u5728 main.js \u7684 scripts\/controllers \u6587\u4ef6\u4e2d\u6dfb\u52a0 removeTodo() \u51fd\u6570\uff0c\u5e76\u5c06\u5176\u4e0e ng-click \u7ed1\u5b9a\u3002<\/p>\n<h1>\u6b65\u9aa4\u4e03\uff1a\u4f7f\u7528Bower\u8fdb\u884c\u8f6f\u4ef6\u5305\u7684\u5b89\u88c5\u3002<\/h1>\n<p>\u5c06\u8981\u6392\u5e8f\u7684\u5217\u8868\u6dfb\u52a0\u8fdb\u53bb\uff0c\u5e76\u4f7f\u5176\u53ef\u6392\u5e8f\u3002<br \/>\n\u5728Bower\u4e2d\u5b89\u88c5AngularUI Sortable\u6a21\u5757\u548cAngularJS\u6307\u4ee4\u7ec4\u4ef6\u3002<\/p>\n<h2>\u5f53\u524d\u7684\u5305\u88c5\u6e05\u5355<\/h2>\n<p>\u5728myTodo\u9879\u76ee\u4e2d\u6267\u884c\u4ee5\u4e0b\u64cd\u4f5c\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>bower list\r\n<\/code><\/pre>\n<h2>\u67e5\u627e\u5305\u88f9<\/h2>\n<p>\u641c\u7d22 angular-ui-sortable \u662f\u5426\u53ef\u7528\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>bower search angular-ui-sortable\r\n<\/code><\/pre>\n<h2>\u5b89\u88c5\u8f6f\u4ef6\u5305<\/h2>\n<p>\u4f7f\u7528bower\u5b89\u88c5&#8221;angular-ui-sortable&#8221;\u548c&#8221;jquery-ui&#8221;\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>bower <span class=\"nb\">install<\/span> <span class=\"nt\">--save<\/span> angular-ui-sortable\r\n<span class=\"nv\">$ <\/span>bower <span class=\"nb\">install<\/span> <span class=\"nt\">--save<\/span> jquery-ui\r\n<\/code><\/pre>\n<p>\u53c8\u6216\u8005<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>bower <span class=\"nb\">install<\/span> <span class=\"nt\">--save<\/span> angular-ui-sortable jquery-ui\r\n<\/code><\/pre>\n<p>\u5982\u679c\u6dfb\u52a0\u4e86&#8211;save\u9009\u9879\uff0c\u5c06\u4f1a\u66f4\u65b0bower.json\u6587\u4ef6\u4e2d&#8221;angular-ui-sortable&#8221;\u548c&#8221;jquery-ui&#8221;\u7684\u4f9d\u8d56\u5173\u7cfb\u3002<\/p>\n<h2>\u786e\u8ba4\u5b89\u88c5<\/h2>\n<p>\u786e\u8ba4&#8221;bower_components&#8221;\u6587\u4ef6\u5939\u4e2d\u5305\u542b&#8221;angular-ui-sortable&#8221;\u548c&#8221;jquery-ui&#8221;\u4e24\u4e2a\u6587\u4ef6\u3002<\/p>\n<h2>\u4f7ftodo\u53ef\u4ee5\u8fdb\u884c\u6392\u5e8f<\/h2>\n<p>\u9700\u8981\u5c06\u65b0\u5b89\u88c5\u7684\u4f9d\u8d56\u5f15\u7528\u6dfb\u52a0\u5230index.html\u6587\u4ef6\u4e2d\u3002<br \/>\n\u867d\u7136\u53ef\u4ee5\u624b\u52a8\u64cd\u4f5c\uff0c\u4f46Yeoman\u53ef\u4ee5\u81ea\u52a8\u5b8c\u6210\uff01<\/p>\n<p>\u6309\u4e0bCtrl + C\u6765\u7ec8\u6b62\u547d\u4ee4\u884c\u8fdb\u7a0b\uff0c\u7136\u540e\u518d\u6b21\u8fd0\u884cgrunt serve\u3002<\/p>\n<p>\u53ef\u4ee5\u5728index.html\u6587\u4ef6\u7684\u5e95\u90e8\u7684script\u90e8\u5206\u627e\u5230&#8221;jquery-ui\/ui\/jquery-ui.js&#8221;\u548c&#8221;angular-ui-sortable\/sortable.js&#8221;\u7684\u8ffd\u52a0\u3002<\/p>\n<p>\u4e3a\u4e86\u4f7f\u7528Sortable\u6a21\u5757\uff0c\u9700\u8981\u66f4\u65b0scripts\/app.js\u6587\u4ef6\u4e2d\u7684Angular\u6a21\u5757\u5b9a\u4e49\u3002<\/p>\n<p>\u6dfb\u52a0 ui.sortable\u3002<\/p>\n<p>\u5728 views\/main.html \u4e2d\u6dfb\u52a0 ui-sortable \u6307\u4ee4\u7684 div \u5143\u7d20\u3002<\/p>\n<h1>\u7b2c\u516b\u6b65<br \/>\n\u7b2c8\u4e2a\u6b65\u9aa4<\/h1>\n<h2>\u5728Karma\u548cJasmine\u4e2d\u7684\u6d4b\u8bd5<\/h2>\n<p>Karma\u662f\u4e00\u4e2a\u4e0d\u53d7\u6846\u67b6\u9650\u5236\u7684JavaScript\u6d4b\u8bd5\u8fd0\u884c\u5668\u3002<br \/>\nAngular\u751f\u6210\u5668\u5305\u542b\u4e86ngScenario\u548cJasmine\u4e24\u79cd\u6d4b\u8bd5\u6846\u67b6\u3002<\/p>\n<p>\u5f53\u6211\u9996\u6b21\u8fd0\u884cAngular\u65f6\uff0c\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u4e86test\u6587\u4ef6\u5939\uff0c\u5e76\u751f\u6210\u4e86karma.conf.js\u6587\u4ef6\uff0c\u540c\u65f6\u4e5f\u5bfc\u5165\u4e86Karma\u7684Node\u6a21\u5757\u3002<\/p>\n<h2>\u8fd0\u884c\u5355\u5143\u6d4b\u8bd5<\/h2>\n<p>\u4f7f\u7528Ctrl+C\u6765\u505c\u6b62Grunt\u670d\u52a1\u5668\u3002<br \/>\n\u4e3a\u4e86\u8fdb\u884c\u6d4b\u8bd5\u8fd0\u884c\uff0cGrunt\u4efb\u52a1\u5df2\u7ecf\u5728Gruntfile.js\u4e2d\u8fdb\u884c\u4e86\u811a\u624b\u67b6\u7f16\u5199\u3002<\/p>\n<p>\u5f53\u8fd0\u884cgrunt test\u65f6\uff0cYeoman\u63a7\u5236\u53f0\u4f1a\u51fa\u73b0\u4e00\u4e9b\u8b66\u544a\u3002<br \/>\n\u4e0d\u8981\u62c5\u5fc3\uff0c\u8fd9\u662f\u9884\u671f\u7684\u884c\u4e3a\uff0c\u56e0\u4e3a\u73b0\u5728\u6709\u4e24\u4e2a\u539f\u56e0\u5bfc\u81f4\u5931\u8d25\u3002<\/p>\n<h2>\u66f4\u65b0Karma\u7684\u8a2d\u5b9a<\/h2>\n<p>\u4e3a\u4e86\u52a0\u8f7d\u5728Step 7\u4e2d\u5b89\u88c5\u7684\u65b0\u7684Bower\u7ec4\u4ef6\uff0c\u66f4\u65b0Karma\u7684\u8bbe\u7f6e\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nx\">files<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/angular\/angular.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/angular-mocks\/angular-mocks.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/angular-animate\/angular-animate.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/angular-cookies\/angular-cookies.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/angular-resource\/angular-resource.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/angular-route\/angular-route.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/angular-sanitize\/angular-sanitize.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/angular-touch\/angular-touch.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/jquery\/dist\/jquery.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/jquery-ui\/jquery-ui.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">bower_components\/angular-ui-sortable\/sortable.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">app\/scripts\/**\/*.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">test\/mock\/**\/*.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"dl\">'<\/span><span class=\"s1\">test\/spec\/**\/*.js<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"p\">],<\/span>\r\n<\/code><\/pre>\n<h2>\u66f4\u65b0\u5355\u4f53\u6d4b\u8bd5<\/h2>\n<p>\u6253\u958b test\/spec\/controllers\/main.js \u6587\u4ef6\u3002<br \/>\n\u9019\u662f Angular \u7684 MainController \u55ae\u5143\u6e2c\u8a66\u3002<\/p>\n<p>\u6d4b\u8bd5\/\u89c4\u8303\/\u63a7\u5236\u5668\/main.js<br \/>\n\u56e0\u4e3aawesomeThings\u4ecd\u7136\u4fdd\u6301\u4e0d\u53d8\uff0c\u6240\u4ee5\u9700\u8981\u8fdb\u884c\u4fee\u6b63\u3002<\/p>\n<p>scripts\/controllers\/main.js<br \/>\n\u5220\u9664$scope.todos\u7684\u4e09\u4e2a\u5143\u7d20\u3002<\/p>\n<p>\u5f53\u91cd\u65b0\u8fd0\u884c grunt test \u65f6\uff0c\u6d4b\u8bd5\u5c06\u4f1a\u901a\u8fc7\u3002<\/p>\n<h2>\u8bf7\u589e\u52a0\u66f4\u591a\u7684\u5355\u5143\u6d4b\u8bd5\u3002<\/h2>\n<p>\u6d4b\u8bd5\/\u89c4\u8303\/\u63a7\u5236\u5668\/main.js<br \/>\n\u6dfb\u52a0\u6d4b\u8bd5<\/p>\n<p>\u9884\u8ba1\u91cd\u65b0\u8fd0\u884cgrunt test\u65f6\uff0c\u6d4b\u8bd5\u4f1a\u901a\u8fc74\u4e2a\u3002<\/p>\n<h1>\u7b2c\u4e5d\u6b65\uff1a\u4e3a\u4ea7\u54c1\u7248\u505a\u51c6\u5907<\/h1>\n<h2>\u4e3a\u4e86\u4ea7\u54c1\u7248\u672c\u7684\u6587\u4ef6\u4f18\u5316<\/h2>\n<p>\u4e3a\u4e86\u5236\u4f5c\u5e94\u7528\u7a0b\u5e8f\u7684\u4ea7\u54c1\u7248\u672c\uff0c\u6211\u4eec\u9700\u8981\u505a\u4ee5\u4e0b\u4e8b\u60c5\uff1a<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30b3\u30fc\u30c9\u306elint<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30c6\u30b9\u30c8\u5b9f\u884c<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u7bc0\u7d04\u3059\u308b\u305f\u3081\u306b\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u30b9\u30bf\u30a4\u30eb\u306e\u7d50\u5408\u3068\u6700\u5c0f\u5316<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u753b\u50cf\u3092\u4f7f\u3063\u3066\u3044\u308b\u306a\u3089\u6700\u9069\u5316<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u4f7f\u7528\u3057\u3066\u3044\u308b\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u306e\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u3092\u30b3\u30f3\u30d1\u30a4\u30eb<\/ul>\n<\/li>\n<\/ul>\n<ul class=\"post-ul\">\u4e00\u822c\u7684\u306b\u30a2\u30d7\u30ea\u3092\u307b\u3093\u3068\u306blean\u306e\u72b6\u614b\u306b\u3059\u308b<\/ul>\n<p>\u60ca\u4eba\u7684\u662f\uff0c\u53ea\u9700\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u5373\u53ef\u5168\u90e8\u5b8c\u6210\u3002<\/p>\n<p>$ grunt<\/p>\n<p>\u5728\u9879\u76ee\u7684\u6839\u76ee\u5f55\u4e0b\u7684dist\u6587\u4ef6\u5939\u4e2d\uff0c\u653e\u7f6e\u4e86\u53ef\u4f9b\u4f7f\u7528\u7684\u4ea7\u54c1\u9884\u5907\u7248\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n<h2>\u5236\u54c1\u51c6\u5907\u7248\u672c\u7684\u6784\u5efa\u548c\u9884\u89c8<\/h2>\n<p>\u5982\u679c\u60f3\u5728\u672c\u5730\u9884\u89c8\u4ea7\u54c1\u5e94\u7528\u7a0b\u5e8f\uff0c\u53ea\u9700\u8fd0\u884c\u5176\u4ed6\u7b80\u5355\u7684grunt\u547d\u4ee4\u3002<\/p>\n<pre class=\"post-pre\"><code>$ grunt serve:dist\r\n<\/code><\/pre>\n<p>\u7f16\u8bd1\u9879\u76ee\uff0c\u5e76\u5728\u672c\u5730\u670d\u52a1\u5668\u4e0a\u542f\u52a8\u3002<\/p>\n<h1>\u6b65\u9aa410\uff1a\u4f7f\u7528\u672c\u5730\u5b58\u50a8\u5b9e\u73b0todo\u7684\u6301\u4e45\u5316<\/h1>\n<p>\u5f53\u6d4f\u89c8\u5668\u5237\u65b0\u65f6\uff0c\u91cd\u65b0\u5ba1\u89c6\u9879\u76ee\u672a\u6c38\u4e45\u4fdd\u5b58\u7684\u95ee\u9898\u3002<\/p>\n<h2>\u5b89\u88c5Bower\u8f6f\u4ef6\u5305<\/h2>\n<p>\u4f7f\u7528\u540d\u4e3a&#8221;angular-local-storage&#8221;\u7684Angular\u6a21\u5757\uff0c\u53ef\u4ee5\u8f7b\u677e\u5730\u5b9e\u73b0\u672c\u5730\u5b58\u50a8\u3002<\/p>\n<pre class=\"post-pre\"><code>$ bower install --save angular-local-storage\r\n<\/code><\/pre>\n<h2>\u6dfb\u52a0\u672c\u5730\u5b58\u50a8<\/h2>\n<p>\u4f7f\u7528Ctrl+C\u505c\u6b62\u5f53\u524d\u547d\u4ee4\u884c\u8fdb\u7a0b\uff0c\u518d\u6b21\u6267\u884cgrunt serve\u3002<br \/>\n\u5728index.html\u7684\uff08<!-- bower:js -->\u90e8\u5206\uff09\u5e95\u90e8\u6dfb\u52a0\u4e86angular-local-storage\u3002<\/p>\n<p>\u5c06LocalStorageModule\u6dfb\u52a0\u5230scripts\/app.js\u3002<\/p>\n<p>\u5728app.js\u4e2d\uff0c\u6211\u4eec\u5c06\u8bbe\u7f6e\u672c\u5730\u5b58\u50a8\u670d\u52a1\u63d0\u4f9b\u8005\uff0c\u4ee5\u4f7f\u7528\u4ee5&#8221;ls&#8221;\u4e3a\u524d\u7f00\u7684\u672c\u5730\u5b58\u50a8\u540d\u79f0\uff0c\u4ee5\u907f\u514d\u4ece\u4f7f\u7528\u76f8\u540c\u53d8\u91cf\u540d\u79f0\u7684\u5176\u4ed6\u5e94\u7528\u7a0b\u5e8f\u9519\u8bef\u5730\u52a0\u8f7dtodo\u3002<\/p>\n<p>\u4e3a\u4e86\u58f0\u660e\u5bf9\u672c\u5730\u5b58\u50a8\u670d\u52a1\u7684\u4f9d\u8d56\u5173\u7cfb\uff0c\u9700\u8981\u66f4\u65b0\u63a7\u5236\u5668\uff08main.js\uff09\u3002<br \/>\n\u5728\u56de\u8c03\u51fd\u6570\u4e2d\uff0c\u5c06\u672c\u5730\u5b58\u50a8\u670d\u52a1\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u6dfb\u52a0\u8fdb\u53bb\u3002<\/p>\n<p>\u6211\u4e0d\u60f3\u4ece\u9759\u6001\u6570\u7ec4\u4e2d\u8bfb\u53d6todo\uff0c\u800c\u662f\u60f3\u4ece\u672c\u5730\u5b58\u50a8\u8bfb\u53d6\u503c\u3002\u5e76\u4e14\u6211\u60f3\u5c06\u503c\u5b58\u50a8\u5728\u672c\u5730\u5b58\u50a8\u4e2d\uff0c\u800c\u4e0d\u662f\u5728$scope.todos\u4e2d\u3002<\/p>\n<p>\u4e3a\u4e86\u76d1\u89c6\\$scope.todos\u7684\u53d8\u5316\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528Angular\u7684\\$watch\u76d1\u542c\u5668\u3002<br \/>\n\u5982\u679c\u6709\u4eba\u6dfb\u52a0\u6216\u5220\u9664\u4e86todo\uff0c\\$watch\u76d1\u542c\u5668\u5c06\u4fdd\u6301\u672c\u5730\u5b58\u50a8\u7684todo\u6570\u636e\u5b58\u50a8\u540c\u6b65\u3002<\/p>\n<p>\u5220\u9664\u5f53\u524d\u7684$scope.todos\u58f0\u660e\uff0c\u5e76\u8fdb\u884c\u91cd\u5199\u3002<\/p>\n<p>\u6d4f\u89c8\u5668\u5237\u65b0\u540e\u503c\u5f97\u4ee5\u6301\u7eed\u4fdd\u7559\u3002<\/p>\n<p>\u9009\u62e9Chrome\u5f00\u53d1\u8005\u5de5\u5177\u7684\u8d44\u6e90\u9762\u677f\uff0c\u5e76\u4ece\u5de6\u4fa7\u9009\u62e9\u672c\u5730\u5b58\u50a8\uff0c\u60a8\u53ef\u4ee5\u786e\u8ba4\u6570\u636e\u662f\u5426\u6301\u4e45\u5316\u5b58\u50a8\u5728\u672c\u5730\u5b58\u50a8\u4e2d\u3002<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u9996\u5148 or \u9996\u5148\u8981\u8bf4\u660e \u6211\u4f1a\u6309\u7167YEOMAN\u7f51\u7ad9\u4e0a\u7684\u6559\u7a0b\u9010\u6b65\u64cd\u4f5c\u3002 \u73af\u5883 Max OSX 10.10.2 &#038;n [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39060","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u6211\u5c1d\u8bd5\u4e86YEOMAN\u7684\u6559\u7a0b - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u5c1d\u8bd5\u4e86yeoman\u7684\u6559\u7a0b\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u6211\u5c1d\u8bd5\u4e86YEOMAN\u7684\u6559\u7a0b\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 or \u9996\u5148\u8981\u8bf4\u660e \u6211\u4f1a\u6309\u7167YEOMAN\u7f51\u7ad9\u4e0a\u7684\u6559\u7a0b\u9010\u6b65\u64cd\u4f5c\u3002 \u73af\u5883 Max OSX 10.10.2 &amp;n [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u5c1d\u8bd5\u4e86yeoman\u7684\u6559\u7a0b\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-21T17:50:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-03T22:45:05+00:00\" \/>\n<meta name=\"author\" content=\"\u79d1, \u96c5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u96c5\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/\",\"name\":\"\u6211\u5c1d\u8bd5\u4e86YEOMAN\u7684\u6559\u7a0b - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-03-21T17:50:13+00:00\",\"dateModified\":\"2024-05-03T22:45:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u6211\u5c1d\u8bd5\u4e86YEOMAN\u7684\u6559\u7a0b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\",\"name\":\"\u79d1, \u96c5\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u96c5\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u6211\u5c1d\u8bd5\u4e86YEOMAN\u7684\u6559\u7a0b - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u5c1d\u8bd5\u4e86yeoman\u7684\u6559\u7a0b\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u6211\u5c1d\u8bd5\u4e86YEOMAN\u7684\u6559\u7a0b","og_description":"\u9996\u5148 or \u9996\u5148\u8981\u8bf4\u660e \u6211\u4f1a\u6309\u7167YEOMAN\u7f51\u7ad9\u4e0a\u7684\u6559\u7a0b\u9010\u6b65\u64cd\u4f5c\u3002 \u73af\u5883 Max OSX 10.10.2 &n [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u5c1d\u8bd5\u4e86yeoman\u7684\u6559\u7a0b\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-03-21T17:50:13+00:00","article_modified_time":"2024-05-03T22:45:05+00:00","author":"\u79d1, \u96c5","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u96c5","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/","name":"\u6211\u5c1d\u8bd5\u4e86YEOMAN\u7684\u6559\u7a0b - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-03-21T17:50:13+00:00","dateModified":"2024-05-03T22:45:05+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u6211\u5c1d\u8bd5\u4e86YEOMAN\u7684\u6559\u7a0b"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a","name":"\u79d1, \u96c5","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","caption":"\u79d1, \u96c5"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e4%ba%86yeoman%e7%9a%84%e6%95%99%e7%a8%8b%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39060"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39060\/revisions"}],"predecessor-version":[{"id":96749,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39060\/revisions\/96749"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}