https://imasters.com.br/desenvolvimento/desenvolvendo-uma-aplicacao-de-autenticacao-jwt-com-angularjs-v-1
Arquivo da categoria: AngularJS
Protractor – end-to-end testing for AngularJS
Add Facebook Native Login to your Ionic App
An Angular.js generator for Yeoman
An IntelliJ Unit Test Manager Plugin for Angular JS
Consuming REST APIs
AngularJS – AngularPrint
AngularJS 1 – Autocomplete
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]
<%= 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, UserUpdateCtr
for 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.