Google+

Tuesday, December 16, 2014

Powerful open-source Web Editor optimized for AngularJS and Web Design

In this article we describe Step by Step How to install Brackets , a Powerful open-source Web Editor optimized for AngularJS and Web Design.  
Brackets is a FREE code editor written completely in Javascript, CSS3 and HTML5, and comes with very useful features like Quick Edit (meaning that you can change CSS & JS code instantly from  the HTML file, no need to switch between different files) , and Live Preview : you can run your AngularJS App on the browser immediately from the code editor.
Brackets  looks like this:
Powerful open-source Web Editor optimized for AngularJS and Web Design



Powerful open-source Web Editor optimized for AngularJS and Web Design




To proceed to the installation, browse to Brackets and download the free editor:
Powerful open-source Web Editor optimized for AngularJS and Web Design 1

Download the latest version to your machine:

Powerful open-source Web Editor optimized for AngularJS and Web Design 2

Powerful open-source Web Editor optimized for AngularJS and Web Design 3


Powerful open-source Web Editor optimized for AngularJS and Web Design 5

After the setup, open the Brackets web editor :

Powerful open-source Web Editor optimized for AngularJS and Web Design 6

Relaunch Chrome and take a look to the AngularJS enhancements of this Web Designer, clicking the "Extensions Manager" button to the top right side :

Powerful open-source Web Editor optimized for AngularJS and Web Design 7

Proceed to install the "AngularJS for Brackets" and "Angular JS Snippets".
A very comfortable feature of this AngularJS Designer is the "Live Preview" , which allows us to immediately run the HTML5 and update it as you type code without hitting "save", switching to the browser, and then refreshing it to finally see the result:

Powerful open-source Web Editor optimized for AngularJS and Web Design 8

Another very powerful and useful feature is the "Quick Edit", which allows us to edit the CSS and javascript source files without switching files: just place your cursor on some HTML tag with CSS definitions, and right click to "Quick Edit" (Ctrl + E) :

Powerful open-source Web Editor optimized for AngularJS and Web Design 9

You can now see the source file (main.css) and proceed to edit the source code, without leaving the HTML file:

Powerful open-source Web Editor optimized for AngularJS and Web Design 10

After you finish, press "ESC" or click the "X" to close the dialog.
There is also a powerful "Search" functionality:

Powerful open-source Web Editor optimized for AngularJS and Web Design 11

Another useful thing is the displaying of the color or gradient as you hover over some HEX or RGB values:

Powerful open-source Web Editor optimized for AngularJS and Web Design 12

You can also open the Developer Tools from Brackets:

Powerful open-source Web Editor optimized for AngularJS and Web Design 13


Powerful open-source Web Editor optimized for AngularJS and Web Design 14

Enjoy your modern and powerful AngularJS code editor:

Powerful open-source Web Editor optimized for AngularJS and Web Design 15




In this article we learned Step by Step How to install an optimized AngularJS code editor. 
Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן