You are starting to set up new web application and you are wondering what tools use on frontend?
Or maybe you are not happy with current solutions and you are looking for something better and easier?
Or you just want to be up-to-date with new technologies and not to be behind everyone?
If you say „Yes” for at least one of these questions, this article is just for you! Framework, which resolves your problems and which you are looking for is Angular.
Angular is open source Javascript framework, developed by Google. It’s used by thousands of developers around the whole world thanks to its simplicity and huge number of solutions for different problems which frontend developers are facing. Let’s look at main ideas of Angular:
- modules and components,
- automatic two-ways binding between model and view,
- directives,
- dependency injection.
Let’s try to describe each point more precisely.
Modules and components – foundation of Angular
Modules can be described as „blocks”, which create whole Angular’s code combined together. Thanks to that idea, we don’t have to implement everything in one place. We can split business logic on different, independent parts what helps us to create well-organised code. In modules we can store components or directives which are resposible for some part of application. How can we create module? Let’s look at following example:
@NgModule({ imports:[] declarations:[], bootstrap: [] }) export class AppModule{}
We are using @NgModule annotation to define module. In above example we’ve created module „AppModule”. We need to pass following parameters with that annotation:
- ”imports” : list of modules, which we want to use in our module,
- ”declarations” : list of components, directived etc, which are part of our module,
- ”bootstrap” : main component of our module, it’s some kind of root component of all.
Concept which is strongly connected with module is component. It’s some kind of part of application which is responsible for only one functionality. It contains view and buissness logic. Let’s look at following example:
@Component({ selector: 'my-app', template: `<div> <h1>{{appTitle}}</h1> <div>Example!</div> </div> `, }) export class AppComponent{ appTitle: string = 'Welcome'; }
We define component using @Component annotation. As parameters we need to pass selector, which helps us to activate logic of our component, and view, which we display on our html site.
To be able to provide logic of our component we define class „AppComponent”. Now, easily we can use our component to display our view with title „Welcome” and text „Example!”:
<my-app></my-app>
Variables always up-to-date – two way binding
Strong point of Angular is concept of two-way binding. What is it about? When some variable is changed on the view or in the component then automatically is refreshed in second part accordingly. We don’t have to update or refresh anything by ourselfs. Angular does it easily using built-in directive ng-model. Let’s assume that we’ve got following line on our site:
<input [(ngModel)]=”name”/>
Then…wait the minute, actually this is everything what we need to be able to use two-way binding 😉 Every time when user change text in above input, variable „name” is changed in component. The same situation happens in opposite direction: when we change variable in component using buisness logic then we are able to see that change in above input and therefore on our html site.
Directives – HTML on steroids
Directives are additional elements or attributes, which we can use to extend functionality of elements in DOM model. We can choose them from set of directives which are created by Angular’s authors. But we can also create our own directives and associate our own logic with them. First, let’s look at the most popular built-in directives:
- ngIf – adds or removes element depending on passed condition:
<div ngIf=”condition to check”> This element is visible when condition is true </div>
- ngFor – iterates list of elements which is passed to directive:
<div ngFor=”let student of group”> There is {{student}} in the group. </div>
In this case we display all students, which are saved in „group” list.
- ngSwitch – choose proper functionality depending on input data:
<div [ngSwitch]="hoverOver.position"> <h1 *ngSwitchCase="Position.FIRST">{{hoverOver.name}} is winning!</h1> <h3 *ngSwitchCase="Position.LAST">{{hoverOver.name}} is losing!</h3> <h2 *ngSwitchDefault>{{hoverOver.name}} has {{hoverOver.count}} votes</h2> </div>
As written before, we can create our own directive with our own implementation. Let’s look at following example:
@Directive({ selector: '[myHidden]' }) export class HiddenDirective { constructor(el: ElementRef, renderer: Renderer) { renderer.setElementStyle(el.nativeElement, 'display', 'none'); } }
Let’s focus on places strongly connected with creating own directive. Crucial is first line: here we are pointing that we’re going to create our own directive named „myHidden” using @Directive annotation. But what exactly we are achiving by creating this directive? We can see it on 4th line: we set „display” attribute to „none”, so we can just hide element. But how can we use it? By just putting name of directive as attribute of element:
<p myHidden>This Information is hidden</p>
Splitting dependences by using injection
Dependency injection is design pattern which is getting more and more popular by time. It defines rule related to organization of dependencies. Idea is following: objects get created before and ready to use instances of dependent objects. It’s opposite of idea where object creates everything what its need to provide its functionality. In dependency injection objects are called when they are needed. Perfectly describes it „Hollywood’s rule”: „Don’t call us. We will call you”. What are we achiving thanks to that idea? We’ve got a code where each object is managing only this what is created for. It doesn’t care about how to create other objects which are needed for its functionality. Another advantage of that concept is fact that we gather loose coupling between object and because of that we can easily create tests for our app. How we can use depenedency injection in Angular? It’s very simple 😉 All we need to do is annotate class, which we want to use in another place by @Injectable():
@Injectable() export class dependencyExample { getGreeting(): string { return "Hello world"; } }
Now, in each component, which we want to use our „dependencyExample”, we need to import it and add to „providers” list:
import { dependencyExample } from './app.service'; @Component({ selector: 'my-app', template: '<div>{{value}}</div>', providers: [dependencyExample] })
Now, we can start using whole logic of „dependencyExample” in our new component.
In this article we presented just some basis information about Angular. It provides plenty of other useful techonologies which you can easily use in your web application. I encourage you to get more familiar with Angular. Have fun!