Tutorial Angularjs para iniciantes » Blog :: by wfsneto
April 12, 2013 - Last updated on April 24, 2013 15h42m53s
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
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:
Terceiro passo: Agora precisamos criar o arquivo app/assets/javascripts/tasks_controller.js com o seguinte conteudo
function TasksCtrl($scope) {
{"title":"Buy milk", "finished":false},
{"title":"Wash car", "finished":true}
E no arquivo app/views/tasks/index.html.erb adicione o trecho abaixo
{{task.title}}, {{task.finished}}
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) {
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