Arquivo da tag: javascript

Building web apps with Rails4 and AngularJS in 15 minutes

While learning AngularJS to make a single page app using Rails4, I found some good videos and blogs. However, I did not find any simple example for CRUD operations that made me easily understand the integration between Rails4 and AngularJS. So in this tutorial post, I explain how to create basic CRUD operation using Rails4 and AngularJS.

Here is my git repository for the complete code Github

Create rails project
[code type=ruby]rails new rails4_crud_with_angularjs

Create User model
[code type=ruby]rails g model user

file db/migrate/[timestamp]_create_users.rb
[code type=ruby]
class CreateUsers < ActiveRecord::Migration def change create_table :users do |t| t.string :first_name t.string :last_name t.string :email t.string :phone t.timestamps end end end

[code type=ruby]rake db:migrate

app/model/user.rb
[code type=ruby]
class User < ActiveRecord::Base validates :first_name, :last_name, :email, presence: true end

Create Users controller
[code type=ruby]rails g controller users

Create the CRUD operation in users controller and send JSON response. The code sample is here

Add angular gem

In Gemfile add these two gems.

gem 'angularjs-rails'
gem 'angular-ui-bootstrap-rails' #for bootstrap UI
bundle install

Setup layout

Adding ng-app and ng-view indicates that we have an AngularJS app in the page.
[code type=ruby]


Rails4CrudWithAngularjs
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

<%= yield %>


Create an angular controller

First let’s create a directory for our controllers. You can name it whatever you want.

mkdir -p app/assets/javascripts/angular/controllers

Now create users_controllers.js file. Here I have used the same naming convention as Rails.
[code type=javascript]
// app/assets/javascripts/angular/controllers/users_controllers.js
var myApp = angular.module(‘myapplication’, [‘ngRoute’, ‘ngResource’]);

‘myapplication’ is ng-app name.

Add Factory

Factory is the angular provider and you can learn more about it here. It basically interacts with the rails server and processes the json response.
[code type=javascript]
myApp.factory(‘Users’, [‘$resource’,function($resource){
return $resource(‘/users.json’, {},{
query: { method: ‘GET’, isArray: true },
create: { method: ‘POST’ }
})
}]);
myApp.factory(‘User’, [‘$resource’, function($resource){
return $resource(‘/users/:id.json’, {}, {
show: { method: ‘GET’ },
update: { method: ‘PUT’, params: {id: ‘@id’} },
delete: { method: ‘DELETE’, params: {id: ‘@id’} }
});
}]);

‘Users’ factory is used for getting the collection of users and creating users. ‘User’ factory is used to get the user details, update the user or delete the user.

Add Routes

Angular routes are used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() and tries to map the path to an existing route definition.
[code type=javascript]
myApp.config([
‘$routeProvider’, ‘$locationProvider’, function($routeProvider, $locationProvider) {
$routeProvider.when(‘/users’,{
templateUrl: ‘/templates/users/index.html’,
controller: ‘UserListCtr’
});
$routeProvider.when(‘/users/new’, {
templateUrl: ‘/templates/users/new.html’,
controller: ‘UserAddCtr’
});
$routeProvider.when(‘/users/:id/edit’, {
templateUrl: ‘/templates/users/edit.html’,
controller: “UserUpdateCtr”
});
$routeProvider.otherwise({
redirectTo: ‘/users’
});
}
]);

In the code above, I have added the controllers UserListCtr, UserAddCtr, UserUpdateCtrfor listing users and to create and update users.

Add Angular templates

Now we need to add templates. I have stored them in public/templates.

If we create a file public/templates/users/index.html with some arbitrary content, we should be able to see it in the browser. Here is a sample template for users.

 CRUD Actions

Now our setup is done and we are ready for processing CRUD operation.

Index Action:
[code type=javascript]
myApp.controller(“UserListCtr”, [‘$scope’, ‘$resource’, ‘Users’, ‘User’, ‘$location’, function($scope, $resource, Users, User, $location) {
$scope.users = Users.query(); //it’s getting user collection
}]);

‘UserListCtr’ this controller listing users. you can check index.html here I am not explaining index template it’s straight forward angular template, you can read more about it here.

Create Action:
[code type=javascript]
myApp.controller(“UserAddCtr”, [‘$scope’, ‘$resource’, ‘Users’, ‘$location’, function($scope, $resource, Users, $location) {
$scope.save = function () {
if ($scope.userForm.$valid){
Users.create({user: $scope.user}, function(){
$location.path(‘/’);
}, function(error){
console.log(error)
});
}
}
}]);

‘UserAddCtr’ this controller create user. you can check new.html here. Users.create() calling users controller create action. create() action we defined in ‘Users’ factory.

Update Action:
[code type=javascript]
myApp.controller(“UserUpdateCtr”, [‘$scope’, ‘$resource’, ‘User’, ‘$location’, ‘$routeParams’, function($scope, $resource, User, $location, $routeParams) {
$scope.user = User.get({id: $routeParams.id})
$scope.update = function(){
if ($scope.userForm.$valid){
User.update($scope.user,function(){
$location.path(‘/’);
}, function(error) {
console.log(error)
});
}
};
}]);

‘UserUpdateCtr’ this controller update the user. you can check edit.html here. Users.update() calling users controller update action. update() action we defined in ‘User’ factory.

Delete Action:

For delete user I am not creating separate angular controller. I am writing deleteUser event in ‘UserListCtr’  controller.
[code type=javascript]
myApp.controller(“UserListCtr”, [‘$scope’, ‘$http’, ‘$resource’, ‘Users’, ‘User’, ‘$location’, function($scope, $http, $resource, Users, User, $location) {
$scope.users = Users.query();
$scope.deleteUser = function (userId) {
if (confirm(“Are you sure you want to delete this user?”)){
User.delete({ id: userId }, function(){
$scope.users = Users.query(); // after delete user get users collection.
$location.path(‘/’);
});
}
};
}]);

User.delete() calling users controller destroy action. delete() action we defined in ‘User’ factory.

In  public/templates/users/index.html for adding ‘Remove’ link
[code type=html]Remove

Remember href should be blank, if you add href=”#” it will call default route in your application.

I hope this blog helps those are started development in Rails + AngularJS.

ECMAScript 6 – Entre de cabeça no futuro do JavaScript

Nota do livro: 10.

Código Fonte

 

Conteúdo

Nos últimos anos, a linguagem JavaScript cresceu bastante na comunidade de desenvolvedores, tornando-se mais robusta, poderosa e sendo usada em uma infinidade de aplicações de alto nível, tanto no front-end quanto no back-end das aplicações. Ela é a tecnologia por trás de ferramentas, frameworks e bibliotecas consagradas no mercado, tais como: Angular, Ember, React, Backbone, jQuery, Grunt. A lista é enorme. Atualmente, é essencial que um profissional de TI tenha domínio desta tecnologia, tanto para aplicações web, aplicativos mobile e/ou desktop. É exatamente para isto que este livro foi escrito. Para que você seja capaz de entender todas as mudanças que vieram com o ECMAScript 6, aprimorar suas habilidades como desenvolvedor e se destacar no mercado de trabalho que hoje é tão concorrido.

Neste livro, Diego Pinho aborda as principais mudanças que a nova versão da especificação trouxe para a linguagem. Você vai aprender não somente o conceito, mas como aplicá-lo na prática em situações reais. Dentre elas, estão:

* Novas maneiras de iterar objetos e coleções

* Declaração de variáveis com let e const

* Melhorias em funções com arrow functions

* As novas de estruturas de Map, WeakMap, Set e WeakSet

* Modularização e classes

* Geradores e símbolos

* E muito mais

Aprendendo Node – Usando JavaScript no servidor

Nota do livro: 9.

Descrição do livro
Reúna o conhecimento de programação que você já usa no navegador e empregue no servidor com o Node! Aprenda a criar aplicações em rede de alto desempenho e plenamente escalonáveis nesta plataforma baseada em JavaScript. O conteúdo deste livro é bastante prático, “mão na massa”, e fará com que o programador de JavaScript, acostumado a lidar apenas com processamento no navegador, domine com maestria os fundamentos do Node no servidor. Serão abordados inúmeros módulos nativos e também de terceiros. Esta edição foi atualizada para abranger tanto a mais recente versão tradicional (Long Term Support – LTS) do Node quanto a versão estável mais atual.
Aprenda rapidamente sobre o modelo de I/O assíncrono e baseado em eventos do Node e, com ele, desenvolva aplicações que usam dados intensivamente, que são acessados com frequência e, ainda assim, são computacionalmente muito simples. Se você já domina o JavaScript, este livro oferece muitos exemplos de programas e implementações que se beneficiam do desenvolvimento centralizado no servidor proporcionado pelo Node.

  • Explore a funcionalidade do Node e de seus frameworks para desenvolver soluções em full-stack.
  • Mergulhe no sistema de módulos e pacotes do Node.
  • Teste imediatamente o código de sua aplicação ou módulo com o console REPL do Node.
  • Use os módulos nativos do Node para criar aplicações web que tenham seu próprio servidor HTTP.
  • Aprenda todos os recursos do Node para networks, segurança e sockets.
  • Acesse funcionalidades do sistema operacional com processos-filho.
  • Aprenda as melhores ferramentas e técnicas para desenvolver e colocar em produção seus sistemas em Node.
  • Use o Node em microcontroladores, microcomputadores e na Internet das Coisas (IoT – Internet of Things)

Código Fonte.