Learning AngularJS: A Guide to AngularJS Development

by Ken Williamson

Overview

With AngularJS, you can quickly build client-side applications that run well on any desktop or mobile platform, using REST web services for backend processes. You may have heard that the learning curve for this JavaScript MVC framework is too steep, but that’s not the case. This practical guide provides a hands-on approach to learning AngularJS that will have you building high-quality applications and websites in no time.

Along with a conceptual understanding of the framework, you’ll also gain direct experience with AngularJS by building a sample application throughout the book. If you’re familiar with JavaScript, web development, and software design concepts and patterns, this book is the perfect way to get started.

• Understand how AngularJS differs from other MVC frameworks
• Learn about AngularJS controllers, views, and models by diving into the book’s sample project
• Connect your working application to public REST services
• Build the application’s security layer with non-REST AngularJS services
• Explore the basics of building and testing AngularJS directives
• Use AngularJS as part of the MEAN stack (MongoDB, ExpressJS, AngularJS, and Node.js)
• Discover how search engine optimization relates to AngularJS applications and sites

Product Details

ISBN-13:	9781491916759
Publisher:	O'Reilly Media, Incorporated
Publication date:	04/05/2015
Pages:	209
Product dimensions:	6.90(w) x 9.10(h) x 0.50(d)

About the Author

Ken Williamson is a software engineer and architect with over twenty years of experience in the technology industry. Ken's first programming language was Assembly language using the 6502 chip. He moved on to C and C++ and eventually to Java and JavaScript. Ken has designed and written mobile, desktop and server software for some of the biggest companies in the world.



Ken holds a BS in Computer Science from Kennesaw State University. He is the founder of several Open Source projects including Ulbora CMS. He has also contributed to many other Open Source projects over the years. Ken makes his home in Atlanta, Georgia with his wife Sherry. You can find Ken at www.ken-williamson.com.

Table of Contents

Preface xi

1 Introduction to AngularJS 1

JavaScript Client-Side Frameworks 1

Single-Page Applications 2

Bootstrapping the Application 3

Dependency Injection 4

AngularJS Routes 4

HTML5 Mode 5

Modern Search Engines 6

AngularJS Templates 6

AngularJS Views (MVC) 7

AngularJS Models (MVC) 7

AngularJS Controllers (MVC) 7

Controller Business Logic 8

Integrating AngularJS with Other Frameworks 9

Testing AngularJS Applications 9

Conclusion 10

2 The IDE and AngularJS Projects 11

The IDE 11

Editing the HTML Code 13

Editing the JavaScript Code 13

Creating the Templates 14

Running the Applications 15

Testing AngularJS Applications in the IDE 15

JsTestRunner 17

Karma Test Runner 19

Protractor 20

Conclusion 21

3 MVC and AngularJS 23

The Old Way 23

Choice One 25

Choice Two 26

A New and Better Way 27

Testing Considerations 28

Responsive Design Considerations 29

Conclusion 35

4 AngularJS Controllers 37

Initializing the Model with Controllers 39

Adding Behavior with Controllers 39

Controller Business Logic 41

Presentation Logic and Formatting Data 41

Form Submission 41

Using Submitted Form Data 43

IS Test Driver 44

Creating Test Scripts 46

Testing with JS Test Driver 49

Testing with Karma 49

Installing Karma 49

Karma Configuration 50

Running Karma Unit Tests 51

End-to-End Testing with Protractor 52

Installing Protractor 52

Configuring Protractor 52

Creating Protractor Test Specifications 52

Starting the Selenium Server 53

Running Protractor 53

Conclusion 54

5 AngularJS Views and Bootstrap 55

AngularJS Templates 55

Creating the Blog Project 55

Adding a New Blog Controller 57

Adding a New Blog Template 58

Twitter Bootstrap 58

Adding a Bootstrap Menu 60

Adding Mock Blog Data 61

Using CSS3 to Style the Page 62

Adding Styles and Presentation Logic 64

Viewing the Blog Post 65

Running the Blog Application 69

Testing with Karma 70

Karma Configuration 71

Karma Test Specifications 72

Karma Testing 73

End-to-End resting 73

Protractor Test Specification 73

Protractor Testing 74

Conclusion 75

6 AngularJS and REST Services 77

REST Services 77

AngularJS and REST Services 78

Ways to Create AngularJS Services 78

Ways to Communicate with REST Services 79

Updating the Project for REST 80

REST Services and Controllers 82

The JSON Response 83

List Services 83

Testing Services with Karma 85

Karma Service Specifications 86

End-to-End Testing 87

Protractor Configuration 87

Protractor Test Specification 87

Conclusion 88

7 AngularJS Models 89

Public REST Services 89

Changes to the Controllers 90

Model Properties 91

Blog Application Public Services 92

Modifying the HTML 93

Modifying App.js 94

Modifying the Controllers 94

Running the Application 97

Testing Services with Karma 97

Karma Service Specifications 98

Karma Testing 99

End-to-End Testing 100

Protractor Test Specification 100

Protractor Testing 101

Conclusion 101

8 Services and Business Logic 103

Handling User Authentication 103

Using Basic Authentication 104

Creating AngularJS Services 104

Holding User Credentials 105

Checking User Credentials 105

Deleting User Credentials 106

Retrieving User Credentials 107

Blog Application Business Logic 108

Using the Business Logic 110

Testing Services with Karma 111

Karma Configuration 111

Karma Test Specifications 112

Karma Testing 117

End-to-End Testing 117

Protractor Configuration 117

Protractor Test Specification 117

Protractor Testing 118

Conclusion 118

9 AngularJS Directives 121

The HTML Compiler 121

What Are Directives? 121

Building Custom Directives 122

Naming Conventions for Directives 123

The Restrict Option 123

The Template URL 124

Template Attributes 124

Adding the Custom Directive 124

Passing the Title Attribute 127

Running the Blog Application 128

Testing Directives with Karma 128

Karma Configuration 129

Karma Test Specification 131

Karma Testing 133

End-to-End Testing 133

Protractor Configuration 133

Protractor Test Specification 134

Protractor Testing 134

Conclusion 135

10 AngularJS Security 137

Authentication 138

Adding a Login Service 138

Adding a Login Controller 139

Security Modifications to Other Controllers 140

Adding a Logout Controller 141

Adding a Login Template 143

Adding New Routes 145

Adding a Logout Link 146

Running the Blog Application 147

Logging In 147

Testing with Karma 148

Karma Configuration 148

Karma Test Specifications 149

Karma Testing 152

End-to-End Testing 153

Protractor Configuration 153

Protractor Test Specification 153

Protractor Testing 154

One Last Point on Security 155

Conclusion 155

11 MEAN Cloud and Mobile 157

Local Deployment 157

Installing Node.js, npm, and MongoDB 158

Installing the NetBeans Node.js Plugin 158

The MEAN Application 159

Node.js Public Folder 159

MEAN Services 159

MEAN Blog Controllers 160

MEAN Blog Templates 164

Adding Comments 164

Adding Blog Entries 165

Adding New Routes 167

Adding Node.js Dependencies 168

Running the Blog Application Locally 169

Testing with Karma 169

Karma Configuration 170

Karma Test Specifications 171

Karma Testing 176

End-to-End Testing 176

Protractor Configuration 176

Protractor Test Specification 177

Protractor Testing 177

MEAN Deployment to the Cloud 178

Testing the Cloud Blog 179

Mobile Version 179

Conclusion 180

12 AngularJS and SEO 181

Old Versus New AngularJS SEO 182

Getting Found by Search Engines 182

Google Webmaster Tools 182

Adding a Sitemap 183

Microform at Tags 183

Building Clean Client Code 183

Building Fast REST Services 184

Conclusion 184

References 185

Index 187