Back to blog home page

5 Things To Know Before You Get Started With AngularJS

Posted by on Sep 23, 2014

Navigating the AngularJS landscape can be a daunting experience. While the library itself is fairly robust, choices early in the adoption process can have drastic long-term effects on your software development process. Below we present five things that you should know about AngularJS. This information won’t solve every problem you’ll have with the library, but it can help you get off on the right foot.


1. AngularJS is Entirely Client-Side

AngularJS is written in JavaScript, and it functions entirely on the client side. This means two things for your app. First, you can run AngularJS in any browser that can execute JavaScript, making deployment a snap. Secondly, you can drop AngularJS into any project without significant back-end modifications. This greatly reduces the risk in adopting AngularJS for the front-end display of your app. AngularJS is built off of HTML attributes, making enabling processing of data a fairly quick process, though in order to use AngularJS effectively you’ll likely have to rewrite a portion of your presentation layer.

2. AngularJS is Focused on Data

AngularJS is designed to separate your presentation layer from your business logic layer. It ties the HTML structure of a web page into underlying JavaScript data models, and allows the app to make significant changes to the data without performing the typical extensive DOM manipulations used in other JavaScript libraries. AngularJS follows a Model-View-Controller (MVC) pattern, which encourages loose coupling between presentation, data, and logic. The data for a page in an AngularJS application can come from any of the standard locations, including static or dynamic JSON data obtained from a server or a web API call, as well as being hard-coded into the page.

3. AngularJS Provides a Declarative UI

Most modern apps use JavaScript in various ways to present and manipulate the application’s data. This leads to convolutions in logic where the HTML of a web page needs to be nearly constantly modified and rebuilt in order to present information developed using the procedural programming inherent in JavaScript’s design. AngularJS, on the other hand, takes a declarative approach to data presentation that more closely mimics the intent behind the design of HTML. In essence, AngularJS lets you focus on what is presented, as opposed to the procedural focus on how it is presented.

4. AngularJS Data Objects are POJO

All objects in AngularJS are POJOs, which stands for Plain Old Java(Script) Objects. What this means is that you have all the standard functionality of JavaScript available for object manipulation, allowing you to easily add and remove properties from your objects, and make use of all the built-in collection handlers to loop through your data at will. This results in cleaner code that is more quickly understood by developers, and removes the need for adding special case functions to your data objects in order to get the behavior you want.

5. AngularJS is Built for Testing

Unit and functional testing produce more robust, dependable code. AngularJS was developed with this ideal in mind, and is designed from top to bottom to make testing a relatively painless process. AngularJS uses Dependency Injection (DI) to pass information around, allowing your tests to easily override the function calls and inject appropriate mock data. This is important for writing robust unit tests that isolate the functionality being tested. There are also a number of tools built into AngularJS, such as a mock HTTP provider, that make writing larger functional tests a more dependable endeavor. Finally, there are numerous open-source tools for running test suites in AngularJS, including Karma for running tests and Jasmine for behavior-driven testing

Conclusion

AngularJS is a powerful tool which, when used correctly, can make your presentation layer both more maintainable and more robust. With its focus on data-presentation as a declarative effort, it more closely mimics HTML and its robust interpretations across multiple scenarios. By keeping the above items in mind, you can help direct your development organization in how it uses AngularJS to enhance your application’s data presentation, and prevent long-term pitfalls that can add unnecessary costs and complexity to the development process.

Build your Bootstrap + Angular app with Backand today. — Get started now.