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
Angular Framework: Components
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.
Content to render when condition is true.
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.
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.
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.
- 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.