AngularJS - Add the AngularJS JavaScript

You will learn

In this tutorial series, we will explore another technology for Single Page Application (SPA) development - AngularJS (or just Angular). Angular is a popular web framework in North America, and is used by many companies for both internal and client-facing systems. These tutorials will parallel our SAPUI5 tutorials, building a visual interface using Angular, and connecting it to an OData back end service.

AngularJS series

Add AngularJS to our web application. We will introduce the angular module and controller to our mix, and show how they can be used to control the data in an application.

Next, we will create a JavaScript section to define our application. In this example, we will put the code in our index.html file, for convenience. Later, we will move this over to a separate file, which is the standard convention for working with large JavaScript applications.

Add a <script> element to the <head> of your document.

WARNING The placement of this script element is critical! The script must be after the “import” of your Angular code.

Next, we will add an Angular module and controller to the <script> tag.

The Angular module is the gathering point of many different Angular systems. A module pulls all of those components together in to a single place.

The Angular controller is one of those pieces. It defines custom functions and variables which are used inside of a particular scope.

In this simple application, we will use a single controller and a single scope for the entire tutorial. When your application becomes more complex, with multiple screens, you may choose to separate the different sections in to different controllers, and if it is big enough you may choose to have different modules for different sections. Angular allows you to divide this up, so that a variable, a function, or another Angular component used on one screen does not appear everywhere else. And, if you have a large application, with hundreds of variables, this makes keeping track of everything much easier.

What does this do? In our application, we have defined a controller. Then, we have asked Angular to give us access to the $scope, which is the set of variables and functions available to our application. Finally, we have attached our testdata to the $scope, which makes the test data visible to the local application.

Step 6: Run the application

Run the application. Nothing looks different, yet, because we haven’t attached the data to the HTML. That happens next.

Next, we have to tell the application which controller to use, and where it goes. The controller we defined is called helloController. We will add it to our <body> tag, so that it can be used in our entire HTML body.

We have added a field, but we have more than one row of data to display. To do this, we will use the ng-repeat module of Angular. This powerful attribute tells our code to loop across all of the elements in our array. ng-repeat has more options, check out the documentation for more details.

To set up the repeat, find the outermost item where the repeat starts. Add in the ng-repeat tag to that item.

In our case, we want to add ng-repeat="product in productList" to our <button> tag: