Aug 29, 2013

Tags:
Comments:

23 Comments

AngularJS最理想开发工具WebStorm

AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板。Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒。用angularjs就像写后台代码,更规范,更结构化,更可控。

关于作者

  • 张丹(Conan), 程序员Java,R,PHP,Javascript
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/angularjs-webstorm-ide/

前言
俗语讲:“工欲善其事,必先利其器”,为了玩转AngularJS,顺手的工具要选好。在上一篇文章中,通过yeoman我们构建了一个AngularJS的工程,通过vi编辑器和命令行操作,我们几乎可以完成整个的项目开发。但是,随着代码量和文件数的增加,文件和目录越来越难把握,代码文件各种难懂,缩进不一致,controller和directive被多少个地方所引用,。。。

我们需要一个IDE,来帮助我们更好的看懂项目,管理代码。WebStorm是目前我认为AngularJS开发最理想工具。

目录

  1. WebStorm介绍
  2. 导入Javascript工程
  3. 安装AngularJS插件
  4. WebStorm使用

1. WebStorm介绍

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaSscript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

下载:http://www.jetbrains.com/webstorm/index.html

WebStorm可能最大的缺点就是需要付费,对于个人开发者49刀。不过,WebStorm还推出了几种免费的liences。

  • Classroom License:申请课堂演示
  • Open Source Project License:申请做为开源项目的贡献者
  • MVP License: 申请微软的专家

可以通过购买页面找到信息:http://www.jetbrains.com/webstorm/buy/index.jsp

当然我是不会告诉大家,在google里可以找到过去版本的liences的,只是中国的程序员真是太苦逼了。

2. 导入Javascript工程

打开WebStorm后,我们可以通过操作:

"file"==>"open Directory..."==>"select Directory" ==> "ok"

来选择我们已经构建好的工程。

WebStrom对Html5, javascript, css,json… 大部分的代码都支持非常好。

3. 安装AngularJS插件

不过,默认的WebStrom并不认识,AngularJS的指令,当我尝试写代码ng-controller时,编辑器没有出现对应该的提示。

<div ng

对于特别熟悉的AngularJS的人来说,并不是那么重要。但是,如果有语法提示不是会更好吗?

安装AngularJS插件,两种办法:

  1. 在IDE中,自动下载自动安装
  2. 手动下载,手动安装

1). 在IDE中,自动下载自动安装
我们需要以下的操作:

1. File->Settings->Plugins
2. 点击 “Browse Repositories”
3. 选中 “AngularJS” 双击
4. 选择 “Yes”
5. 重启WebStorm

我在使用这个方法的时候失败了

2). 手动下载,手动安装
我们在jetbrains的插入库中,找到AngularJS:http://plugins.jetbrains.com/plugin/6971

下载angularjs-plugin.zip,然后解压到D:\toolkit\WebStorm 6.0.1\plugins\目录

~ D:\toolkit\WebStorm 6.0.1\plugins\angularjs-plugin

重启WebStorm

再次输入代码:

<div ng-c

语法的提示,太帅气了!!

我查了一下插件的开发者的代码,支持全部的angularJS指令语法:


ng-app,ng-bind,ng-bind-html-unsafe,ng-bind-template,ng-class,ng-class-even,ng-class-odd,
ng-cloak,ng-controller,ng-form,ng-hide,ng-include,ng-init,ng-non-bindable,ng-pluralize,
ng-repeat,ng-show,ng-submit,ng-style,ng-switch,ng-switch-when,ng-switch-default,ng-options,
ng-view,ng-transclude,ng-model,ng-list,ng-change,ng-value,ng-required,required

4. WebStorm使用

1). 对于HTML的页面:WebStorm会在右上角出现浏览器的图标方便我们打开测试

2). 对Javascript脚本:WebStorm会方便的配置NodeJS启动, UnitTest启动 等等

IDE的功能很强大,熟悉后会极大地提升我们的开发效率的,特别是对于大规模的多人项目。

转载请注明出处:
http://blog.fens.me/angularjs-webstorm-ide/

黄聪:AngularJS最理想开发工具WebStorm的更多相关文章

  1. AngularJS最理想开发工具WebStorm

    http://blog.fens.me/angularjs-webstorm-ide/ Angularjs插件下载地址:http://plugins.jetbrains.com/plugin/6971 ...

  2. 黄聪:《跟黄聪学WordPress主题开发》

    又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...

  3. JS开发工具WebStorm使用快捷键

    快捷键可以提高开发效率,最好用的就是这些! 代码编辑 Ctrl + d   复制整行 Ctrl + '-/+'  模块折叠 Ctrl + [ ]   括号匹配 Ctrl + F12 结构展示 Shif ...

  4. 黄聪:chrome扩展开发《AJAX请求》

    chrome在一次更新之后,出于安全考虑,完全的禁止了content_script从https向http发起ajax请求,即使正常情况下也会在console里给出提示.这对于WEB来讲是好事,但对于扩 ...

  5. 黄聪:将自己开发的插件发布到WordPress官方插件站(转)

    原文作者:我爱水煮鱼 把你的插件发布到 WordPress 官方插件目录是让更多人用到插件的好方法,这样可以让你的插件不仅仅给我们中国人民使用,而且还可以让你的插件给全世界人民使用,想想全世界人民都在 ...

  6. 黄聪:《跟黄聪学WordPress插件开发》

    续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...

  7. 前端开发利器webStorm

    这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim ...

  8. 黄聪:wordpress教程

    又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...

  9. 20个angularjs开发工具

    AngularJS是那些渴望以动态方式来设计web app的web开发人员最偏爱的框架之一.如果你是一个希望启动AngularJS项目的开发人员,那么你可能需要帮助来挑选出趁手的工具…… 在Value ...

随机推荐

  1. Web版记账本开发记录(六)

    经过今天的学习和实践,终于把这个web版的记账系统给做出来了, 虽然是很简单的一个系统,但是自己花费的时间也着实不少. 今天将大部分功能都实现了,接下来就是完善和美化, 接下来会对不足的地方进行改善, ...

  2. C#Windows窗体中添加了AxWindowsMediaPlayer的详细用法影响键盘操作的问题

    最近在写一个飞机大战游戏,但在为游戏背景添加声音的时候,发现添加了AxWindowsMediaPlayer的详细用法音乐控件不能再通过键盘控制飞机的移动了,在网上查了许久,没找到原因,差点就想去找老师 ...

  3. RABC --权限控制解读

    一.基于RBAC的概念介绍 1.RBAC(Role-Based Access Control )基于角色的访问控制. 2.RBAC认为权限的过程可以抽象概括为:判断[Who是否可以对What进行How ...

  4. React Native 开发日常、常见问题总结及解决

    优点: 1.写 UI 快,跟写 HTML 差不多,flex 布局写起来很爽,而且跨平台: 2.调试方便,command + R 直接刷新 Simulator,不用像 Xcode 等待编译: 3.体验好 ...

  5. gcc 的参数 -Wall -O2 -ansi

    -Wall  生成所有警告信息 -o test (小写字母o)是说输出为test -ansi  是使用c++98标准去编译代码. 关闭gnu c中与ansi c不兼容的特性,激活ansi c的专有特性 ...

  6. Effective java第17条:要么为继承而设计,并提供文档说明,要么就禁止继承

    不要过度设计. 面向对象编程,从一开始被洗脑难免在上手写代码时都会首先思考有没有公共方法啊,能不能把两个类抽象成一个父类再继承啊等,慎重使用继承,当要使用继承时一定要在文档注释中写明重写这个方法会给其 ...

  7. oracle中next_day()、last_day()函数解析

    oracle中next_day()函数解析 Sql代码 当前系统时间的下一星期一的时间select   next_day(sysdate,1) from dual NEXT_DAY(date,char ...

  8. tcl脚本直接执行脚本中中文识别不了的处理

    上一篇说tcl中文乱码是因为我写了个bat调用该脚本,但是脚本中的中文路径是乱码.今天刚好有时间进行解决下: 首先看看调用代码 "./bin/base-tcl8.6-thread-win32 ...

  9. php \r\n

    代码a: 复制代码 代码如下: <?php echo'hello</br>'; echo'world!'; ?> output: helllo world! 代码b: 复制代码 ...

  10. emmet简单记录

    一.引式符号 html:5 or  ! . class #  id []标签内属性 pycharm不支持  {}标签的内容 pycharm不支持 ()分组标签  pycharm不支持 二.关系符号 1 ...