Utilizando AngularJS com RequireJS

30 jan

Fala galera,

Hoje venho falar sobre AngularJS com RequireJS.

O RequireJS é uma biblioteca para se carregar scripts javascript de forma assíncrona, ou seja, ele é um script loader. E por que devemos usar uma biblioteca javascript para se carregar outra biblioteca javascript? Simples Modularização. 

O conceito de Modularização é bastante falado hoje em dia, esse conceito parte da premissa no qual devemos criar módulos ou seja pequenos pedaços de códigos gerenciáveis e com alta manutenibilidade. Esses pequenos pedaços de códigos representam uma porção de um sistema. Esses módulos tem a responsabilidade de responder por alguma funcionalidade ou regras de negócios dentro de um sistema.

Beleza, e o que tem nossos scripts javascript a ver com isso ? Tudo. O RequireJS é uma biblioteca AMD (Asynchronous Module Definition), ele carrega nossos scripts de forma assíncrona ou seja carrega nossos scripts sobre demanda a medida que nossos scripts necessitam de alguma dependência, tornando nossa aplicação web mais rápida pois não precisamos carregar sempre todas as dependências de uma vez.

Então venho aqui como utilizar o AngularJS com o RequireJS e fazer nossos scripts AngularJS ser carregado de forma assíncrona.

Configurando o RequireJS

Primeira coisa que devemos fazer é configurar o RequireJS para utilizar o AngularJS. Vamos criar um arquivo de configuração do RequireJS, nele será colocado todas as bibliotecas que iremos utilizar, neste caso, estarei utilizando JQuery, UnderscoreJS e o AngularJS

require.config({
    baseUrl: "/Scripts",
    paths: {
        "jquery": "vendor/jquery/jquery",
        "underscore": "vendor/underscore/underscore",
        "angular": "vendor/angular/angular",
    },
    shim: {
        underscore: {
            exports: "_",
        },
        jquery: {
            exports: "$"
        },
        angular: {
            deps: ["jquery"],
            exports: "angular"
        },
    }
});

Pronto, nosso arquivo de configuração do RequireJS está preparado para uso.

Configurando o Modulo AngularJS

Com o nosso arquivo de configuração do RequireJS pronto para uso, devemos configurar o módulo do AngularJS. 

Vamos ao código.

define([
    'jquery',
    'angular',
    'underscore',
], function ($, angular, _) {
    var app = angular.module('app', []);
    return app;
});

Notem o uso da função define do RequireJS, esse comando tem como funcionalidade dizer ao RequireJS que se trata de um módulo javascript e que ele será carregado sobre demanda.

Criando nosso Controller AngularJS como AMD

Agora que temos o módulo AngularJS pronto, vamos criar nosso Controller.

Vamos criar um controller simples com uma mensagem de Hello World AMD.

define([
    'jquery',
    'angular',
    'underscore',
], function ($, angular, _) {

    var helloWorldController = function ($scope) {
        $scope.message = "Bem vindo ao AngularJS AMD";
    };

    helloWorldController.$inject = ["$scope"];
    return helloWorldController;

});

 

Juntando Tudo

Pronto, agora que temos tudo pronto devemos juntar todos os pedaços. Para isso basta importar o RequireJS, o arquivo de configuração e fazer a chamada dos módulos, o resto das biblioteca de dependência o RequireJS se vira para carregar por nós.

@{
    Layout = "";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </div>
    <div class="container body-content">
        <br />
        <br />
        <div class="row" ng-controller="HelloWorldController">
            <div class="col-md-12">
                {{ message }}
            </div>
        </div>
        <hr />
    </div>
    <script type="text/javascript" src="~/Scripts/vendor/requirejs/require.js"></script>
    <script type="text/javascript" src="~/Scripts/main.js"></script>
    <script type="text/javascript">
        require(["app", "helloWorldController"], function (app, helloWorldController) {
            app.controller("HelloWorldController", helloWorldController);
            angular.bootstrap(document, ["app"]);
        });
    </script>
</body>
</html>

Pronto, tudo funcionando na mais perfeita ordem, notem que em nenhum momento, precisei carregar os arquivos do jQuery, Underscore e do AngularJS. Isso o RequireJS faz por nós. Para saber mais sobre o RequireJS e suas funcionalides click aqui.

Espero que tenham gostado de como usar o AngularJS com RequireJS. Não deixe de comentar!

Abs e até o próximo post

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *