domingo, 29 de janeiro de 2017

Continuação de estudos sobre o Angular.js (1)

No post Curso : Shaping up with angular.js (1) há anotações de conhecimentos repassados para um bom entendimento do Angular.js. Neste post vamos estender o conhecimento da framework.

Roteamento

Para usar o roteamento no Angular.js é necessário:

  1. usar o ngView em algum elemento da página principal, neste elemento que será carregado o template específico definido pelo roteamento
  2. carregar a biblioteca ngRoute
    1. Este passo não era necessário, mas é desde que o Angular foi quebrado em pacotes menores para otimizar o carregamento
  3. importar o módulo ngRoute dentro do módulo da app
  4. definir as rotas

Exemplo de como fica o roteamento na definição do Módulo:
angular.module('NomeApp', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider.when('/url', {
      templateUrl : '/arquivo.html'
      })
    .when('/', {
      redirectTo: '/usuario'
    })
    .when('/ComController', {
      redirectTo: '/usuario',
      controller: function () 
      },
      controllerAs: 'aliasCtrl' 
    })
    .otherwise( {
      redirectTo: '/principal'
    });
  });


Parametros de Roteamento

Deve-se injetar o $routeParams e utilizar as propriedades deste objeto para buscar os valores de cada chave da querystring

angular.module('NomeApp')
.controller('NomeController', ['$http','$routeParams', function($http, $routeParams) {
  var controller = this;
  $http({method: "GET", url: "/notes/" + $routeParams.id})
    .success(function(data){
      controller.note = data;
    });
  }]);

Referências:
http://campus.codeschool.com/courses/staying-sharp-with-angular-js/
http://gabrielfeitosa.com/angularjs-route/
https://docs.angularjs.org/api/ngRoute/service/$route
https://docs.angularjs.org/api/ngRoute/service/$routeParams
http://www.w3schools.com/angular/angular_routing.asp

Chamadas $http

É com este recurso que o controller faz as chamadas de request disponibilizando para a view:

$http.get('/url')
.then(function(response) {
  controller.dataToView = response.data;
});


Ou também para salvar, atualizar e excluir novos registros.

Referencias
http://www.w3schools.com/angular/angular_http.asp 
http://www.codelord.net/2015/05/25/dont-use-$https-success/

Outras comparações com o Razor a View do Asp.net.

Facilidades que existem no Razor e como ter no Angular.Js, esta comparação será evoluída a medida que avançar em estudo do ambiente, como o uso do JSLint, TypeScript, VS Code.

Pontos a facilitar
  • Priorizar erros de compilação(ou validação do código) em relação ao de execução
    • Erros simples de sintaxe, como falta de ';' ou confundior no json o ':' com o '='
  • Depurar 
  • Editor e plugins
  • Autocomplete
  • Tipagem forte, para evitar erros na execução (Priorizando compilação) 
  • Linha de comando

Referências
Coletânea de links sobre o Angular.js:
https://github.com/jmcunningham/AngularJS-Learning