English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Developing an AngularJS Edge sample chapter

Preface

This book is intended for intermediate JavaScript programmers. We make no attempt to explain the JavaScript syntax used (except in the cases where AngularJS may introduce a peculiarity), nor do we explain concepts such as closures, function chaining, callbacks, or other common patterns.

We do explain basic AngularJS concepts, components, and their applications, and we cover more topics in detail where warranted. We provide examples along the way, answer questions, and correct common misconceptions. Together, we'll build a working single-page weblog application using AngularJS.

You'll need somewhere to run your examples. I choose Plunker (http://plnkr.co), as it's great sandbox for developing JavaScript applications.  Plunker's written in AngularJS; however, please note it doesn't run in IE.  You may want to give JSFiddle a try if you use IE (http://jsfiddle.net).  

Where To Get The Code

All code used in examples in this ebook, including the final product, is available for download at https://github.com/angularjsedge. This page also includes links to working examples (on Plunker) for much of the code in this book.

You can purchase the complete book here.

Setup

To get going, you'll want to get AngularJS from http://www.angularjs.org. At the time of this writing, the current stable version is 1.0.5. AngularJS comes in stable and unstable branches; the 1.0.x is stable and 1.1.x is unstable.   Also to help with some examples, you will want to get your paws on jQuery (http://www.jquery.com), Jasmine (http://pivotal.github.com/jasmine/), and QUnit (http://www.qunitjs.com) if that is how you roll (this is optional). Note, that if you are using Plunker, you should probably just use CDN versions of these libraries if they are available (instead of uploading the JavaScript files).  

To actually run the unit tests we will be writing, you should get your hands on Karma (http://karma-runner.github.io/0.8/index.html). This requires NodeJS (http://node.js.org) to run. Furthermore, you will need the AngularJS Mocks module for Jasmine integration (http://code.angularjs.org/1.0.5/angular-mocks.js).

Karma setup

Karma doesn't work out of the box; it needs to know what to test. It uses Chrome as its test runner by default, so to keep configuration simple, please have it handy.

  • Install Node (http://nodejs.org/download). Depending on your system, this will be an installer, binary, or source code that you'll need to compile. 
  • Create a project directory. I'm using /Volumes/projects/book.
  • Download AngularJS and AngularJS mocks, as noted above, and put them in this directory.
  • Download the book.js and bookSpec.js files from the book's website, and put them in this directory.

Navigate to your project directory and execute the following:

[chiller@overthruster book] npm install -g karma

Next, you will execute testacular init, a small script to set up your configuration file:

[chiller@overthruster ~]$ karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add the Require.js adapter into the files.
Press tab to list possible options. Enter to move to the next question.
 > no

Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

Which files do you want to test ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> /Volumes/projects/book/angular.min.js
> /Volumes/projects/book/angular-mocks.js
> /Volumes/projects/book/book.js
> /Volumes/projects/book/bookSpec.js
>

Any files you want to exclude ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Testacular to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Config file generated at "/Users/chiller/karma.conf.js".

Finally, to run the tests, execute:

[chiller@overthruster book] karma start

Chrome should launch and you should see that tests passed in your terminal. Huzzah!

About the Author

Christopher Hiller is a full-stack software engineer living and working in Portland, OR. He has over 15 years of web development experience and is a JavaScript zealot. When not coding epic masterpieces, he enjoys being a new dad, gaming, craft beers and woodworking. Chris can be contacted via GitHub, at: http://github.com/boneskull.

Acknowledgements

We would like to thank the following reviewers who offered their time to make this book even more valuable: 

Ashley Fisher, Dean Sofer, Greg Goforth, Konstantin Stepanov, Trey Witteried, Dan Doyon, Ken Koontz, Peter Bacon Darwin and Mykhailo Kotsur.

And special thanks goes to Kim Lokøy who not only checked code and provided valuable feedback, but went over everything a second time for us and helped clarify comments.

Resources

Hopefully this book will help you get comfortable and excited about AngularJS.  You're going to write some great applications and enjoy doing it.

If you want further information, some great resources include:

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.