Summer intern at Genuitec! I am using their products DevStyle, CodeMix and Angular IDE to create projects in different programming languages such as Python and Angular. Providing a new user experience for other developers as well as insight to help facilitate optimal development and learning. Stay tuned...
Posted on Sep 17th 2018
Angular Development Taken Further with Angular IDE & CodeMix
So far, my Angular development experience using Angular IDE with CodeMix has been awesome. I have developed several small projects now, and the tools and friendly GUI’s from Angular IDE and CodeMix have dramatically enhanced my productivity and confidence in writing Angular code. For those of you who aren’t super familiar with TypeScript, here is a guide to get you started!
Angular, TypeScript, Python, PHP… what’s your top language pick? No matter what it is, CodeMix makes your everyday coding far more efficient. Enjoy its ready-to-go tech packs for a wide array of technologies!
TypeScript, HTML and CSS Intelligence
Foremost, CodeMix validation for TypeScript tells me specifically where and what my errors are as I type! Just double click on the error, and you are taken directly to the exact line and location in your code! Error-checking couldn’t be easier, and we all know how hard it can be to debug a program because of a small error like a missing comma or semicolon…
Not only that, but advanced editing support for TypeScript 2.x by Angular IDE allows me to develop more simply and efficiently. I can navigate through my TypeScript files and find information on just about any part of my code. And the coolest part is the information provided is based on an analysis of my code specifically and how I am using it in my application. The auto-completion of code across your project is also one of my favorite tools. Coupled with the CodeMix editor, I now have a more intelligent approach in my code validation along with more appropriate variables suggestions as I type! I can enjoy the simplicity of TypeScript and feel confident about the variables I am using. It’s a real productivity boost and almost as if the code were writing itself.
Furthermore, Angular IDE provides rich HTML template validation to keep coding moving:
Validation inside custom Angular attributes
Detection of misdefined Angular element tags
Auto-complete for HTML elements
Auto-complete for TypeScript expressions in templates
Seamless launching of ng serve from the IDE’s Servers view
This is probably my favorite part of the Angular IDE! Terminal+ view is an enhanced local shell, with project context awareness that ensures paths and environment are ready for rapid development. The combos in the view allow you to select a project, and ensure that the right versions of node, npm and the ng (as determined by this project’s settings) are added to your PATH. This allows me to easily use multiple versions of these tools across different projects, without having to worry about incompatibilities that could be caused by managing projects using different versions! I also really enjoy this feature because I don’t have to navigate out of my workspace to take advantage of the Angular CLI!! This has saved me time and has enhanced my productivity, as I can always stay focused on my code without interruption.
CodeLive, Live Preview & Wizards
LOVE CodeLive – The enhanced CodeLive flows even allow jumping to a corresponding component source right from within the browser the application is being rendered in.
I needed to add a service in my Angular project to allow my LoginComponent to interact with the database (MongoDB) to see if the logged-in user is valid or not. So it will need to make API calls. The Angular IDE provides a wizard to quickly create a new service, or you can type `ng g s servicename` in the Terminal and create one as well!
Ever created a beautiful web page only to later discover it’s not so pretty in another browser? Live Preview takes the guesswork out of web development – just save your CSS and HTML pages, and the page automatically reloads in the browser, saving loads of time.
Changing my login page from looking like this …
Finally, I needed to add a service in my Angular project to allow my LoginComponent to interact with the database (MongoDB) to see if the logged-in user is valid or not. So it will need to make API calls. The Angular IDE provides a wizard to quickly create a new service or you can type `ng g s servicename` in the Terminal and create one as well!
To conclude, Angular IDE, coupled with CodeMix, has really helped optimize my Angular development. Thanks to its plethora of development tools, CodeMix has filled all the gaps and has greatly improved my coding environment – on top of it all, I don’t ever have to navigate out of my code. It has also been incredible to be able to test my newly-built web apps simultaneously across different platforms. My Angular projects are powerful and user-friendly as a result, and my Angular development experience couldn’t feel more rewarding.