AngularJS - Frontend Web Development

June 18, 2021

Today I will give you a brief introduction about AngularJS, which is a JavaScript MVC framework maintained by Google, which began to be used for the development of the Front End of a web application which I am currently working with.

My biggest experience for the frontend web application development has been with the library jQuery, my personal opinion is that it has become an indispensable knowledge today for both developers and web designers. Unfortunately, the use of this library does not require you to implement any kind of pattern development, allowing freedom to generate code, which can be difficult to sustain over time and low level of modularity and scalability.

For those who want to implement a pattern and ideology of work all under objects, I recommend using AngularJS.

Although the first version is 2009, it has become very popular in late 2012 and now in 2013 is booming, while there is talk of a new technology stack as it was before LAMP (Linux + Apache + MySQL + PHP) now the tendency is MEAN (MongoDB/Mongoose + ExpressJS + AngularJS + NodeJS), which also translates to JavaScript End-to-End applications.

Basic concepts

AngularJS application consists of controllers, and each includes a part of the application. Angular allows to manage what is known as SPA (Applications of one page), its main modules is the routing, which allows you to define whether it is a valid path, the view and the controller to be used for that route.

The connection between the controller and the view is the scope $, which are like objects that are shared between the view (html templates) and patterns, something like what they call ViewModel in the MVVM pattern, each time you update a a controller model this value is updated in the view as well.

There are directives that encapsulate reusable blocks of code, which may even have some logic as used within the HTML, ie, they extend HTML, AngularJS already includes many useful guidelines, but you can create your own.

Angular many things are related to a view, and it can be used as templates, the most common is to connect drivers and directives templates.

There are also filters that can be used to give a format your variables, for example you can apply a date format to a numeric value in milliseconds, in this case AngularJS comes with some but you can create your own. Another related concept is that we use with the ng-repeat directive, this directive allows repeated HTML elements based on an arrangement and filters help us define which items are displayed.

AngularJS provides modules to organize your code, it is an excellent tool, you can actually create modules and include them in others, it often helps to better divide the project files.

Note: When you create a module is done with the angular.module function, it is called the module and its dependencies, if there are no dependencies must pass an empty array, it is very important this parameter or your module does not work.

Dependency injection.

All in AngularJS is handled using dependency injection, in fact the same services that come with AngularJS must be injected to be used, as well as modules created by t.

This way of working AngularJS does so in a very simple way and he will automatically inject what you need, for example, any driver needs to work with $ scope, and just simply add the $ Variable scope as a parameter of our function and AngularJS it will handle whatever is necessary to inject.

Some tips and advice.

We must stop thinking in terms of JQuery, AngularJS requires you to change your mindset a little when programming, to start stop thinking about changing values in the DOM and think more about objects and values of its attributes.

One of the disadvantages is the documentation, since it is not intended for users uninitiated but there are good tutorials and community grows increasingly, so if you do not understand or want to see a working example there are hundreds on the web.

Then I leave a basic example where an object is handled, used filters and basic benefits offered to develop angular shown.

App.js

[prism:javascript] //archivo app.js

//declaring the application of angular with outbuildings

    // angular.module('nombre-modulo',['dependencia','libreria'])
    var app = angular.module('app',[]);

    //declaring a controller
    app.controller('appCtrl',function($scope){

        //initializing objects
        $scope.usuarios = [{nombre : 'Juan', edad : 29}, {nombre : 'Henry', edad : 28}, {nombre : 'Martin', edad : 31}];
        $scope.nuevoUsuario = null;

        //declaring controller functions
        $scope.agregarUsuario = function(){
            $scope.usuarios.push($scope.nuevoUsuario);
            $scope.nuevoUsuario = null;
        };

        $scope.eliminarUsuario = function (index) {
            $scope.usuarios.splice(index,1);
        };

    });

[/prism:javascript]

HTML

[prism:markup]



Buscar:

Nombre: {{ u.nombre }}
Edad: {{u.edad}}
Eliminar

[/prism:markup]

Have you used Angular for an application?