Over the next several posts I hope to write about Angular. This is a framework I have been using for some front-end development and it has been very enjoyable. I hope you learn something from it.
Angular is a framework to build web applications. It was created and is still maintained by Google. The main language used by Angular is TypeScript. You can use other languages, but TypeScript is the ideal. If you do not know TypeScript, it is a superset of JavaScript. You can perform some modern web application tasks and have it compiled in such a manner that it can be consumed by all browsers. I might delve more into TypeScript down the road.
Angular Advantages
Angular is structured in such a way to aid in easier maintenance. It utilizes a component and class-based structure. You modularize your code in a hierarchal structure. It also has simple declarative templates.
- Hierarchal – Angular architecture is built with a hierarchy of components
- Syntax – Angular has specific syntaxes for binding of events and properties
- Dynamic loading – Angular loads items into memory at run-time and then unloads them
- Callbacks with iteration – Angular uses the RxJS library to make asynchronous calls
- TypesScript – Angular uses ES6 and the superset of TypeScript
The aforementioned list is but a “smidge” of what Angular offers.
Angular Architecture
So how do we build an Angular application? What is involved in creating the structure?
- NgModules – Angular applications are comprised of at least on NgModule and many times more. NgModule declares the compilation context for components that are used in the application.
- Components – Angular components are basically classes that contain application data and logic. Typically, each component also has an associated HTML view.
- Templates – Angular uses HTML view templates to combine HTML markup with the data inside the component class to display the information to the user.
- Directives – Angular directives attach behavior to DOM elements.
- Data-binding – Angular can bind the parts of the template with the component. This can be one-way or two-way.
- Services – Angular services are classes that allow for greater modularity where the code is reusable across the application, but is defined and narrow in scope.
- Dependency Injection – Angular uses dependency injection to give components the functionality and data it needs to perform its tasks.
- Routing – Angular provides detailed and extensive routing to customize the navigation for the end user. You can even preload data as a part of the routing!
