Coleção AngularJs Meetup South London | Este artigo
Não vou dizer por quê, mas como. Se você ainda está curioso ou se sentindo inseguro, vá para os links na parte inferior. Agora que limpamos o ar, vamos ver como fazer.
Acho útil ver RequireJs cuidando de dependências de arquivo e o sistema de módulo Angular cuidando de instâncias com seu mecanismo de DI. RequireJs garante que um arquivo seja carregado antes de fornecer o controle a você.
Mudanças em index.html
Existem algumas coisas a serem levadas em consideração.
Adicionar script RequireJs
Primeiro, precisamos incluir uma referência a RequireJs usando a tag de script da seguinte maneira. Escolha sua configuração preferida abaixo.
<!-- basic setup -->
<script
data-main="main"
src="local/path/require.js">
</script>
<!-- advanced setup: using public CDN with local file fallback -->
<script data-main="main" src="http://requirejs.org/docs/release/2.1.14/minified/require.js"></script>
<script>window.require || document.write('<script data-main="main" src="local/path/require.js"></script>')</script>Estamos dizendo ao RequireJS onde encontrar sua configuração com o atributo data-main do elemento script.
Observe como omitimos a extensão .js. É assim que RequireJs identifica arquivos por padrão.
Mudanças angulares
Precisamos fazer algumas mudanças, para atrasar o bootstrap Angular, até que RequireJs termine de carregar todas as dependências do arquivo.
Remova a diretiva ng-app. Iremos inicializar o Angular na página manualmente.
Adicione a classe ng-cloak ao elemento body e defina ng-cloak no arquivo css do seu site. Isso evitará que as chaves duplas apareçam brevemente em dispositivos lentos.
Arquivo de configuração RequireJs – main.js
Em main.js, definimos as opções de configuração e inicializamos o Angular usando uma função init dentro do arquivo app.js Angular padrão.
// Configuration Options
require.config({
baseUrl: 'local/path',
// paths: maps ids with paths (no extension)
paths: {
'angular':
['https://code.angularjs.org/1.3.5/angular',
//fallback if CDN location fails
'local/path/angular']
},
// shim: makes external libraries reachable
shim: {
angular: {
exports : 'angular'
}
}
});
// Angular Bootstrap
require(['app', 'services', 'controllers'], function (app) {
// initialisation code defined within app.js
app.init();
});Nesta configuração, usamos os arquivos services.js e controllers.js para manter nossa lista de serviços. Você pode querer usar arquivos individuais para granularidade extra.
Usamos require () para carregar dependências antes de executar nosso código.
Mudanças no app.js
Encapsulamos nosso módulo de aplicativo com define tendo apenas uma dependência do angular. Além disso, criamos uma função init para inicializar manualmente o angular em nossa página.
define(['angular'], function (angular) {
var app = angular.module('myApp', []);
app.init = function () {
angular.bootstrap(document, ['myApp']);
};
return app;
});Retornar nossa instância de aplicativo nos permitirá reutilizá-la em qualquer um de nossos módulos angulares
Usamos define () para definir nossos módulos. Isso pode carregar dependências e retornar uma instância para nosso módulo.
Mudanças nos Módulos Angulares
Até o momento, cobrimos apenas nossa aplicação Angular, mas deixamos de fora outros módulos Angular (diretivas, filtros, serviços, controladores). Para criar nossos módulos, iremos envolvê-los usando define.
define(['app'], function(app) {
app.controller('MainController', ['$scope', 'Time', function ($scope, Time) {
$scope.time = Time.getTime();
}]);
});MainController
Em nossa configuração, não precisamos adicionar uma dependência de timeService.js, pois services.js já a inclui, por isso será carregado antes do bootstrap e da instanciação do ng-controller.
Sequência de carregamento
Esta é uma revisão de tudo o que está acontecendo
- O arquivo index.html é carregado.
- Todos os arquivos src / href de tags de script e link são carregados.
- Assim que o require.js for carregado, segue main.js.
- A configuração de RequireJs está definida. A solicitação inicial carrega todas as dependências e subdependências: app.js, services.js, controllers.js.
- O arquivo app.js carrega e define carrega angular.js e cria nossa instância de aplicativo Angular.
- O arquivo services.js e controllers.js são carregados com todas as subdependências.
- app.init é chamado e o bootstrap angular entra em ação.
- A página é verificada em busca de diretivas, o ng-controller é encontrado e instanciado via DI. Todos os módulos referenciados são instanciados.
Recursos
Por que usar RequireJs? - RequireJs define API - Site do RequireJs
Código de demonstração: link