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 5Dan 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.

You may also like:  JavaScript for C# Developers - September 24, 2014

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.

You may also like:  JavaScript for C# Developers - September 24, 2014

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

Agile Methodology in Project Management

0 13 0

In this video, you will gain an understanding of Agile and Scrum Master Certification terminologies and concepts to help you make better decisions in your Project Management capabilities. Whether you’re a developer looking to obtain an Agile or Scrum Master Certification, or you’re a Project Manager/Product Owner who is attempting to get your product or … Continue reading Agile Methodology in Project Management

JavaScript for C# Developers – September 24, 2014

0 52 0

In this video Dan Wahlin demonstrate the similarities and differences between C# and JavaScript and the future of JavaScript (ES6).

Detailed Forensic Investigation of Malware Infections – April 21, 2015

1 35 1

In this IT Security training video, Security expert Mike Danseglio (CISSP / CEH) will perform several malware investigations including rootkits, botnets, viruses, and browser toolbars.

Write a Comment

Share your thoughts...

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