Your Internet Explorer version is not compatible with our shopping cart system. Please use version 9 or higher to avoid problems with your order(s). Close
Dani Faris
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
Now that I’ve acquired a pretty good amount of knowledge with Python, I have decided to test the waters of Angular development. Already being familiar with CSS, HTML and JavaScript, I was advised to start looking into learning this language. I love working with web technologies, so I went ahead and took an Angular crash course to get me started. After completing the course, I recommend this class to any busy developer – the instructor is awesome and really breaks down the core concepts of Angular and makes them easy to understand. Just make sure you have some experience with using TypeScript on top of knowing some basic CSS, HTML and JS.
Angular Development Taken Further with Angular IDE & CodeMix
Foremost, Angular got its name from the angle <> brackets that surround HTML tags. The purpose of this language was to make it easier for developers to build applications that involved collecting data and doing powerful things with it. Angular isn’t the simplest nor smallest JavaScript framework, so in order to optimize my learning road map, I sought out a way to really isolate my development environment to allow me to focus specifically on Angular. Due to my rewarding experiences with Python, thanks to CodeMix, I knew I would want this plugin installed into the IDE I would be using to start my Angular development. It turns out there is an IDE focused entirely on Angular development – Angular IDE! Initially I was using the Angular extension pack in Eclipse, but immediately switched over to Angular IDE because it automatically installs everything you need to get started on working with Angular promptly. I also installed CodeMix for Angular 6 support, and support for more recent versions of TypeScript (psst. very soon this won’t be necessary).
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
Terminal+
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 …
To 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!
In Conclusion
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.
