The first example will create a reusable bar chart component to demonstrate creating an AngularJS directive with an underlying controller. This is implemented within an HTML file, 01_just_bars.html
, which consists of the following components:
The AngularJS application object: This functions as an entry point for AngularJS code in the page (that is, in
app.js
)An AngularJS controller (in
controllers/basic_dashboard.js
): This creates the data and sends it to the directive that renders the HTML code for the graphThe directive: This renders the D3.js bar chart in
directives/bars.js
.
The AngularJS application is presented to the user via a web page, which begins by loading the AngularJS and D3.js libraries (this is common in all the examples in this chapter). Take a look at the following code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <script src="http://d3js.org/d3...