Bill: Angularjs Most ideal development tool Webstorm

theTags:angularangular.jsangularjswebstormComments:CommentsAngularjs Most ideal development tool Webstorm

The ANGULARJS experiential Programming series will show you how to build a powerful web front-end system with ANGULARJS. Angularjs is a very good web front-end framework developed by the Google team. Under so many web frameworks, Angularjs can stand out from architecture design on superior, bidirectional data binding, dependency injection, directives, MVC, templates. Angular.js innovative back-office technology into the front-end development, swept away jquery once the light. Using Angularjs is like writing background code, more standardized, more structured, and more controllable.

About the author

• Zhang Dan (Conan), programmer Java,r,php,javascript
• Weibo: @Conan_Z
• Blog:http://blog.fens.me
• Email: [Email protected]

Reprint please specify the source:
http://blog.fens.me/angularjs-webstorm-ide/

Objective
The saying goes: "工欲善其事, its prerequisite", in order to play turn angularjs, handy tool to choose good. In the previous article, we built a ANGULARJS project through Yeoman, and with the VI Editor and command line operations, we could almost complete the entire project development. However, with the increase in the number of code and files, files and directories are increasingly difficult to grasp, the code files are difficult to understand, indentation is inconsistent, controller and directive is referenced by how many places, ...

We need an IDE to help us better understand the project and manage the code. Webstorm is currently the ideal tool I think ANGULARJS development.

Directory

1. Webstorm Introduction
2. Import JavaScript Project
3. Installing the Angularjs Plugin
4. Webstorm use

1. Webstorm Introduction

Webstorm is a JavaScript development tool owned by JetBrains Corporation. By the vast number of Chinese JS developers known as "web front-end development artifact", "the most powerful HTML5 editor", "the most intelligent javasscript IDE" and so on. And IntelliJ idea homologous, inherited the IntelliJ idea powerful JS part of the function.

Download: http://www.jetbrains.com/webstorm/index.html

Webstorm may be the biggest drawback is the need to pay for personal developers 49 knife. However, Webstorm also launched several free liences.

• Classroom License: Apply for a classroom presentation
• Open Source Project License: Application as a contributor to open source projects
• MVP License: An expert for Microsoft

Information can be found through the purchase page: http://www.jetbrains.com/webstorm/buy/index.jsp

Of course, I will not tell you that in Google can find the past version of the Liences, but the Chinese programmers are really too hard to force.

2. Import JavaScript Project

After opening webstorm, we can do this by:

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

To choose the projects we have built.

Webstrom to HTML5, JavaScript, Css,json ... Most of the code is supported very well.

3. Installing the Angularjs Plugin

However, the default webstrom does not know, angularjs instructions, when I try to write code Ng-controller, the editor does not appear to be prompted.

<div ng

It's not that important for someone who is especially familiar with Angularjs. But wouldn't it be better if there was a syntax hint?

Install ANGULARJS plug-ins, two ways:

1. Automatically download automatic installation in the IDE
2. Manual download, manual Installation

1). In the IDE, automatically download automatic installation
We need to do the following:

1. File->settings->plugins
2. Click "Browse repositories"
3. Select "AngularJS" to double-click
4. Select "Yes"
5. Restart Webstorm

I failed when I was using this method.

2). Manual download, manual Installation
We found the angularjs:http://plugins.jetbrains.com/plugin/6971 in JetBrains's insert library.

Download Angularjs-plugin.zip, then unzip to D:\toolkit\WebStorm 6.0.1\plugins\ directory

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

Restart Webstorm

Re-enter the code:

<div ng-c

Grammar hints, too handsome!!

I checked the developer code of the plugin and supported all the ANGULARJS instruction syntax:

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 use

1). For HTML pages: Webstorm will appear in the upper right corner of the browser icon to facilitate our open test

2). To JavaScript script: Webstorm will be convenient to configure Nodejs boot, unittest start, etc.

The IDE is powerful and familiar will greatly enhance our development efficiency, especially for large-scale multi-person projects.

Reprint please specify the source:
http://blog.fens.me/angularjs-webstorm-ide/

Bill: Angularjs Most ideal development tool Webstorm