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 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.
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!