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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

?

1 2 3 4 5 6 7 8

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:

?

1 2 3 4

$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