AngularJS. CRUD Application example with AngularJS and Rails 4. Slides By: Jonathan McCarthy

Transcription

1 AngularJS CRUD Application example with AngularJS and Rails 4 1 Slides By: Jonathan McCarthy

2 Create a new Rails App For this example we will create an application to store student details. Create a new rails 4 app - rails new student_app Slides By: Jonathan McCarthy 2

3 Run the Application After creating the new application, cdange directory to the new project folder. - cd student_app Run the app - rails s Go to Slides By: Jonathan McCarthy 3

4 Create a Student Scaffold A student should have the following values: - Firstname - Lastname - Student Number - Address Run the following command to create the scaffold rails generate scaffold student firstname:string lastname:string student_num:string string Create the database (run the following command) - rake db:migrate Slides By: Jonathan McCarthy 4

5 Add some sample data Run the server (rails s), go to Add 5 students to the system Slides By: Jonathan McCarthy 5

6 Setup Angular Slides By: Jonathan McCarthy 6

7 Including Angular Go to: And download angular zip Create a new folder in assets/javascripts named angularexternal. Extract the zip folder contents to angularexternal Slides By: Jonathan McCarthy 7

8 Including jquery and Angular Update the application.html.erb template to look include the following: <script src=" <script src="/assets/angularexternal/angular.min.js"></script> <script src="/assets/angularexternal/angular-route.js"></script> <script src="/assets/angularexternal/angular-resource.min.js"></script> <script src="/assets/angular/controllers/student_controller.js"></script> It should look like: (next Slide) Slides By: Jonathan McCarthy 8

9 Including jquery and Angular Slides By: Jonathan McCarthy 9

10 Including Angular By adding the two gems in the previous step, this will add Angular to the web application. Update the template: ng-app="mycrudapp" <div class="maincontent" ng-view> <%= yield %> </div> Slides By: Jonathan McCarthy 10

11 Application.html.erb The template file should look as follows: Slides By: Jonathan McCarthy 11

12 Setup JS Angular files In the assets\javascripts directory, create a new folder named angular - mkdir angular - cd angular - mkdir controllers This will be used to contain the logic for the Angular functionality. Slides By: Jonathan McCarthy 12

13 Create a Angular Student Controller Create a new file named student_controller.js in the /assets/javascripts/angular/controllers folder. Add the following to the file: - var mycrudapp = angular.module('mycrudapp', ['ngroute', 'ngresource']); Slides By: Jonathan McCarthy 13

14 Factory and Providers The Factory is used to send and recieve information from out server side application. The usage of the Factory will create an object and prepoerties will be added to the object. When the object is passed to the controller, these prepoerties that are part of the object will be available in the controller for use through the Factory. See: Slides By: Jonathan McCarthy 14

15 Setup the Factory Add the following to student_controller.js mycrudapp.factory('students', ['$resource',function($resource){ return $resource('/students.json', {},{ query: { method: 'GET', isarray: true }, create: { method: 'POST' } }) }]); The first Factory is named Students. We can query students or create a new student. Slides By: Jonathan McCarthy 15

16 Setup the Factory Add the following to student_controller.js mycrudapp.factory('student', ['$resource', function($resource){ return $resource('/students/:id.json', {}, { show: { method: 'GET' }, update: { method: 'PUT', params: {id: '@id'} }, delete: { method: 'DELETE', params: {id: '@id'} } }); }]); The second Factory is named Student and allows us to show students, update an existing student and to delete a student. This is following Rails restful resources. Slides By: Jonathan McCarthy 16

17 student_controller.js The file student_controller.js should now look as follows: Slides By: Jonathan McCarthy 17

18 Routing in Angular $routeprovider provides routing functionality to the Angular application with minimal effort. $routeprovider is the provider for the $route service. The $route service allows us to easily link controllers, templates and the URL in the address bar. The $route service can be used preserve the back and forward navigation in the browser. Slides By: Jonathan McCarthy 18

19 Setup the Routes Add the following to student_controller.js // This is the Routes Section mycrudapp.config([ '$routeprovider', '$locationprovider', function($routeprovider, $locationprovider) { $routeprovider.when('/students',{ templateurl: '/templates/students/index.html', controller: 'StudentListCtr' }); $routeprovider.when('/students/new', { templateurl: '/templates/students/new.html', controller: 'StudentAddCtr' }); $routeprovider.when('/students/:id/edit', { templateurl: '/templates/students/edit.html', controller: 'StudentUpdateCtr' }); $routeprovider.otherwise({ redirectto: '/students' }); } ]); Slides By: Jonathan McCarthy 19

20 Create the Angular Templates For this simple CRUD example, we will create the following templates: - Index.html - New.html - Edit.html - _form.html The templates will be stored in the public folder in the Rails applcation. The next slide wil detail the setup of the templates. Slides By: Jonathan McCarthy 20

21 Create the Angular Templates In the rails projects public folder, create a new folder named templates and in this create a folder named students. Create 4 new files in the student with the following names: - index.html - new.html - edit.html - _form.html Slides By: Jonathan McCarthy 21

22 Form Explination <div class="form-group" ng-class="{'has-error' : submitted && studentform.firstname.$invalid}"> <label class="control-label col-md-3">first name <span class="required">* </span> </label> <div class="col-md-4"> <input type="text" name="firstname" class="formcontrol" ng-model="student.firstname" required placeholder="first name"/> </div> <p ng-show=" submitted && studentform.firstname. $invalid" class="help-block">first name is required.</p> </div> Slides By: Jonathan McCarthy 22

23 _form.html <div class="form-group" ng-class="{'has-error' : submitted && studentform.firstname.$invalid}"> <label class="control-label col-md-3">first name <span class="required">* </span> </label> <div class="col-md-4"> <input type="text" name="firstname" class="form-control" ng-model="student.firstname" required placeholder="first name"/> </div> <p ng-show=" submitted && studentform.firstname.$invalid" class="help-block">first name is required.</p> </div> <div class="form-group" ng-class="{'has-error' : submitted && studentform.lastname.$invalid}"> <label class="control-label col-md-3">last name <span class="required">* </span> </label> <div class="col-md-4"> <input type="text" name="lastname" class="form-control" ng-model="student.lastname" required placeholder="last name"/> </div> <p ng-show=" submitted && studentform.lastname.$invalid" class="help-block">last name is required.</p> </div> <div class="form-group" ng-class="{'has-error' : submitted && studentform. .$invalid}"> <label class="control-label col-md-3"> <span class="required">* </span> </label> <div class="col-md-4"> <input type=" " name=" " class="form-control" ng-model="student. " required placeholder="test@example.com"/> </div> <p ng-show="submitted && studentform. .$error.required" class="help-block"> is required.</p> <p ng-show="submitted && studentform. .$error. " class="help-block">enter valid </p> </div> <div class="form-group"> <label class="control-label col-md-3">student Number </label> <div class="col-md-4"> <input type="text" name="student_num" class="form-control" ng-model="student.student_num" placeholder=" "/> </div> <p ng-show="submitted && studentform.student_num.$invalid" class="help-block">student Number is required.</p> </div> <div class="form-group"> <div class="pull-left"> <a class="btn btn-default" href="/"> Back</a> <button type="submit" class="btn btn-primary" ng-click="submitted=true">submit</button> </div> </div> Slides By: Jonathan McCarthy 23

24 new.html <div class="col-md-10"> <form class="tab-pane active form-horizontal" id="first" name="studentform" novalidate ng-submit="save()"> <h3 class="block">add new student</h3> <div ng-include src="'/templates/students/_form.html'"></div> </form> </div> Slides By: Jonathan McCarthy 24

25 edit.html <div class="col-md-10"> <form class="tab-pane active form-horizontal" id="first" name="studentform" novalidate ng-submit="update()"> <h3 class="block">edit student</h3> <div ng-include src="'/templates/students/_form.html'"></div> </form> </div> Slides By: Jonathan McCarthy 25

26 index.html <br/> <div class="row"> <div class="col-md-12"> <a class="btn btn-primary" href="#/students/new">create a student</a> <h3 class="block">students</h3> <table class="table table-striped"> <tr> <th>first Name</th> <th>last Name</th> <th>student Number</th> <th> </th> <th></th> </tr> <tr ng-hide="students.length" > <td colspan="5">no students found, Please create one.</td> </tr> <tr ng-show="students.length" ng-repeat="student in students"> <td>{{student.firstname}}</td> <td>{{student.lastname}}</td> <td>{{student.student_num}}</td> <td>{{student. }}</td> <td> <a href="#/students/{{student.id}}/edit">edit</a> <a href="" ng-click="deletestudent(student.id)">remove</a> </td> </tr> </table> </div> </div>

27 Adding Controllers to the App Next we will add the Angular controllers to the application Slides By: Jonathan McCarthy 27

28 List Controller mycrudapp.controller("studentlistctr", ['$scope', '$http', '$resource', 'Students', 'Student', '$location', function($scope, $http, $resource, Students, Student, $location) { $scope.students = Students.query(); $scope.deletestudent = function (studentid) { if (confirm("are you sure you want to delete this student?")){ Student.delete({ id: studentid }, function(){ $scope.students = Students.query(); $location.path('/'); }); } }; }]); Slides By: Jonathan McCarthy 28

29 Add Controller mycrudapp.controller("studentaddctr", ['$scope', '$resource', 'Students', '$location', function($scope, $resource, Students, $location) { $scope.student = {} $scope.save = function () { if ($scope.studentform.$valid){ console.log('here' + $scope.student); //Students.create({student: $scope.student}, function(){ Students.create($scope.student, function(){ $location.path('/'); }, function(error){ console.log(error) }); } } }]); Slides By: Jonathan McCarthy 29

30 Update Controller mycrudapp.controller("studentupdatectr", ['$scope', '$resource', 'Student', '$location', '$routeparams', function($scope, $resource, Student, $location, $routeparams) { $scope.student = Student.get({id: $routeparams.id}) $scope.update = function(){ if ($scope.studentform.$valid){ console.log('here2' + $scope.student); Student.update($scope.student,function(){ $location.path('/'); }, function(error) { console.log(error) }); } }; }]); Slides By: Jonathan McCarthy 30

31 Where to place the controller code Add the code for the controllers to the student_controller.js Slides By: Jonathan McCarthy 31

32 CSRF Edit application_controller.rb Update /app/controllers/application_controller.rb to look as follows. The changes will allow Rails to work with the Angular app. class ApplicationController < ActionController::Base # Prevent CSRF attacks by raising an exception. # For APIs, you may want to use :null_session instead. protect_from_forgery with: :exception after_filter :set_csrf_cookie_for_ng def set_csrf_cookie_for_ng cookies['xsrf-token'] = form_authenticity_token if protect_against_forgery? end protected def verified_request? super form_authenticity_token == request.headers['x-xsrf-token'] end end Slides By: Jonathan McCarthy 32

33 Update Routes.rb Update routes.rb to look as follows: Rails.application.routes.draw do resources :students root 'students#index' end Slides By: Jonathan McCarthy 33

34 Run the App Run the application and test the functionality. Slides By: Jonathan McCarthy 34

35 Questions Slides By: Jonathan McCarthy 35