Baixado 31 vezes
![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);
}]);](https://image.slidesharecdn.com/angularjsloaddemand-130818222702-phpapp01/85/AngularJS-com-loadOnDemand-3-320.jpg)
![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> <a href="#/user/new">Formulário</a>
<div ng-view></div>
</body>
</html>](https://image.slidesharecdn.com/angularjsloaddemand-130818222702-phpapp01/85/AngularJS-com-loadOnDemand-4-320.jpg)
![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](https://image.slidesharecdn.com/angularjsloaddemand-130818222702-phpapp01/85/AngularJS-com-loadOnDemand-5-320.jpg)
Carregado porDouglas Lira
AngularJS com loadOnDemand
Este documento discute o uso de loadOnDemand com AngularJS, um plugin que carrega controllers e views sob demanda. Ele explica como configurar o loadOnDemand para suportar múltiplas views por controller, fornecendo exemplos de código. O autor também relata tentativas frustradas de contribuir com alterações para o repositório do GitHub do projeto.
AngularJS com loadOnDemand
- 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çãodo $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> <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