Untitled - Angular on Rails

30 Pages·2017·0.64 MB·English

2
Angular for Rails Developers
Build Your First Angular 2/Rails 5 SPA
Jason Swett
ii
Contents
Preface v
1 Introduction 1
1.1 How this book is structured . . . . . . . . . . . . . . . . . . . 1
1.2 What to do if you get stuck . . . . . . . . . . . . . . . . . . . 2
1.3 Technology versions used in this book . . . . . . . . . . . . . 2
2 Establishing a Base 5
2.1 Creating the Rails app . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Creating the Angular app . . . . . . . . . . . . . . . . . . . . 6
2.3 CORS configuration . . . . . . . . . . . . . . . . . . . . . . . 8
2.4 Configuring the proxy . . . . . . . . . . . . . . . . . . . . . . 10
3 Deployment 13
3.1 Deciding how to deploy . . . . . . . . . . . . . . . . . . . . . 13
3.2 Testing ng build . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3 Configuring the deployment . . . . . . . . . . . . . . . . . . 15
3.4 Preparing package.json . . . . . . . . . . . . . . . . . . . . . 16
4 Adding the Book Resource to Rails 19
4.1 Setting up RSpec . . . . . . . . . . . . . . . . . . . . . . . . 20
4.2 Setting up Factory Girl . . . . . . . . . . . . . . . . . . . . . 22
4.3 Setting up Active Model Serializers . . . . . . . . . . . . . . 24
4.4 Generating the Book resource . . . . . . . . . . . . . . . . . 25
4.5 Fixing the test suite . . . . . . . . . . . . . . . . . . . . . . . 27
iii
iv CONTENTS
4.6 Getting the model spec not to be “pending” anymore . . . . . 30
4.7 Getting the controller specs not to be “pending” anymore . . . 32
4.7.1 Adding Database Cleaner . . . . . . . . . . . . . . . 34
4.7.2 Fixing invalid_attributes . . . . . . . . . . . . . . . . 37
4.8 Adding some seed data . . . . . . . . . . . . . . . . . . . . . 42
4.9 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5 “Book List” Spike 45
5.0.1 Add an HTTP request to Angular . . . . . . . . . . . 45
6 Authentication Spike 49
6.1 User Registration . . . . . . . . . . . . . . . . . . . . . . . . 49
6.1.1 Creating NewUserComponent and setting up routing . 49
6.2 Installing Angular2-Token . . . . . . . . . . . . . . . . . . . 51
6.2.1 Getting Angular2-Token to register a user . . . . . . . 52
6.2.2 Adding devise_token_auth . . . . . . . . . . . . . . . 53
6.2.3 Adding the registration form . . . . . . . . . . . . . . 56
6.3 Fixing the validation_token problem . . . . . . . . . . . . . . 60
6.4 Sign-in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
6.4.1 Adding NewUserSessionComponent . . . . . . . . . . 61
6.4.2 Making the sign-in HTTP request . . . . . . . . . . . 63
6.4.3 Adding the sign-in form . . . . . . . . . . . . . . . . 64
6.4.4 Factoring out duplication . . . . . . . . . . . . . . . . 67
6.5 Preventing access to secure pages . . . . . . . . . . . . . . . 70
6.6 Redirect after sign-in . . . . . . . . . . . . . . . . . . . . . . 75
7 Getting Angular and Rails to Talk to Each Other 77
7.1 Creating the BookList component . . . . . . . . . . . . . . . 77
7.2 Bringing BookListComponent onto the home page . . . . . . 79
7.3 Making our first HTTP request . . . . . . . . . . . . . . . . . 80
7.3.1 Let’s set aside the test for a second . . . . . . . . . . . 80
7.3.2 Adding the HTTP request itself . . . . . . . . . . . . 80
7.3.3 Showing the data on the page . . . . . . . . . . . . . 81
7.3.4 Fixing the test . . . . . . . . . . . . . . . . . . . . . . 83
CONTENTS v
7.4 Refactoring BookListComponent to use a service . . . . . . . 85
7.5 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
8 Creating a Resource 91
8.1 Putting the book form on the main page . . . . . . . . . . . . 91
8.2 Getting the book to save to the database . . . . . . . . . . . . 95
9 Adding Some Routing and Refactoring the Book Form UI 103
9.0.1 Adding routing configuration for the book form . . . . 106
9.0.2 Adding a link to the book form . . . . . . . . . . . . . 111
9.0.3 Adding a redirect after save . . . . . . . . . . . . . . 112
10 Deleting a Resource 115
11 Adding Integration Tests 121
11.1 Adding the tests . . . . . . . . . . . . . . . . . . . . . . . . . 121
11.2 Making the test suite sturdier . . . . . . . . . . . . . . . . . . 124
11.3 Compensating for Angular’s load time . . . . . . . . . . . . . 126
12 Styling 129
12.1 Installing Twitter Bootstrap . . . . . . . . . . . . . . . . . . . 129
12.2 Modifying the markup . . . . . . . . . . . . . . . . . . . . . 131
13 Afterword: Shameless Self-Plug 135
14 Acknowledgements 137
vi CONTENTS
Preface
This is an example of “frontmatter”, which comes before the main text of the
book.
vii
viii PREFACE