CodePug.com

Home | Games | Media | Programming | Raspberry Pi | Misc Content

Programming Fizz Buzz with Angular

Single page application (SPA) designs and framework seem to be growing in popularity right now around the web. One such JavaScript framework based on this paradigm that I am seeing used more and more is Angular. In learning any new framework, it helps to get ones hands wet by coding a problem with easy to understand requirements. This is where Fizz Buzz comes in.

What is Fizz Buzz

Expected Output

Angular Fizz Buzz implementation: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, 16, 17, Fizz, 19, Buzz, Fizz, 22, 23, Fizz, Buzz, 26, Fizz, 28, 29, FizzBuzz, 31, 32, Fizz, 34, Buzz, Fizz, 37, 38, Fizz, Buzz, 41, Fizz, 43, 44, FizzBuzz, 46, 47, Fizz, 49, Buzz, Fizz, 52, 53, Fizz, Buzz, 56, Fizz, 58, 59, FizzBuzz, 61, 62, Fizz, 64, Buzz, Fizz, 67, 68, Fizz, Buzz, 71, Fizz, 73, 74, FizzBuzz, 76, 77, Fizz, 79, Buzz, Fizz, 82, 83, Fizz, Buzz, 86, Fizz, 88, 89, FizzBuzz, 91, 92, Fizz, 94, Buzz, Fizz, 97, 98, Fizz, Buzz,

Design Approach

In generating the desired output, one can create an array containing 100 integers. This array can then be displayed with Angular’s ng-repeat directive. In order to add the Fizz and Buzz values where needed, a filter can be created in Angular which will replace the current value in the array passed to it by ng-repeat’s for-each mechanism based on the multiple of three or five criteria.

Implementation Using Angular

<!DOCTYPE html>

Angular Fizz Buzz implementation:
,

</code>