Tags

Share

Introduction

This web-based project is all about teaching you implementing data binding option and its features on a javascript file through ajax.googleapis.com. After taking this tutorial, you will be acquainted with the app, module, controller and last but not least directive feature in AngularJS. Furthermore, ng-model features and the data binding process with input elements are well-explained throughout the source code. To inspect the project itself, you can click the preview button down below; to download project tools, you can use download as zip folder option by subscribing.

For more information about the code files, please visit Source Code section below.

Figure - 14.1

Starting Angular JS App

First of all, you have to start AngularJS apps and controllers above the script at which they are executed , using ng-app and ng-controller.

In this case, the app and controller are named as Chart and Color, you have to initial them with these names.

Figure - 14.2

Data Binding

After implementing AngularJS as script tag format, it is ready to add input elements on body.

Figure - 14.3

Now, you can bind data defined at colorChart.js as $scope variables to input elements by using ng-model like ng-model="component1".

In this method, you can either use pre-defined $scope variables or re-defined $scope variables in functions.

Creating <colorchart> Directive

After creating module and controller variables to start Chart app and Color controller, you have to define $scope variables for data binding primarily.

app.controller('Color', function($scope) {

$scope.component1 = "red"; $scope.component2 = "#ff6666";

});

Figure - 14.4

Now, it is ready to create a directive, in this case, named as colorchart. Do not forget that directives can be used as elements with id and class name as well as an html element with tags.

Figure - 14.5

By using template, you can execute other elements and functions in directives without rows of html code.

After that, bind $scope variables to colorchart in which circle divs placed, using other binding method known as two brackets method - {{ component1 }} .