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