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
To proceed to the installation, browse to Brackets and download the free editor:
Download the latest version to your machine:
After the setup, open the Brackets web editor :
Relaunch Chrome and take a look to the AngularJS enhancements of this Web Designer, clicking the "Extensions Manager" button to the top right side :
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:
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) :
You can now see the source file (main.css) and proceed to edit the source code, without leaving the HTML file:
After you finish, press "ESC" or click the "X" to close the dialog.
There is also a powerful "Search" functionality:
Another useful thing is the displaying of the color or gradient as you hover over some HEX or RGB values:
You can also open the Developer Tools from Brackets:
Enjoy your modern and powerful AngularJS code editor:
In this article we learned Step by Step How to install an optimized AngularJS code editor.
Happy programming.....
by Carmel Schvartzman
כתב: כרמל שוורצמן
