Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
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...

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.

A Day with Dani: Python Support at Its Best

Related Posts

Angular 5, Firebase, and Angular Universal: Creati... We will be creating a blog using Angular 5, and Firebase in a 3 part series - our app will allow for easy creation and publishing of blog posts. A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. In order to improve the user experience, we want to render the pages server side and send the g...
Angular 5, Firebase, and Angular Universal: Creati... We will continue from where we left off in the first article. In this part of the article, we will add the markdown editor for authoring posts on our blog, and we will set up Firebase for authentication and persisting data to remote storage. Let’s get started!Starting a New Cloud Firestore ProjectOpen the Firebase console and sign in to your Google...
Vue Example: Creating a TODO App using Vue.js 2, V... Looking for an efficient way to create web apps? Look no further—CodeMix is here to give you an entirely new experience. The following video shows you how to create a Vue example app, created in Eclipse powered up by CodeMix. CodeMix is an Eclipse plugin that unlocks a wide array of technologies from VS Code and add-on extensions built for Code OSS...
Angular Elements Made Simple with CodeMix Angular has been one of the best front-end JavaScript frameworks for some time now, and one of the many reasons is their continued effort to bring to developers new and improved ways to get the job done. One such effort is Angular Elements, which were introduced in Angular v6. In a nutshell, they convert components to HTML elements (+ JavaScript), ...

Posted on Sep 17th 2018