Professional AngularJS E-Book

Valeri Karpov

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Veröffentlichungsjahr: 2015

Beschreibung

A comprehensive guide to AngularJS, Google's open-source client-side framework for app development.

Most of the existing guides to AngularJS struggle to provide simple and understandable explanations for more advanced concepts. As a result, some developers who understand all the basic concepts of AngularJS struggle when it comes to building more complex real-world applications. Professional AngularJS provides a thorough understanding of AngularJS, covering everything from basic concepts, such as directives and data binding, to more advanced concepts like transclusion, build systems, and automated integration testing. In addition to explaining the features of AngularJS, this book distills real-world experience on how these features fit together to enable teams to work together more effectively in building extraordinary apps.

• Offers a more thorough and comprehensive approach to AngularJS 
• Includes pointers to other advanced topics
• Lets you build a simple application from scratch, explaining basic building blocks along the way for quick hands-on learning

Leseprobe

Contents

Introduction

WHAT IS ANGULARJS?

WHEN NOT TO USE ANGULARJS

WHEN TO USE ANGULARJS

HOW TO USE THIS BOOK

HOW TO WORK WITH THIS BOOK’S SAMPLE CODE

CONVENTIONS

ERRATA

P2P.WROX.COM

1 Building a Simple AngularJS Application

WHAT YOU ARE BUILDING

WHAT YOU WILL LEARN

STEP 1: SCAFFOLDING YOUR PROJECT WITH YEOMAN

STEP 2: CREATING WATCHLISTS

STEP 3: CONFIGURING CLIENT-SIDE ROUTING

STEP 4: CREATING A NAVIGATION BAR

STEP 5: ADDING STOCKS

STEP 6: INTEGRATING WITH YAHOO FINANCE

STEP 7: CREATING THE STOCK TABLE

STEP 8: INLINE FORM EDITING

STEP 9: FORMATTING CURRENCY

STEP 10: ANIMATING PRICE CHANGES

STEP 11: CREATING THE DASHBOARD

PRODUCTION DEPLOYMENT

CONCLUSION

2 Intelligent Workflow and Build Tools

WHAT CAN TOOLING DO FOR ME?

WHAT IS BOWER?

WHAT IS GRUNT?

WHAT IS GULP?

WHAT IS YEOMAN?

CONCLUSION

3 Architecture

WHY IS ARCHITECTURE IMPORTANT?

CONTROLLERS, SERVICES, AND DIRECTIVES

ORGANIZING YOUR CODE WITH MODULES

DIRECTORY STRUCTURE

MODULE LOADERS

BEST PRACTICES FOR STRUCTURING USER AUTHENTICATION

CONCLUSION

4 Data Binding

WHAT IS DATA BINDING?

WHAT DATA BINDING CAN DO FOR YOU

SCOPING OUT ANGULARJS SCOPES

CONCLUSION

5 Directives

WHAT IS A DIRECTIVE?

A DEEPER UNDERSTANDING OF DIRECTIVES

CHANGING DIRECTIVE TEMPLATES AT RUNTIME

CONCLUSION

6 Templates, Location, and Routing

PART I: TEMPLATES

PART II: THE

$LOCATION

SERVICE

PART III: ROUTING

CONCLUSION

7 Services, Factories, and Providers

A BRIEF OVERVIEW OF DEPENDENCY INJECTION

BUILDING YOUR OWN SERVICES

COMMON USE CASES FOR SERVICES

UTILIZING BUILT-IN PROVIDERS

CONCLUSION

8 Server Communication

WHY WILL I LEARN?

INTRODUCTION TO PROMISES

SERVICES FOR HTTP REQUESTS

CONSUMING THE TWITTER REST API

SCAFFOLDING A REST API WITH STRONGLOOP LOOPBACK

USING WEB SOCKETS WITH ANGULARJS

USING FIREBASE WITH ANGULARJS

CONCLUSION

9 Testing and Debugging AngularJS Applications

ANGULARJS TESTING PHILOSOPHY

UNIT TESTING IN ANGULARJS

DOM INTEGRATION TESTS

DEBUGGING ANGULARJS APPS

CONCLUSION

10 Moving On

USING ANGULAR-UI BOOTSTRAP

HYBRID MOBILE APPS WITH THE IONIC FRAMEWORK

INTEGRATING OPEN SOURCE JAVASCRIPT WITH ANGULARJS

ANGULARJS AND ECMASCRIPT 6

CONCLUSION

Appendix Resources

Title page

Copyright

Dedication

About the Authors

About the Technical Editor

Credits

Acknowledgments

Advert

EULA

List of Illustrations

Chapter 1

Figure 1.1

Figure 1.2

Figure 1.3

Figure 1.4

Figure 1.5

Figure 1.6

Figure 1.7

Figure 1.8

Figure 1.9

Figure 1.10

Figure 1.11

Figure 1.12

Figure 1.13

Figure 1.14

Chapter 9

Figure 9.1

Figure 9.2

Figure 9.3

Figure 9.4

Figure 9.5

Figure 9.6

Figure 9.7

Figure 9.8

Guide

Cover

Table of Contents

Chapter

Pages

xxv

xxvi

xxvii

xxviii

xxix

xxx

xxxi

xxxii

xxxiii

xxxiv

1

2

3

4

5

6

7

8

9

10

12

13

14

15

16

17

19

20

21

22

23

24

25

26

28

29

30

31

32

34

35

37

38

40

41

42

43

45

47

48

51

53

54

55

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

74

75

76

78

79

80

83

84

85

86

87

88

89

91

93

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

123

124

125

126

129

131

132

133

134

135

136

137

138

139

140

142

143

144

145

146

147

148

149

150

151

152

153

154

155

157

159

160

161

162

163

164

165

166

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

184

185

186

187

188

189

190

193

194

195

196

199

200

201

203

204

205

206

207

208

209

211

212

213

214

215

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

243

244

245

247

248

249

250

251

252

253

254

255

256

257

258

260

261

262

263

264

265

266

268

269

270

271

272

273

274

275

277

278

279

280

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

299

300

301

302

303

305

307

308

309

310

311

313

315

316

317

318

319

320

321

322

323

324

325

326

328

329

330

332

333

334

335

336

337

338

339

340

341

342

343

345

346

347

348

349

350

351

352

353

354

355

1Building a Simple AngularJS Application

WHAT YOU WILL LEARN IN THIS CHAPTER:            

Creating a new AngularJS application from scratch

Creating custom controllers, directives, and services

Communicating with an external API server

Storing data client-side using HTML5 LocalStorage

Creating a simple animation with ngAnimate

Packaging your application for distribution and deployment using GitHub Pages

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER

You can find the wrox.com code downloads for this chapter at http://www.wrox.com/go/proangularjs on the Download Code tab. For added clarity, the code downloads contain an individual directory for each step of the application building guide. The README.md file located in the root directory of the companion code contains additional information for properly utilizing the code for each step of the guide. Those who prefer to use GitHub can find the repository for this application, which includes Git tags for each step of the guide and detailed documentation, by visiting http://github.com/diegonetto/stock-dog.

WHAT YOU ARE BUILDING

The best way to learn AngularJS is to jump directly into a real-world, hands-on application that leverages nearly all key components of the framework. Over the course of this chapter, you will build StockDog, a real-time stock watchlist monitoring and management application. For the unfamiliar, a watchlist in this context is simply an arbitrary grouping of desired stocks that are to be tracked for analytical purposes. The Yahoo Finance API (application programming interface) will be utilized to fetch real-time stock quote information from within the client. The application will not include a dynamic back end, so all information will be fetched from the Yahoo Finance API directly or, in the case of company ticker symbols, be contained within a static JSON (JavaScript Object Notation) file. By the end of this chapter, users of your application will be able to do the following:

Create custom-named watchlists with descriptions

Add stocks from the NYSE, NASDAQ, and AMEX exchanges

Monitor stock price changes in real time

Visualize portfolio performance of watchlists using charts

StockDog will consist of two main views that can be accessed via the application’s navigation bar. The dashboard view will serve as the landing page for StockDog, allowing users to create new watchlists and monitor portfolio performance in real time. The four key performance metrics displayed in this view will be Total Market Value, Total Day Change, Market Value by Watchlist (pie chart), and Day Change by Watchlist (bar graph). A sample dashboard view containing three watchlists is shown in .