AngularJS - Frontend Web Development

Today, I will provide a brief introduction to AngularJS, a JavaScript MVC framework maintained by Google. It's used for developing the front end of web applications, and I’m currently working with it. My main experience in frontend development has been with jQuery. In my opinion, jQuery is essential knowledge for both developers and web designers today. However, jQuery doesn't require any pattern implementation, allowing freedom in code generation. This can lead to sustainability issues over time, as well as low modularity and scalability.

If you're looking to implement a pattern-based approach and an object-oriented ideology, I recommend using AngularJS. Although it was first released in 2009, it gained significant popularity in late 2012 and is booming in 2013. Nowadays, there’s talk of a new technology stack replacing the traditional LAMP (Linux + Apache + MySQL + PHP). The trend is now MEAN (MongoDB/Mongoose + ExpressJS + AngularJS + NodeJS), which translates into JavaScript end-to-end applications.

Basic Concepts of AngularJS

An AngularJS application consists of controllers, each handling a part of the application. Angular allows developers to manage SPAs (Single Page Applications). One of its core modules is routing, which defines valid paths, the view, and the controller used for each route. The connection between the controller and the view is through the $scope, which are objects shared between the view (HTML templates) and patterns, similar to the ViewModel in the MVVM pattern. Whenever a model in a controller is updated, the view reflects the change immediately.

AngularJS also includes directives, which are reusable code blocks that may contain logic and are used within HTML, effectively extending it. While AngularJS comes with many built-in directives, you can create your own as needed.

Templates are closely related to views in AngularJS. They are used to connect controllers and directives. There are also filters to format variables, such as applying a date format to a numeric value in milliseconds. AngularJS offers some built-in filters, but custom ones can be created.

Another essential concept is the ng-repeat directive, which allows repeating HTML elements based on an array. Filters help define which items are displayed. AngularJS also provides modules to organize code effectively, allowing you to create and include modules within others for better project file management.

Note: When creating a module with the angular.module function, specify the module name and its dependencies. If there are no dependencies, pass an empty array. This parameter is crucial for the module to function correctly.

Dependency Injection

AngularJS uses dependency injection for almost everything, including its built-in services and user-created modules. Dependency injection simplifies the process, as AngularJS automatically injects the necessary components. For instance, any controller that needs to work with $scope only needs to add $scope as a parameter, and AngularJS will inject it accordingly.

Tips and Advice

1. Change Your Mindset: Move away from jQuery-like thinking. AngularJS requires a shift in mindset when programming. Instead of directly manipulating DOM elements, focus on objects and their attributes.
2. Documentation and Learning Resources: While AngularJS’s documentation might not be suitable for beginners, there are numerous tutorials and a growing community. If you don’t understand something or want to see a working example, plenty are available online.

Basic AngularJS Example

Below is a basic example that demonstrates handling an object, using filters, and showcasing the basic benefits of developing with AngularJS.

App.js

// File: app.js
// Declaring the AngularJS application without dependencies
// angular.module('module-name',['dependency','library'])
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);
   };
});

HTML

<form ng-submit="agregarUsuario()">
   <label>Nombre</label>
   <input type="text" ng-model="nuevoUsuario.nombre">
   <label>Edad</label>
   <input type="number" ng-model="nuevoUsuario.edad">
   <button type="submit">Agregar Usuario</button>
</form>
<ul>
   <li ng-repeat="u in usuarios">
       Nombre: {{ u.nombre }} <br>
       Edad: {{ u.edad }}
       <button ng-click="eliminarUsuario($index)">Eliminar</button>
   </li>
</ul>

Have You Used AngularJS?

Have you ever used AngularJS for an application? If so, what has your experience been like?

We recommend you this video