Tutorial Angularjs para iniciantes

12 abr 2013(há 12 anos)

Ruby on RailsJavascript

#ruby#rails#iniciantes#angularjs

Oi pessoas, sei que no post anterior tinha falado que meu próximo post seria sobre Active admin, mas esse dias resolvi/precisei usar AngularJS e conseguir entender/implementar um exemplo básico de um tutorial de Rails com AngularJS, bem como sempre venho documentar o resultado, bem sem mais delongas... vamos nessa!

Primeiro passo: Criar um novo projeto rails no meu caso vou chama-lo de my_tasks

$ rails new my_tasks --skip-bundle -T
$ cd my_tasks/
$ [sudo] rm public/index.html
$ rails g scaffold task title:string finished:boolean
$ rake db:migrate

Vamos configurar o a rota default no arquivo config/routes.rb adicionando a linha abaixo

root :to => "tasks#index"

Agora é só rodar um rails s no terminal e acessar localhost:3000 e ter a certeza que é possivel acessar no formato .json em caso de outros projetos. No nosso exemplo: localhost:3000/tasks.json

Segundo passo: Adicionar o arquivo angular.js bem nesse exemplo estou usando o deste link e colocá-lo em app/assets/javascripts

Em app/views/layout/application.html.erb altere a tag <htm> para:

<html ng-app>

Terceiro passo: Agora precisamos criar o arquivo app/assets/javascripts/tasks_controller.js com o seguinte conteudo

function TasksCtrl($scope) {
  $scope.tasks = [
    {"title":"Buy milk", "finished":false},
    {"title":"Wash car", "finished":true}
  ]
}

E no arquivo app/views/tasks/index.html.erb adicione o trecho abaixo

<div ng-controller="TasksCtrl">
  <ul>
    <li ng-repeat="task in tasks">
    {{task.title}}, {{task.finished}}
    </li>
  </ul>
</div>

Bem o exemplo acima foi só para entender como relamente funcionar, mas agora vamos fazer tentar usar como seria em uma aplicação real. Adicione alguns registros acessando link e em seguida substitua o método "TasksCtrl" pelo código abaixo:

function TasksCtrl($scope, $http) {
  $http.get("/tasks.json").success(function(data) {
    $scope.tasks = data;
    console.log(data);
  });
}

Conclusão

O atributo ng-controller="TasksCtrl" aponta para action do controller tasks_controller.js e o "tasks" em ng-repeat="task in tasks" referece à variável $scope.tasks. Portanto quando acessar localhost:3000, o que você ver foi as tasks renderizado pelo o AngularJS. Qunato ao metodo $http.get funciona tal como jQuery.get faz um requisição e retorna com o conteúdo nesse caso como um json de tasks. Enfim é isso, em breve voltarei com mais alguma coisa de Ruby on Rails ou outros... mas por enquanto fique com o commit deste exemplo