Learn the core concepts, advantages, and drawbacks of all three major web frameworks: Angular, React, and Vue.
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 uses components just like React and are the main building block 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: 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.
Content to render when condition is true.
That’s just the tip of the iceberg - there are all sorts of templating options available.
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.
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.
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 challenge is Angular’s 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.
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
From there, follow this tutorial to learn the fundamentals of Ionic app development by creating a real app step by step.
- 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
- Unfamiliarity with Typescript can be a barrier.
- Opinionated technology choices may be a turn off for some.
Angular 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.
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.