AngularJs实战项目
具有15年开发和技术培训经验。致力于前后端技术和架构领域，有丰富的理论、实践经验。曾多次参与大型银行和互联网公司核心系统的架构设计和开发
不用担心没有基础，本教程将从最基本的知识入手带你进阶用Angular开发在线竞拍网站，学完就有上万行代码经验一线互联网公司架构师带你开启Angular的实战大门
... 已有1406同学加入学习
亚里士朱德，88年白羊男，热爱技术，喜欢分享。业余时间经常旅游、读书、射箭。湖南大学计算机相关专业毕业后一直从事B/S系统的开发工作，从业经验5年以上，具有前、后端开发经验。《开发者头条》top10专栏作者，专栏订阅人数20k
快速掌握AngularJS精要部分，减少不必要的弯路用AngularJS仿一个拉勾网的WebApp，体验主流开发方式学习本课程能掌握AngularJS独立开发单页应用的能力
... 已有1334同学加入学习
曾任职某上市公司技术总监，负责多个大型企业级项目的构建，也设计过多种类型的互联网项目。曾为中国移动、中国银联等大型机构做过企业内部管理项目，负责前端技术，是个十足的技术咖，还出过《Angular从零到一》一书，是个博学多才的牛人。
Angular进阶知识Material、动画、依赖注入、表单控件、RxJS，Redux、自动化测试等全网首个介绍官方Material组件库的用法，首个介绍Redux在Angular中的应用打造一个企业协作平台应用，让你在Angular领域独当一面，具备开发复杂应用的能力
... 已有284同学加入学习
众多PHP流行框架中针对性的学习，才便于快捷开发。
未来的移动互联网，Web APP反而比原生App更有优势
快速入门Vue.js框架，完成从入门到实战的完美过渡
视频教程+实战案例，从理论到实战的完美过渡
Copyright (C)
All Rights Reserved | 京ICP备 号-2如何工程化开发大型angular2项目（上篇）平时我们想要更新主仓库时，只要git pull以下upstram远端，就可以保持最新了。如果不想人工手动去更新的化可以交给jenkins定时去更新，这样主心仓库永远是最新的了。创建衍生库：因为我们所有项目围绕主心库而衍生出来的，所以衍生库和主心库的关心和angular-seed关系一致。我们指定我们衍生库的远端upstream为我们的主心库，这样只要主心库是最新的，这样所有衍生库都可以保持同步更新。可以享受主心库提供的共用配置和 业务逻辑。看上去过程比较繁琐，其实只需要将整个操作过程的指令集合到bash脚本中，执行脚本是指定参数名为你的项目名称。这样快速就可以构建一个angular2项目，所以整套流程适合有复杂业务的项目。git remote add upstream git@192.168.1.1:/git/main-base
git fetch upstream
git merge upstream/master
项目开发篇：
既然我们构建完项目后，那么马上开工吧。随着前端项目越来越复杂，里面配置文件越来越多。因为开发环境和生产环境需要调用服务端接口地址又是不一样的，像我开发微信项目的，开发环境用测试的appid和生产环境的appid也是不一样的。情况更严重的是我们每个客户都有自己独立的配置信息（所以开始考虑多租户模式，不然下去是大坑）。理想情况下：
gulp build.dev --color --env-config dev
执行上述命令，就是启动开发dev环境的配置。利用yargs这个node工具去接收我们传递过去的参数，以此来区分开是开发模式下还是prod模式下。下面贴一段代码举例一下：
import { argv } from 'yargs';
export function templateLocals() {
// 这里就是我们通过env-config变量获取参数
const configEnvName = argv['env-config'] || argv['config-env'] || 'dev';
const configPath = Config.getPluginConfig('environment-config');
const baseConfig = getConfig(configPath, 'base');
// 依据dev和prod以及对应的路径获取对应的配置文件
const config = getConfig(configPath, configEnvName);
if (!config) {
throw new Error('Invalid configuration name');
return Object.assign(Config, {
ENV_CONFIG: JSON.stringify(Object.assign(baseConfig, config))
// 具体代码可以克隆angular-seed去查看
另外angular2提供接口能够优化打包出来的代码，但是我们开发时是不需要用到该接口如何去分离开来呢？gulp有个好插件，完美解决该问题，。我们只要在我们 代码中加入类似&%= BUILD_TYPE %&，这样就可以赋值给BUILD_TYPE，我们可以合理得去控制。
import { enableProdMode } from '@angular/core';
if (String('&%= BUILD_TYPE %&') === 'prod') { enableProdMode(); }
关于开发配置十分细碎，所以不做详述，可以日后咨询。
下篇预告：
下篇会涉及项目目录结构管理，以及angular2在移动端开发的经验，项目打包上线的经验31收藏分享举报{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[],&title&:&如何工程化开发大型angular2项目（上篇）&,&author&:&nong-chao-er-xiao-bin&,&content&:&\u003Ch1\u003E如何工程化开发大型angular2项目（上篇）前请提要：\u003C\u002Fh1\u003E\u003Cbr\u003E\u003Cp\u003E目前前端项目越来越复杂，管理一个前端项目需要考虑的方面越来越多，例如工具选择、项目构建、代码自动review工具、代码打包上线、开发生产环境分离、项目结构管理以及第三库引入管理等等之类问题。所以下面是我开发angular2项目时遇到的一些问题以及自己的一些解决方案以及项目管理的思路。这些内容将会以一个系列展开。\u003C\u002Fp\u003E\u003Cp\u003E项目构建篇：\u003C\u002Fp\u003E\u003Cp\u003Eangular2官方提供ng cli构建工具，但是投入使用后发现并不是符合我们需求。因为我们之前项目是基于gulp整套工作流，所以一直在寻找与gulp相结合的ng2案例。后来找到一个angular-seed项目，于是我将该项目设立为种子项目，依据该种子项目我们开发了7、8个angular2项目。下面简单介绍一下如何利用种子库创建衍生库，只要种子库保持更新，其他库可以同步保持更新.\u003C\u002Fp\u003E\u003Cp\u003E建立种子库：\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-4e9ec68b5e3b_b.png\& data-rawwidth=\&1280\& data-rawheight=\&720\& class=\&origin_image zh-lightbox-thumb\& width=\&1280\& data-original=\&https:\u002F\\u002Fv2-4e9ec68b5e3b_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1280'%20height='720'&&\u002Fsvg&\& data-rawwidth=\&1280\& data-rawheight=\&720\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1280\& data-original=\&https:\u002F\\u002Fv2-4e9ec68b5e3b_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-4e9ec68b5e3b_b.png\&\u003E\u003Cbr\u003E\u003Cp\u003E上面的图画得比较烂，我还是来好好解释一下。首先我们得有一个主心库，这个库十分重要，里面没有业务逻辑的代码，主要是平时开发时所需要的所有脚本，以及npm的一些基本依赖。另外一些共用组件，共用逻辑代码（例如登录验证等等）。主心库创 立完后，我们需要建立一个upstream的远端指向angular-seed项目\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit remote add upstream https:\\u002Fmgechev\u002Fangular-seed.git \n
git fetch upstream\n
git merge upstream\u002Fmaster\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E平时我们想要更新主仓库时，只要git pull以下upstram远端，就可以保持最新了。如果不想人工手动去更新的化可以交给jenkins定时去更新，这样主心仓库永远是最新的了。\u003C\u002Fp\u003E\u003Cp\u003E创建衍生库：\u003C\u002Fp\u003E\u003Cp\u003E因为我们所有项目围绕主心库而衍生出来的，所以衍生库和主心库的关心和angular-seed关系一致。我们指定我们衍生库的远端upstream为我们的主心库，这样只要主心库是最新的，这样所有衍生库都可以保持同步更新。可以享受主心库提供的共用配置和 业务逻辑。看上去过程比较繁琐，其实只需要将整个操作过程的指令集合到bash脚本中，执行脚本是指定参数名为你的项目名称。这样快速就可以构建一个angular2项目，所以整套流程适合有复杂业务的项目。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Egit remote add upstream git@192.168.1.1:\u002Fgit\u002Fmain-base \n
git fetch upstream\n
git merge upstream\u002Fmaster
\n\n项目开发篇：\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E既然我们构建完项目后，那么马上开工吧。随着前端项目越来越复杂，里面配置文件越来越多。因为开发环境和生产环境需要调用服务端接口地址又是不一样的，像我开发微信项目的，开发环境用测试的appid和生产环境的appid也是不一样的。情况更严重的是我们每个客户都有自己独立的配置信息（所以开始考虑多租户模式，不然下去是大坑）。理想情况下：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
gulp build.dev --color --env-config dev\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E执行上述命令，就是启动开发dev环境的配置。利用yargs这个node工具去接收我们传递过去的参数，以此来区分开是开发模式下还是prod模式下。下面贴一段代码举例一下：\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
import { argv } from 'yargs';\n
export function templateLocals() {\n
\u002F\u002F 这里就是我们通过env-config变量获取参数\n
const configEnvName = argv['env-config'] || argv['config-env'] || 'dev';\n
const configPath = Config.getPluginConfig('environment-config');\n
const baseConfig = getConfig(configPath, 'base');\n
\u002F\u002F 依据dev和prod以及对应的路径获取对应的配置文件\n
const config = getConfig(configPath, configEnvName);\n\n
if (!config) {\n
throw new Error('Invalid configuration name');\n
return Object.assign(Config, {\n
ENV_CONFIG: JSON.stringify(Object.assign(baseConfig, config))\n
\u002F\u002F 具体代码可以克隆angular-seed去查看\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E
另外angular2提供\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fangular.io\u002Fdocs\u002Fts\u002Flatest\u002Fapi\u002Fcore\u002Findex\u002FenableProdMode-function.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EenableProdMode\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E接口能够优化打包出来的代码，但是我们开发时是不需要用到该接口如何去分离开来呢？gulp有个好插件，完美解决该问题，\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fpackage\u002Fgulp-template\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Egulp-template\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。我们只要在我们 代码中加入类似&%= BUILD_TYPE %&，这样就可以赋值给BUILD_TYPE，我们可以合理得去控制。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E
import { enableProdMode } from '@angular\u002Fcore';\n
if (String('&%= BUILD_TYPE %&') === 'prod') { enableProdMode(); }\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E关于开发配置十分细碎，所以不做详述，可以日后咨询。\n\n\n下篇预告：\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E下篇会涉及项目目录结构管理，以及angular2在移动端开发的经验，项目打包上线的经验\u003C\u002Fp\u003E&,&updated&:new Date(&T07:35:20.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:7,&collapsedCount&:0,&likeCount&:31,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&Angular&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&AngularJS&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端工程化&}],&adminClosedComment&:false,&titleImageSize&:{&width&:0,&height&:0},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&tipjarState&:&closed&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:7,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T15:35:20+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&跑步coding&,&isFollowing&:false,&hash&:&27a5ee1cbcb1d&,&uid&:04,&isOrg&:false,&slug&:&yuyesoup&,&isFollowed&:false,&description&:&&,&name&:&HxVxH&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyuyesoup&,&avatar&:{&id&:&v2-dae11ebbcd26cadf8e1eb7c&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&好奇杀不死猫&,&isFollowing&:false,&hash&:&d4f83a4fa0d0fc9769c1&,&uid&:60,&isOrg&:false,&slug&:&Hc_Zzz&,&isFollowed&:false,&description&:&&,&name&:&赵汉成&,&profileUrl&:&https:\u002F\\u002Fpeople\u002FHc_Zzz&,&avatar&:{&id&:&&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&8b284dcd837fd3d04acceb&,&uid&:36,&isOrg&:false,&slug&:&chen-nian-ren&,&isFollowed&:false,&description&:&&,&name&:&陈黏人&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fchen-nian-ren&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&bb989eea4cfa&,&uid&:96,&isOrg&:false,&slug&:&weigto&,&isFollowed&:false,&description&:&&,&name&:&陈炜&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fweigto&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&e8ce7fa06f31a14f6c0be&,&uid&:88,&isOrg&:false,&slug&:&ifrankhu&,&isFollowed&:false,&description&:&&,&name&:&班长大大&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fifrankhu&,&avatar&:{&id&:&c999ec1aae2dddc9a37e2c&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\\u002F50\u002Fv2-4e9ec68b5e3bx112.png\& data-rawwidth=\&1280\& data-rawheight=\&720\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\\u002F50\u002Fv2-4e9ec68b5e3b_r.png\&\u003E如何工程化开发大型angular2项目（上篇）前请提要： 目前前端项目越来越复杂，管理一个前端项目需要考虑的方面越来越多，例如工具选择、项目构建、代码自动review工具、代码打包上线、开发生产环境分离、项目结构管理以及第三库引入管理等等之类问题。所以…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&annotationDetail&:null,&commentsCount&:7,&likesCount&:31,&FULLINFO&:true}},&User&:{&nong-chao-er-xiao-bin&:{&isFollowed&:false,&name&:&undefined&,&headline&:&区块链技术达人&,&avatarUrl&:&https:\u002F\\u002F50\u002F851883fdf7c0f345cee8fd_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&nong-chao-er-xiao-bin&,&bio&:&区块链技术先驱&,&hash&:&749efc1ed31ac419f890&,&uid&:20,&isOrg&:false,&description&:&区块链技术达人&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\\u002Fpeople\u002Fnong-chao-er-xiao-bin&,&avatar&:{&id&:&851883fdf7c0f345cee8fd&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&nwebStickySidebar&:&sticky&,&androidPassThroughPush&:&getui&,&newMore&:&new&,&liveReviewBuyBar&:&live_review_buy_bar_2&,&liveStore&:&ls_a2_b2_c1_f2&,&isOffice&:&false&,&homeUi2&:&default&,&answerRelatedReadings&:&qa_recommend_with_ads_and_article&,&remixOneKeyPlayButton&:&headerButton&,&asdfadsf&:&asdfad&,&qrcodeLogin&:&qrcode&,&newBuyBar&:&livenewbuy3&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&zcmLighting&:&zcm&,&favAct&:&default&,&appStoreRateDialog&:&close&,&mobileQaPageProxyHeifetz&:&m_qa_page_nweb&,&iOSNewestVersion&:&4.2.0&,&default&:&None&,&wechatShareModal&:&wechat_share_modal_show&,&qaStickySidebar&:&sticky_sidebar&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&experiment&}},&columns&:{&next&:{}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
最近一直在学习angularjs，只是局限在一些几行，几十行的小例子上，想找一个完整的项目（不需要太大），学习一下怎么用angularJs架构，怎么抽取服务啊，指令见的调用什么的，谢了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
建议初学者 略过官方前端路由那块, 容易误导, 如果没有后端基础,直接前端路由SPA 坑实在太多了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：25个超有用的 AngularJS Web 开发工具
稿源：51CTO
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，改善了JavaScript。
下面我要说的就是25个超有用的AngularJS工具，web开发人员千万不可错过哦。
1）AngulaJS最佳测试工具&&Protractor
Protractor支持AngularJS应用程序，是一款终端到终端的测试框架。Protractor在真正的浏览器中运行测试。由于Protractor支持Angular的具体定位策略，故而你无需进行任何设置就可以测试特定的Angular元素。
官方网站：http://angular.github.io/protractor/
2）AngularJS测试框架&&Jasmine
Jasmine对于JavaScript用户而言，也是一款测试框架。这也是一个DOM较少的JavaScript框架，它适合所有的Node.js项目和网站，并且在任何地方运行都是免费的。
官方网站：/jasmine/jasmine
3）支持AngularJS的IDE&&Webstorm
WebStorm的智能代码编辑器为JavaScript、Node.js、HTML和CSS，以及它们的接替者提供了一流的支持。WebStorm可以很好地处理现流行的web技术，提供一流的AngularJS支持。
官方网站：/webstorm/
4）AngularJS最佳框架&&Angular fire
firebase是用于轻松构建Web和移动应用程序的系列库，也是强大的框架。它能为JavaScript用户提供Angular Fire框架。
官方网站：/docs/web/libraries/angular/index.html
5）AngularJs测试工具&&karma
karma也是一款非常盛行的测试框架，用于JavaScript应用程序，它还能为开发人员提供测试环境。
官方网站：http://karma-runner.github.io/0.12/index.html
6）最佳AngularJS工具&&Mochajs
Mocha是一款运行在Node.js和浏览器上，功能丰富的JavaScript测试框架，它能够使得异步测试变得简单而有趣。Mocha测试运行持续，在映射未捕获的异常到正确的测试案例的同时，允许灵活和准确的报告。
官方网站：http://mochajs.org/
7）最好的代码编辑器&&SublimeText
这是开发人员最喜欢的文本代码编辑器之一。
官方网站：/
8）最佳的AngularGrid&&Angular Deckgrid
Angular Deckgrid是轻量级的网格，支持AngularJS。免费下载。它的指令不依赖于视觉表现。所有的响应能力和美感来自于你的CSS文件。
官方网站：/angular-deckgrid/#/
9）实用的AngularJS服务&&Restangular
Restangular是一个AngularJS的服务，通过最少的客户端代码简化了常用的GET、POST、DELETE和UPDATE请求。
官方网站：/mgonto/restangular
10）支持Chrome的AngularJS扩展&&ng Inspector
ng Inspector支持Chrome和Safari浏览器，可协助你开发、调试和理解AngularJS应用程序。
官方网站：http://ng-inspector.org/
11）Angular GetText
Angular&gettext为AngularJS提供超级简单的翻译支持。只要用英语写下来，标注要翻译的部分，剩下的就交给它好了。
12）Angular框架&&AngularUI
AngularUI是AngularJS框架。
官方网站：http://angular-ui.github.io/
13）Yeoman Generator Angular
支持AngularJS的Yeoman Generator&&能让你快速建立具有合理默认值和最佳实践的项目。
官方网站：/yeoman/generator-angular
14）djAngular
这是一个可重复使用的应用程序，提供了更好的应用程序集成。 Djangular允许你创建AngularJS内容的app，而不是包含了Django的单一庞大的AngularJS应用程序。
官方网站：/appliedsec/djangular
有好的文章希望站长之家帮助分享推广，猛戳这里
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页}