First AngularJS Application

I created my first AngularJS application. It is a simple application that allows a user to create a pie chart.

pie

You can have a look at it in action if you click on this link :

http://blue-walrus.com/pie-chart-creator/

I wanted a third party library to create the pie chart so I looked at what angular plugins were out there and I came across the following angularjs component :

http://jtblin.github.io/angular-chart.js/

(The angular-chart library is actually just a wrapper for a javascript library called Chart.js http://www.chartjs.org/)

I also wanted a javascript color chooser so I found a component called jscolor (http://jscolor.com/)

 

Along with the angularjs source, all these source files were added to my index file like so :

 

Part 1. Pie component HTML

The pie chart application requires a central canvas where the chart is displayed. According the angular-chart documentation the chart is added to a canvas by means of setting correct class values, and adding a number of custom directives (eg. chart-legend, chart-labels etc)

this is how we add a chart in a canvas:

 

This is wrapped in a div with an angularjs controller directive (which i will call PieCtrl).

Note also the canvasTitle. It uses a binding point for the chart title (the double curley braces).

 

Part 2. Pie Item component in HTML

Next we create the HTML for the adding of slices. This is more complex and and is made up of three different areas (or divs). All three divs are under the same controller however.

DIV: PieItemsTitle

The pie item title div has an input which maps to the chartName.

ng-model = “slice.newSliceName”

 

DIV: PieItemsAdd

The pieItemsAdd is a form with three fields; the name, color and value of the slice. All these field values use the ng-model directive to map onto a data value in the controller.

 

ng-model = “slice.newSliceName”

ng-model = “slice.newSlicePercent”

ng-model = “slice.newSliceColor”

 

I also made use of ng-minlength to force a user to enter a value for some of the fields before the form could be submitted.

 

 

DIV: PieItemsList

Lastly I have the PieItemsList which is a div that uses an ng-repeater to iterate over all the objects in the slices array.

 

 

Javascript

Part 1. PieItemsCtrl

The PieItemsCtrl is the controller that sits behind the Pie Items component. It basicall handles all the events that are triggered in the DIVs

 

Part 2.

Part 3.

 

 

Part 6. Header

 


Posted in Uncategorized | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

THREE_COLUMN_PAGE