79 | * IF the price of 1 Bitcoin reaches X, THEN your starting investment becomes X AND your profit becomes X.
80 |
81 |
82 |
83 |
84 |
85 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/part5/main.css:
--------------------------------------------------------------------------------
1 | label, table {
2 | font-size: 15px;
3 | }
4 |
5 | input {
6 | max-width: 200px;
7 | }
8 |
9 | .number {
10 | font-weight: bold;
11 | }
12 |
13 | .jumbotron {
14 | height: 100%;
15 | margin-bottom: 0
16 | }
17 |
18 | .chart {
19 | height: 400px;
20 | }
21 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # AngularJS by Example - Building a Bitcoin Investment Calculator
2 |
3 | Angular JS is a client-side Javascript framework used for simplifying the process of developing maintainable web applications. **In this tutorial we'll design a basic Angular app that highlights much of what the framework has to offer.**
4 |
5 | > Before going any further, to fully understand this tutorial you need to be comfortable with *vanilla* Javascript, not just jQuery. For a crash course in Javascript, check out the Codeacademy Javascript [track](http://www.codecademy.com/tracks/javascript).
6 |
7 | First off, what are we building? Well, forget the overdone hello world and todo apps, let's build something more - a Bitcoin Calculator!
8 |
9 | This app details how much you could *potentially* profit if you invested X amount of dollars in Bitcoins. Through this tutorial, we'll walk you through the basics of designing a web app using *Angular (v1.4.5)*, highlighting many of the key features of the framework - including templating, two-way data binding, directives, and filters.
10 |
11 |
12 |
13 | **Last updated on 09/14/2015** - added the latest version of Angular ([1.4.5](https://code.angularjs.org/1.4.5/docs/api)) as well as dynamic charts via [D3](http://d3js.org/).
14 |
15 | ## Contents
16 |
17 | 1. [Part 1 - What is Angular?](https://github.com/mjhea0/thinkful-angular#part-1---what-is-angular)
18 | 1. [Part 2 - Basic Project](https://github.com/mjhea0/thinkful-angular#part-2---basic-project)
19 | 1. [Part 3 - Bitcoin Calculator](https://github.com/mjhea0/thinkful-angular#part-3---bitcoin-calculator)
20 | 1. [Part 4 - Data Visualization](https://github.com/mjhea0/thinkful-angular#part-4---data-visualization)
21 | 1. [Part 5 - Historical Price Chart](https://github.com/mjhea0/thinkful-angular#part-5---historical-price-chart)
22 |
23 | ## Part 1 - What is Angular?
24 |
25 | Angular is designed for creating dynamic, [single page applications](https://en.wikipedia.org/wiki/Single-page_application) as well as full web applications within the Model View Controller (MVC) pattern (Or, more precisely: the [MVVM](http://www.dotnet-tricks.com/Tutorial/designpatterns/2FMM060314-Understanding-MVC,-MVP-and-MVVM-Design-Patterns.html) pattern).
26 |
27 | Working within the MVC paradigm, it's easy to add (bind) data to your page, which automatically updates because the framework is always watching for changes. Put another way, with Angular, we can write front-end code without having to directly manipulate the DOM. It's also easy to learn since it works directly with HTML, by simply extending its functionality.
28 |
29 | Before we start building, read over some of Angular's main features:
30 |
31 | 1. **[Templates](http://docs.angularjs.org/guide/templates)**: Templates reside directly in your HTML, displaying dynamic data to the end user .
32 | 2. **[Two-way data binding](http://docs.angularjs.org/guide/databinding)**: Changes to your JavaScript module automatically update the DOM. In other words, it doesn't require an explicit refresh.
33 | 3. **[Routing](http://docs.angularjs.org/api/ngRoute/service/$route)**: Routing represents the possible application states; controllers and templates are employed to serve this purpose.
34 | 4. **[Directives](http://docs.angularjs.org/guide/directive)**: Directives are used for extending HTML with new functionality as well as encapsulating code for easy reuse.
35 |
36 | ## Part 2 - Basic Project
37 |
38 | Let's start with the very basics with a barebones HTML5 project boilerplate:
39 |
40 | ```html
41 |
42 |
43 |
44 | Bitcoin Investment Calculator
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
Bitcoin Investment Calculator
56 |
57 |
58 | ```
59 |
60 | Check out this [link](https://github.com/mjhea0/thinkful-html#html) if you'd like to know more about this structure. Notice how I included Angular in the page - ``. You must do this before the closing `` tag.
61 |
62 | Save this as *index.html*.
63 |
64 | Next, we'll dive right into Angular. First, let's define a *scope* for our project:
65 |
66 | ```html
67 |
68 |
69 | ```
70 |
71 | This simply binds or [bootstraps](https://docs.angularjs.org/guide/bootstrap) an unnamed Angular app to the DOM. Angular allows us to have multiple apps within the same HTML page, so this simple directive, [`ng-app`](http://docs.angularjs.org/api/ng/directive/ngApp), defines where each app begins and ends (scope), literally telling Angular where the app is active. In this case, since we are placing the app in the `` tag as an HTML attribute, we are essentially saying, "We have one Angular app that spans the entire page - from `` to ``".
72 |
73 | Just remember that you can place this directive anywhere on your page, and your app will run within that defined scope - such as a `
`, for example.
74 |
75 | Finally, let's add in the *model* and get our app working:
76 |
77 | ```html
78 |
How many Bitcoins do you have?
79 |
80 |
81 |
82 |
You have {{ somenumber }} Bitcoins - nice!
83 | ```
84 |
85 | Here we are defining the directive [`ng-model`](http://docs.angularjs.org/api/ng/directive/ngModel) in the input box as `ng-model="somenumber"`. By doing so, we have bound the value within the input box to the model, so when the input value changes, Angular automatically updates the model. This is [two-way binding](http://docs.angularjs.org/guide/databinding) in action. Get used to this concept as this is part of what makes Angular so powerful - and fun to use.
86 |
87 | Next, by wrapping the model value, `somenumber` in double curly braces - which are used as delimiters for the results from expressions - we are simply telling Angular to replace that text with the actual value, which, again, comes from the number added to the input box.
88 |
89 | Here's the final code, which includes some [Bootstrap](http://getbootstrap.com/) styles:
90 |
91 | ```html
92 |
93 |
94 |
95 |
96 | Bitcoin Investment Calculator
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
108 |
109 |
110 |
111 |
Bitcoin Investment Calculator
112 |
113 |
How many Bitcoins do you have?
114 |
115 |
116 |
117 |
You have {{ somenumber }} Bitcoins - nice!
118 |
119 |
120 |
121 | ```
122 |
123 | Run this in your browser. You should see this:
124 |
125 | 
126 |
127 | Watch what happens when you change the value in the input box. Two-way binding! The DOM changes with each keystroke, without the need for any code to refresh the page.
128 |
129 | Play around with code here: [http://jsfiddle.net/mjhea0/9ear3/](http://jsfiddle.net/mjhea0/9ear3/). You can also grab the actual HTML from this [repo](https://github.com/mjhea0/thinkful-angular/tree/master/part2).
130 |
131 | With the basics out of the way, let's move on and create a more robust app.
132 |
133 | ## Part 3 - Bitcoin Calculator
134 |
135 | We'll be building on the same file from before. Feel free to save it as something new, or in a new directory, like - *btc-calculator/index.html*, for example.
136 |
137 | ### Module and Controller
138 |
139 | First, let's add in a *controller* and give our Angular app a name:
140 |
141 | ```html
142 |
143 |
144 | ```
145 |
146 | The [Controller](http://docs.angularjs.org/api/ng/directive/ngController), `ngController`, is a directive that will run the `bitcoinController` controller, which controls, or talks to, the view. Controllers link and provide information to the model and our view. You'll also notice that we assigned a value to our `ng-app` directive, `ng-app="bitcoinCalculator"`. This tells angular which module we'll be using in our app.
147 |
148 | If you try the app now, you'll notice it's broken. That's because we defined a controller, but we have not defined how said controller works. Let's do that.
149 |
150 | Add an Angular module:
151 |
152 | ```html
153 |
154 |
161 | ```
162 |
163 | Angular [modules](http://docs.angularjs.org/guide/module) are used for organizing JavaScript code into separate, self-contained components.
164 |
165 | Inside the modules we can add:
166 |
167 | - controllers
168 | - directives
169 | - filters
170 | - routes
171 |
172 | In the current app:
173 |
174 | 1. `angular.module("name",[])` instantiates and returns a new module
175 | 2. `function ($scope) {$scope.somenumber = 0;}` binds the controller with the view
176 |
177 | When Angular initializes this controller, it creates and injects the `$scope` object into the function with [dependency injection](http://docs.angularjs.org/guide/di). Don't worry if this doesn't make sense, it's a bit of Angular magic for creating and using the `$scope` object.
178 |
179 | In this case, we are simply binding the number 0 to `somenumber` within the view.
180 |
181 | Try your application now in the browser. It should now work.
182 |
183 | > You do not have to assign a variable to a module for your app to work, but it is a best practice.
184 |
185 | ### Update the HTML
186 |
187 | Before moving on with more Angular, let's step back and look at the functionality of our final app: **The application we'll be developing is a Bitcoin investment calculator that details how much you could potentially profit if you invested X amount of dollars in Bitcoins.**
188 |
189 | *What does that mean in terms of the HTML structure?* Well, we need an input box for the initial investment and a table that shows IF the price of 1 BTC reaches X, THEN your starting investment would be X AND your profit is X. Let's create the HTML for that now:
190 |
191 | ```html
192 |
193 |
194 |
195 |
196 | Bitcoin Investment Calculator
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
208 |
209 |
216 |
217 |
218 |
219 |
220 |
221 |
Bitcoin Investment Calculator
222 |
223 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
Price of 1 BTC
236 |
Starting Investment
237 |
Profit
238 |
239 |
240 |
241 |
242 |
price
243 |
new amt
244 |
new profit
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 | ```
257 |
258 | Check it out in your browser. It should look like this:
259 |
260 | 
261 |
262 | Nothing too exciting happening; just another input box and a table, along with more Bootstrap styles. You can grab the Bitcoin image [here](https://raw.githubusercontent.com/mjhea0/thinkful-angular/master/part3/img/btc.png).
263 |
264 | ### Update Module and Controller
265 |
266 | Next, update our module and controller.
267 |
268 | ```html
269 |
270 |
285 | ```
286 |
287 | Without going into too much detail, because I assume you are comfortable with JavaScript, we are grabbing data from the [BitPay API](https://bitpay.com/api/rates), then grabbing the current value of a Bitcoin in USD. We assign this value to the variable `currRate`.
288 |
289 | Let's add this to the DOM:
290 |
291 | ```html
292 |
Current Price (USD): ${{currRate}}
293 | ```
294 |
295 | Now, do some basic calculations in the module:
296 |
297 | ```html
298 |
299 |
317 | ```
318 |
319 | I'll let you evaluate those calculations for now. We'll break one further down. Notice how we have to pass a price into the function.
320 |
321 | Next, go ahead and append them to the DOM, making sure to pass in a price:
322 |
323 | ```html
324 |
325 |
326 |
1000
327 |
{{ newAmt(1000) }}
328 |
{{ profit(1000) }}
329 |
330 |
331 | ```
332 |
333 | Check this out in the browser. Depending upon the current price of 1 Bitcoin, you should see:
334 |
335 | 
336 |
337 | For clarity, if we look at the first calculation, `newAmt`, let's plug in the values: `$scope.newAmt = function(1000){return 1000/563.64 * 5000;}`. Make sense?
338 |
339 | Add more values into the table:
340 |
341 | ```html
342 |
343 |
344 |
$1,000
345 |
{{ newAmt(1000) }}
346 |
{{ profit(1000) }}
347 |
348 |
349 |
$5,000
350 |
{{ newAmt(5000) }}
351 |
{{ profit(5000) }}
352 |
353 |
354 |
$10,000
355 |
{{ newAmt(10000) }}
356 |
{{ profit(10000) }}
357 |
358 |
359 |
$25,000
360 |
{{ newAmt(25000) }}
361 |
{{ profit(25000) }}
362 |
363 |
364 |
$50,000
365 |
{{ newAmt(50000) }}
366 |
{{ profit(50000) }}
367 |
368 |
369 | ```
370 |
371 | Check to make sure that worked before moving on.
372 |
373 | ### Filters
374 |
375 | Angular [Filters](http://docs.angularjs.org/guide/filter) are used to update the value of an expression, but we are going to use them to simply alter the returned output.
376 |
377 | ```html
378 |
Current Price (USD): {{currRate | currency }}
379 |
380 | ...
381 |
382 |
383 |
$1,000
384 |
{{ newAmt(1000) | currency }}
385 |
{{ profit(1000) | currency }}
386 |
387 |
388 |
$5,000
389 |
{{ newAmt(5000) | currency }}
390 |
{{ profit(5000) | currency }}
391 |
392 |
393 |
$10,000
394 |
{{ newAmt(10000) | currency }}
395 |
{{ profit(10000) | currency }}
396 |
397 |
398 |
$25,000
399 |
{{ newAmt(25000) | currency }}
400 |
{{ profit(25000) | currency }}
401 |
402 |
403 |
$50,000
404 |
{{ newAmt(50000) | currency }}
405 |
{{ profit(50000) | currency }}
406 |
407 | ```
408 |
409 | As you probably guessed, the [currency](http://docs.angularjs.org/api/ng/filter/currency) filter formats a number as currency. When used, you can either define a currency, `| currency:"USD$"`, or let Angular decide which to use based on your geolocation, `| currency`.
410 |
411 | ### Model
412 |
413 | ```html
414 |
415 | ```
416 |
417 | Remember how [models](http://docs.angularjs.org/api/ng/directive/ngModel) work? Here we are binding a model called `InitialAmt` to the input form. This is a perfect example of two-way binding:
418 |
419 | 1. If we update the model, we update the view with `placeholder="{{initialAmt}}"`.
420 | 1. We can also update the view (by entering a new value in the input box), so that it updates the model, making our app dynamic.
421 |
422 | It's circular: edit the model, and it updates the view; edit the view and it updates the model!
423 |
424 | Test it out!
425 |
426 | ### Update HTML
427 |
428 | Finally, update the styles and HTML structure:
429 |
430 | ```html
431 |
432 |
433 |
434 |
435 | Bitcoin Investment Calculator
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |
444 |
449 |
450 |
468 |
469 |
470 |
471 |
472 |
473 |
Bitcoin Investment Calculator
474 |
475 |
479 |
480 |
Current Price (USD): {{currRate | currency }}
481 |
482 |
483 |
484 |
485 |
486 |
487 |
488 |
489 |
Price of 1 BTC
490 |
Starting Investment
491 |
Profit
492 |
493 |
494 |
495 |
496 |
$1,000
497 |
{{ newAmt(1000) | currency }}
498 |
{{ profit(1000) | currency }}
499 |
500 |
501 |
$5,000
502 |
{{ newAmt(5000) | currency }}
503 |
{{ profit(5000) | currency }}
504 |
505 |
506 |
$10,000
507 |
{{ newAmt(10000) | currency }}
508 |
{{ profit(10000) | currency }}
509 |
510 |
511 |
$25,000
512 |
{{ newAmt(25000) | currency }}
513 |
{{ profit(25000) | currency }}
514 |
515 |
516 |
$50,000
517 |
{{ newAmt(50000) | currency }}
518 |
{{ profit(50000) | currency }}
519 |
520 |
521 |
522 | * IF the price of 1 Bitcoin reaches X, THEN your starting investment becomes X AND your profit becomes X.
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 | ```
533 |
534 | Your app should now look like this:
535 |
536 | 
537 |
538 | Next, let's look at adding data visualization. Need the code for Part 3? Grab it [here](https://github.com/mjhea0/thinkful-angular/tree/master/part3).
539 |
540 | ## Part 4 - Data Visualization
541 |
542 | We'll be utilizing the [Angularjs-nvd3-directives](http://angularjs-nvd3-directives.github.io/angularjs-nvd3-directives/) to add powerful charts to our app based on [D3](http://d3js.org/), a JavaScript charting library. Before that though, let's quickly update the app's styles and move the Angular module to an external JavaScript file.
543 |
544 | ### Styles
545 |
546 | Add a *main.css* file and move the styles from the HTML document to the newly created file:
547 |
548 | ```css
549 | label, table {
550 | font-size: 15px;
551 | }
552 |
553 | input {
554 | max-width: 200px;
555 | }
556 |
557 | .number {
558 | font-weight: bold;
559 | }
560 |
561 | .jumbotron {
562 | height: 100%;
563 | margin-bottom: 0;
564 | }
565 | ```
566 |
567 | Then reference a link to the stylesheet in *index.html*, just below the Bootstrap CSS reference:
568 |
569 | ```html
570 |
571 | ```
572 |
573 | ### Scripts
574 |
575 | Next, grab the scripts from the HTML document and add them to a new file called *main.js*:
576 |
577 | ```javascript
578 | var bitcoinCalculator = angular.module('bitcoinCalculator', []);
579 | bitcoinCalculator.controller('bitcoinController', function($scope, $http){
580 | // calling the api, grabbing the value for USD, appending it to the dom
581 | $http.get("https://bitpay.com/api/rates")
582 | .success(function(data){
583 | $scope.rates = data;
584 | for(var i=0;i
604 | ```
605 |
606 | Then move the script tags to the bottom of the file, just before the closing `` tag.
607 |
608 | ### HTML
609 |
610 | Finally, update the HTML like so:
611 |
612 | ```html
613 |
614 |
615 |
616 |
617 | Bitcoin Investment Calculator
618 |
619 |
620 |
621 |
622 |
623 |
624 |
625 |
626 |
627 |
628 |
629 |
630 |
Bitcoin Investment Calculator
631 |
632 |
633 |
634 |
635 |
636 |
637 |
638 |
642 |
643 |
Current Price (USD): {{currRate | currency }}
644 |
645 |
646 |
647 |
648 |
649 |
650 |
651 |
652 |
653 |
654 |
655 |
656 |
657 |
Price of 1 BTC
658 |
Starting Investment
659 |
Profit
660 |
661 |
662 |
663 |
664 |
$1,000
665 |
{{ newAmt(1000) | currency }}
666 |
{{ profit(1000) | currency }}
667 |
668 |
669 |
$5,000
670 |
{{ newAmt(5000) | currency }}
671 |
{{ profit(5000) | currency }}
672 |
673 |
674 |
$10,000
675 |
{{ newAmt(10000) | currency }}
676 |
{{ profit(10000) | currency }}
677 |
678 |
679 |
$25,000
680 |
{{ newAmt(25000) | currency }}
681 |
{{ profit(25000) | currency }}
682 |
683 |
684 |
$50,000
685 |
{{ newAmt(50000) | currency }}
686 |
{{ profit(50000) | currency }}
687 |
688 |
689 |
690 | * IF the price of 1 Bitcoin reaches X, THEN your starting investment becomes X AND your profit becomes X.
691 |
692 |
693 |
694 |
695 |
696 |
697 |
698 |
699 |
700 |
701 |
702 | ```
703 |
704 | ### Angularjs-nvd3-directives
705 |
706 | Let's chart the historical Bitcoin rate, which we can download as a CSV from [CoinDesk](http://www.coindesk.com/price/). We need to convert this into JSON, but first let's get Angularjs-nvd3-directives installed.
707 |
708 | Add the following dependencies to your scripts in *index.html*, just below Angular:
709 |
710 | ```html
711 |
712 |
713 |
714 | ```
715 |
716 | Then add the following CSS reference:
717 |
718 | ```html
719 |
720 | ```
721 |
722 | Now we can get a basic chart up!
723 |
724 | ### Quick Chart
725 |
726 | Add the following code just before the `
` that closes out the `jumbotron`:
727 |
728 | ```html
729 |
730 |
731 |
732 |
733 |
734 |
735 | ```
736 |
737 | Then add the `exampleData` to the controller in *main.js*:
738 |
739 | ```javascript
740 | $scope.exampleData = [{
741 | "key": "Quantity",
742 | "bar": true,
743 | "values": [
744 | [10, 20],
745 | [20, 40],
746 | [30, 60],
747 | [40, 80],
748 | [50, 100]
749 | ]
750 | }];
751 | ```
752 |
753 | Be sure to inject the directive into the module:
754 |
755 | ```javascript
756 | var bitcoinCalculator = angular.module('bitcoinCalculator', ['nvd3ChartDirectives']);
757 | ```
758 |
759 | And you should see a chart at the bottom that looks like this:
760 |
761 | 
762 |
763 | Grab the updated code from the [repo](https://github.com/mjhea0/thinkful-angular/tree/master/part4).
764 |
765 | ## Part 5 - Historical Price Chart
766 |
767 | For the historical price chart, let's utilize a [line chart](http://angularjs-nvd3-directives.github.io/angularjs-nvd3-directives/line.chart.html).
768 |
769 | ### Controller
770 |
771 | First, remove the chart we created in Part 3 from both *index.html* and *main.js*. Then update the controller, like so:
772 |
773 | ```javascript
774 | $scope.xAxisTickFormatFunction = function(){
775 | return function(date){
776 | return d3.time.format('%x')(new Date(date));
777 | };
778 | };
779 |
780 | $scope.bitcoinHistoricalData = [{
781 | "key": "Prices",
782 | "values": values
783 | }];
784 | ```
785 |
786 | Again, we're assigning data to a `$scope`. The actual values come from a variable called `values`; and the data for this can be found [here](https://github.com/mjhea0/thinkful-angular/blob/master/part5/prices.js). For now, go ahead and add this variable to the *main.js* file, just below the controller.
787 |
788 | The `xAxisTickFormatFunction` function formats the date correctly in the DOM.
789 |
790 | ### DOM
791 |
792 | Next, add the directive to the DOM:
793 |
794 | ```html
795 |
796 |
797 |
805 |
806 |
807 |
808 | ```
809 |
810 | Test this out! You should see an interactive chart. Try selecting parts of the line to see tool tips.
811 |
812 | 
813 |
814 | For more configuration options, check out the official [documentation](http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html).
815 |
816 | ## Conclusion
817 |
818 | Well, we accomplished a lot but, in actuality, really just scratched the surface of Angular. The framework has so much more to offer. Go back and review what you've learned thus far, and see if you can learn more by extending this application on your own. Start by looking at the [BitPay API](https://bitpay.com/api) to see what else you can implement. You could also break apart your controllers into two separate controllers and even abstract some of the logic out to [factories and services](http://mherman.org/blog/2014/06/12/primer-on-angularjs-service-types/#.VfbWXFNViko). Want more? Check out creating your own, reusable custom [directives](https://docs.angularjs.org/guide/directive)!
819 |
820 | Grab the final code from the [repo](https://github.com/mjhea0/thinkful-angular/tree/master/btc-calculator). Cheers!
821 |
822 |
823 |
824 | *Add some new functionality? Create a PR and we'll add a link to this post.*
825 |
--------------------------------------------------------------------------------
36 |