Introduction to Angular and what are the benefits of using it
By Mario Kandut
Angular is a framework, or more generic, a tool to build interactive websites, and has many alternatives, React, VueJS, Svelte, EmberJS, even jQuery can be considered an alternative. There is AngularJS and there is Angular, these two are very different. This article is about Angular.
Angular uses semantic versioning and it starts with version 2. The next version is version 4. 🤣
💰 Start your cloud journey with $100 in free credits with DigitalOcean.
Let me explain: The Angular team was working parallel on a router, so Angular 2.0 and Router 2.0, but because of breaking changes the Router got pushed to 3.0 and Angular remained at 2.0, so the router was one version ahead of Angular. To remove the inconsistency that the router is always one version ahead they skipped version 3 of Angular.
The Angular CLI is very powerful, so let's create a Hello World app with the CLI.
Install the Angular CLI:
npm install -g @angular/cli
Create a workspace and initial application with the name
ng new command scaffolds your application and installs all required node packages.
ng new hello-world
Run the application
cd hello-world ng serve --open
The --open (or just -o) option automatically opens your browser to http://localhost:4200/. The standard port in Angular applications is 4200.
There are several benefits and features of Angular, some a very subjective and the list is by far not complete.
General benefits, when choosing any framework are:
Angular specific benefits:
Some features of Angular are:
Components are the main building block for Angular applications. Each component consists of:
A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view, and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM. Directives have a similar lifecycle, as Angular creates, updates, and destroys instances in the course of execution.
Your application can use lifecycle hook methods to tap into key events in the lifecycle of a component or directive in order to initialize new instances, initiate change detection when needed, respond to updates during change detection, and clean up before deletion of instances.
In Angular, a template is a chunk of HTML. Within a template, you can use special syntax to leverage many of Angular's features.
Each Angular template in your app is a section of HTML that you can include as a part of the page that the browser displays. An Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality.
When you generate an Angular app with the Angular CLI, the app.component.html file is the default template containing placeholder HTML.
Angular offers two kinds of built-in directives: attribute directives and structural directives.
Dependencies are services or objects that a class needs to perform its function. Dependency injection is a design pattern in which a class requests dependencies from external sources rather than creating them.
The dependency injection by Angular provides dependencies to a class upon instantiation. You can use it to increase flexibility and modularity in your applications.
An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.
A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
The Angular Language Service provides code editors with a way to get completions, errors, hints, and navigation inside Angular templates. It works with external templates in separate HTML files, and with in-line templates.
Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut.
4 min read
Use Material Icons via Google Web fonts or host locally
4 min read
Handling user input with forms in Angular
3 min read
Translate Angular`s MatPaginator (Material Design Components)