Types of JavaScript Frameworks Part 2: Beginner's Guide to Angular

This is part two of a three-part series covering the basics of JavaScript frameworks. We cover React in part one.

Angular JavaScript Framework: Beginner's Guide  

Next up is Angular. It’s widely used in the enterprise with over half of JavaScript developers familiar with it. Angular touts its ability to be used to create both mobile and desktop apps.

Maintained by Google, Angular was originally created in 2009 to address challenges encountered in developing single page applications. Dubbed “AngularJS” (aka Angular 1), it embraced client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architecture. Several years later, Google redesigned it from the ground up, renaming it simply as “Angular” (for versions 2 and above).

Angular Framework: TypeScript

While React uses JSX to let developers pair user interfaces with business logic, Angular uses HTML and CSS along with TypeScript to write out its business logic, a superset of JavaScript. You write the code in TypeScript (ending with a ‘.ts’ file extension) and then your computer transforms that code into JavaScript when the program runs. Some of the benefits include easier debugging and testing but the biggest advantage is from strongly defined types. In TypeScript you have to specify if data is a string, number, or other data type (unlike JavaScript, which has no types - a bit like the Wild West!). Not only does this help developers catch bugs long before they make it into production, large organizations enjoy the extra safety that occurs when a large code base needs to be tested or refactored. That stability is attractive to big companies with large codebases.   

Angular Framework: Components

Like React, the Angular JavaScript framework uses components that are the main building blocks for Angular applications. Each component consists of an HTML template that declares what renders on the page, a Typescript class that defines behavior, a CSS selector that defines how the component is used in a template, and optionally, CSS styles applied to the template. Components are grouped under a module that lets you order components by function, process, or business domain. 

The Angular CLI makes it easy to create new components by typing “ng generate component <name of component>”. That creates a folder in your workspace with the new component’s files. Using the CLI to create components also updates your project’s modules.

Angular Framework: Directives and Templates

Within HTML files you can use Angular’s built-in directives to introduce additional functionality. Directives are similar to attributes in regular HTML elements in that they listen to and modify the behavior of other HTML elements, attributes, properties, and components. For example, NgClass which adds or removes a set of CSS classes or NgStyle for HTML styles. 

Angular templates render a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality. For example, using “ng-” in an element tag can introduce JavaScript expressions allowing for powerful templating. A common expression is “ng-if”, used to create conditional statements that return whatever content that follows if the expression evaluates true:

<div *ngIf="condition">
  Content to render when condition is true.
</div>

That’s just the tip of the iceberg - there are all sorts of templating options available.

Angular Framework: Advantages

Angular's fans sing its praises specifically because of its “batteries included” approach. Some developers love React for the freedom it gives them, but others love Angular for providing everything they need out of the box. This approach reduces cognitive overload and ensures maximum productivity as Angular developers simply focus on building applications quickly. New Angular projects include everything you need to build a great app, including routing/navigation, forms, internationalization support, animations, and progressive web app features.

Angular is a good option for JavaScript developers looking to adopt their first advanced framework, especially those experienced in object oriented programming languages. The strict types and style of code produced by TypeScript classes will be familiar to those used to backend languages like Java or C# - the advantages of which make Angular a popular front-end for projects built with a .NET back-end.

Given Google’s continued investment (shipping new major versions every six months) as well as improved community communication via the public roadmap, Angular remains a strong option, especially in the enterprise, with no signs of slowing down.

Angular Framework: Drawbacks

TypeScript, while increasingly adopted by more projects every day, might be a hurdle for more junior developers. If you are totally new to TypeScript but need to start contributing to an Angular project immediately, then allow yourself some time to get up to speed.

Another Angular drawback is its complexity, which can be a barrier to learning it quickly. There are lots of tools and concepts to learn, including dependency injection, observables and RxJS, and reactive or template-driven forms. Fortunately, it’s easy to get started, with many great tutorials available.

Ionic Angular

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript. Web developers looking to get more from their Angular skills should take a look at Ionic Angular, the native Angular version of Ionic Framework. Not only can Angular developers build great apps for web and desktop, but mobile (iOS, Android) as well. 

The best part of Ionic Angular? It’s just Angular: standard Angular development patterns tightly integrated with standard Angular libraries, and the huge ecosystem around the web platform. Ionic Framework uses the built-in Angular routing and CLI just as regular Angular apps do, so you’ll immediately feel comfortable building Ionic Angular apps using the same libraries and tools you know and love.

Ionic Framework also provides over 100+ prebuilt components that let you quickly build mobile-optimized UIs without having to reinvent the wheel. Getting started is easy:

npm install @ionic/cli
ionic start myApp --type=angular
cd myApp
ionic serve

From there, follow this tutorial to learn the fundamentals of Ionic app development by creating a real app step by step.

Bottom Line

Angular Advantages:

• Robust CLI making it easy to automate new components.
• Strong types keep things organized for large codebases.
• “Batteries included” approach helps developers focus on building apps

Angular Drawbacks:

• Unfamiliarity with Typescript can be a barrier.
• Opinionated technology choices may be a turn off for some.

Angular JavaScript framework is good for developers who:

• Come from an object-oriented programming or enterprise background
• Want to focus on app building rather than tooling

In the third and final part of this series, we cover Vue.

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.