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? Angular v4 features?
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 – Angular v4 features
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 Angular v4 features 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:Angular v4 features
<p myHidden>This Information is hidden</p>
Summary
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!
Our mission is to support startups in achieving success. Feel free to reach out with any inquiries, and visit our blog for additional tips. Tune in to our podcast to glean insights from successful startup CEOs navigating their ventures.