Arquivo da tag: AngularJS

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.

Construindo uma Aplicação E-commerce com MEAN – Desenvolva uma aplicação de e-commerce do começo ao fim, em tempo real, usando MEAN

Nota do livro: 10.

Descrição do livro

Este livro descreve, passo a passo, como criar sua própria aplicação de e-commerce, desenvolvida paralelamente ao processo de aprendizado e usando a tecnologia MEAN. Você aprenderá a desenvolver um site de e-commerce de alta qualidade e capaz de entrar em produção e terá condições e conhecimento para adicionar seus próprios recursos a ele.
O livro começa apresentando a plataforma MEAN, depois segue um roteiro passo a passo para construir uma loja com o AngularJS, um banco de dados com o MongoDB, uma API do tipo REST e, então, mostra como “amarrar” tudo isso com o AngularJS. Você verá como gerenciar a autenticação dos usuários, verificar as múltiplas plataformas de pagamento, adicionar navegação e busca a produtos, fazer o deploy do site finalizado e, finalmente, adicionar recursos personalizados e específicos de alta qualidade.

Ao término do livro, você será capaz de construir e usar seu próprio aplicativo de e-commerce no mundo real e adicionar seus próprios recursos a ele.

Para quem este livro foi escrito

Este livro é direcionado ao desenvolvedor web ou full stack em JavaScript que precisa desenvolver aplicações de e-commerce usando o MEAN. Algum conhecimento básico a respeito da tecnologia MEAN é altamente recomendado.

Este livro ensina como

  • Empregar o AngularJS para construir componentes de UI responsivos
  • Conhecer e utilizar ferramentas de teste do AngularJS, como Jasmine, Karma e Protractor
  • Implementar múltiplas estratégias de autenticação, como OAuth, JsonWebToken e Sessions
  • Melhorar a usabilidade do website associando-o a redes sociais como Facebook, Twitter e Google
  • Criar integração com plataformas de pagamento como o PayPal
  • Implementar a funcionalidade de busca por texto no MongoDB
  • Criar um sistema de categorização flexível para organizar os produtos da loja
  • Implementar conexões seguras à aplicação usando certificados SSL e plataformas de pagamento nos ambientes de produção