AngularJS loadOnDemand atualizado

AgularJS + loadOnDemand

AngularJS
com
loadOnDemand
Atualizado!!

Autor: Douglas Lira
douglas.lira.web@gmail.com | angularjs-br@googlegroups.com
Ajude a compartilhar conhecimento!!


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.


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);
}]);

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>

<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 – 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

AngularJS loadOnDemand atualizado

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a AngularJS loadOnDemand atualizado

Semelhante a AngularJS loadOnDemand atualizado (20)

AngularJS loadOnDemand atualizado