The Value of Adding AngularJS to your Development Stack by Dan Wahlin

Home > Videos > Web Development > The Value of Adding AngularJS to your Development Stack by Dan Wahlin

The Value of Adding AngularJS to your Development Stack by Dan Wahlin

Like This Video 0 54 Dan Wahlin
Added by February 6, 2016

AngularJS is one the hottest JavaScript group frameworks available today. Is it worth adding it to your development stack? That’s what we’re going to address in this video.

What’s so compelling about AngularJS anyway? First, it’s a client-side JavaScript framework with one core script. You won’t have to integrate a ton of third‑party scripts into your applications and then worry about whether or not those scripts are going to be compatible in the future. AngularJS is supported by a full‑time team at Google and has over 800 individual open-source contributors as well.

With AngularJS you can send and retrieve data from RESTful services, minimize code significantly by using data binding, provide a way to organize code and allow teams to work together more efficiently, switch between application screens quickly without reloading the entire page, create unit tests to ensure your code is working properly, validate data submitted by users, and, well, I could go on and on. It has a lot of great features baked into the framework.

For me, the power of AngularJS is that you can create snappy, single-page applications very quickly and they perform like they were built for the desktop. The code is flexible. It’s easy to deploy, update, and reuse. A great side benefit is the any app can be used on multiple devices.

Let’s talk about three key scenarios where AngularJS can be leveraged in the real world. Also discuss the AngularJS End-to-End SPA Development class at Interface Technical Training and how it can help you learn this powerful framework quickly and efficiently and at a professional level.

The scenarios that we’ll discuss include how to maximize productivity, write less code, and make your code more powerful and easier to maintain. How to migrate from existing technologies and allow apps to run on multiple devices and finally, how you can leverage AngularJS features to replace desktop applications with cross‑device web applications.

Let’s jump right into scenario one.

I was recently teaching a small team from a large global electronics manufacturer who is building an enterprise‑scale lab that was going to be used by a lot of people throughout the company. They had previously done most of their web development using jQuery and needed more of a framework for the new application.

JQuery is arguably the most popular client-side JavaScript library in existence and for good reason. I’ve used it for many years and I love it. I love what it does as far as making AJAX calls, manipulating the DOM, handling events, and of course you can animate objects.

For all its strengths it does have a few weaknesses. For example, if you have a form with 10 controls in it, say eight text boxes and two dropdowns, then with jQuery you’re looking at writing a minimum of 20 lines of code just to get data in and out of the controls. What if the IDs are CSS class name changes on your controls? You end up having to modify your JavaScript code to accommodate the name changes. That’s a little bit challenging.

I call this a control oriented approach since your code relies heavily on the IDs defined on the controls. You’re always interacting with the controls to get data into and out of them. With AngularJS you can take advantage of a newer and more modern development technique, I like to call the data oriented approach.

Using the data binding functionality built into Angular you can wire up property values to controls and when the property values change the controls change. Likewise, if the controls change, the property values change. It’s quite magical actually. Once the data binding is in place you can modify the styles of controls, change their visibility, change their values, and do much more by changing property values.

By using the data oriented approach you don’t care about the ID or the CSS class on the control any longer. In fact in many situations you won’t need to give your controls an ID. Imagine how much code you can cut from your web applications. To top it off jQuery plays nicely with AngularJS in case you want to leverage specific jQuery features.

I know many companies have used Adobe Flex and Microsoft Silverlight so that they can have a 100 percent control over the application, but still have the ability to deploy it through a browser. It’s no secret that both Flex and Silverlight are getting less emphasis nowadays, especially since they don’t run on all devices.

What’s the alternative? If you’re thinking about migrating from Adobe Flex or Microsoft Silverlight then AngularJS is a natural transition. You’ll actually be pleasantly surprised at how many concepts carryover such as data binding, a declarative syntax, animations, and much more.

Once you understand the core features provided by AngularJS you’ll be extremely productive in no time at all. Now keep in mind there are other alternatives out there such as Ember.js, Backbone, Durandal, et cetera. The good news is that many of the same concepts carryover. For me personally, I like AngularJS for all the reasons I’ve mentioned up to this point.

For the final scenario, I worked with an international financial company who has a large desktop application installed base. They want to simplify the process of deploying their apps due to the number of devices being used in the organization, especially since the desktop apps won’t run on all these devices.

Traditional applications weren’t a good fit for the web since every user action caused the entire page to reload. With AngularJS, however, you can build snappy single-page applications to feel much more like desktop applications, but they have the added benefit of being able to run on tablets, phones, and other devices that employees may be using.

Here’s the actual app that you’ll be building in the AngularJS End‑to‑End course at Interface Technical Training. You’ll actually put together all the pieces yourself. For instance, you’ll incorporate RESTful services and database interactions, AJAX calls from AngularJS to those services, and learn about all the great functionality provided by AngularJS on the client-side such as data binding, validation, factories and services, custom directives, controllers, scope and more.

The app that you’re building in class will perform much like a desktop application, but it’s going to be able to run on any device. The AngularJS End‑to‑End development course will provide you with all the skills needed to build single page applications, enhance productivity and code reuse, and provide that desktop‑like feel with a web deployment model.

You’ll be able to ask all the questions you want throughout class to ensure that you take away the best practices used by some of the biggest companies in the world as they build AngularJS applications.

There you have it, three real‑world examples where AngularJS can be used to streamline the development of web applications and a summary of interfaces in End‑to‑End class. You’ll actually build an app from start to finish and learn to leverage the power of AngularJS at a professional level.

Now, the course can be attended here in Phoenix, AZ or online using our amazing RemoteLive™ technology. Check out the course outline for more details and I hope to see you soon in class.

Dan Wahlin
Web Development Instructor
Interface Technical Training

Videos You May Like

A Simple Introduction to Cisco CML2

0 3904 0

Mark Jacob, Cisco Instructor, presents an introduction to Cisco Modeling Labs 2.0 or CML2.0, an upgrade to Cisco’s VIRL Personal Edition. Mark demonstrates Terminal Emulator access to console, as well as console access from within the CML2.0 product. Hello, I’m Mark Jacob, a Cisco Instructor and Network Instructor at Interface Technical Training. I’ve been using … Continue reading A Simple Introduction to Cisco CML2

Creating Dynamic DNS in Network Environments

0 646 1

This content is from our CompTIA Network + Video Certification Training Course. Start training today! In this video, CompTIA Network + instructor Rick Trader teaches how to create Dynamic DNS zones in Network Environments. Video Transcription: Now that we’ve installed DNS, we’ve created our DNS zones, the next step is now, how do we produce those … Continue reading Creating Dynamic DNS in Network Environments

Cable Testers and How to Use them in Network Environments

0 735 1

This content is from our CompTIA Network + Video Certification Training Course. Start training today! In this video, CompTIA Network + instructor Rick Trader demonstrates how to use cable testers in network environments. Let’s look at some tools that we can use to test our different cables in our environment. Cable Testers Properly Wired Connectivity … Continue reading Cable Testers and How to Use them in Network Environments

Write a Comment

Share your thoughts...

Please fill out the comment form below to post a reply.