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