Your SlideShare is downloading. ×
AngularJS com loadOnDemand
AngularJS com loadOnDemand
AngularJS com loadOnDemand
AngularJS com loadOnDemand
AngularJS com loadOnDemand
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS com loadOnDemand

1,596

Published on

Nada mais do que um simples plug-in para carregar controllers e views sob demanda escrito com AngularJS.

Nada mais do que um simples plug-in para carregar controllers e views sob demanda escrito com AngularJS.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,596
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AgularJS + loadOnDemand AngularJS com loadOnDemand Atualizado!! Autor: Douglas Lira douglas.lira.web@gmail.com | angularjs-br@googlegroups.com Ajude a compartilhar conhecimento!!
  • 2. AgularJS + loadOnDemand 1 – O que é o loadOnDemand? Simples, apenas um plug-in para carregar controllers e views sob demanda escrito com AngularJS. Obs.: Após uma longa pesquisa na internet e consultas com alguns amigos, chego à conclusão que uns aprovam e outros condenam essa pratica, contudo até o presente momento não tive problema com essa pratica e particularmente aprovo a ideia. 2 – Vantagens e desvantagens Vantagens - Código mais organizado - Menos carga para iniciar o sistema Desvantagens Acredito que seja uma questão de bom senso querer usar ou não aprincipal negativa para o não uso dessa pratica é que corre o risco do arquivo não carregar de forma correta. 3 – Ferramentas - AngularJS – http://angularjs.org/ - loadOnDemand - https://github.com/AndyGrom/loadOnDemand 4 – Mão na massa! Obs.: Recebi vários e-mail com dúvidas do caminho onde deve ser salvo os arquivos, então destaquei no código.
  • 3. AgularJS + loadOnDemand App.js //Criação do $app que é o modulo que representa toda a aplicação $app = angular.module('App',['loadOnDemand']); $app.config(['$routeProvider', '$httpProvider', function($routeProvider,$httpProvider){ //Configura o route provider $routeProvider. when('/',{ template:'<div load-on-demand="'User'" load-view="0"></div>'}). when('/user/new',{ template:'<div load-on-demand="'User'" load-view="1"></div>'}). otherwise({ redirectTo:'/'}); }]).config(['$loadOnDemandProvider', function ($loadOnDemandProvider) { var modules = [{ name: 'User', script: 'js/controllers/administrator/UserController.js', template: ['view/cadastro/user/main.html','view/cadastro/user/form.html'] },{ name: 'dependence', script: 'js/common/dependence.js' }]; $loadOnDemandProvider.config(modules); }]);
  • 4. AgularJS + loadOnDemand UserController.js angular.module('User',['dependence']) .controller('UserController', function($scope,$http,$routeParams,$location){ $scope.titulo = “Usuário LISTA”; } }); main.html <div ng-controller=”UserController”> { { titulo}} </div> index.html <!DOCTYPE html> <html ng-app="App"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>loadOnDemand – By Douglas Lira</title> <!-- JS --> <script type="text/javascript" src="js/lib/angular.min.js"></script> <script type="text/javascript" src="js/lib/angular-resource.min.js"></script> <script type="text/javascript" src="js/lib/loadOnDemand.js"></script> <script type="text/javascript" src="js/App.js"></script> </head> <body> <a href="#/">Lista</a>&nbsp;<a href="#/user/new">Formulário</a> <div ng-view></div> </body> </html>
  • 5. AgularJS + loadOnDemand 5 – Se você realmente leu, você deve ter observado algo diferente do loadOnDemand não é? Realmente, adaptei o mesmo para suportar varias views com apenas um único controller, segue abaixo. loadOnDemand.js ... link: function (scope, element, attr) { var srcExp = attr.loadOnDemand, childScope, viewLoad = attr.loadView; ... // ================ UPDATE AQUI function loadTemplate(url, callback) { var newUrl = ""; if(typeof url == 'object') { newUrl = url[viewLoad]; } else { newUrl = url; } var resourceId = 'view:' + newUrl, view; if (!scriptCache.get(resourceId)) { $http.get(newUrl).success(function(data) { scriptCache.put(resourceId, data); callback(data); }).error(function(data) { $log.error('Error load template "' + newUrl + "': " + data); }); } else { view = scriptCache.get(resourceId); $timeout(function() { callback(view); }, 0); } } // ================ UPDATE AQUI 6 - Considerações finais Tentei enviar essas alterações lá no github do projeto, mas como sempre sem sucesso e chego a conclusão que meu amigo Reginaldo Neto tem razão... “Douglas acho que você tem algo contra todos os repositórios do mundo, porque sempre que você tenta faze algo dá errado” – Reginaldo Neto

×