AngularJS - Separate the JavaScript and CSS files

AngularJS - Separate the JavaScript and CSS files

Step #4: Move the CSS and JavaScript code from the HTML page to separate files on the web server.

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.

Details

AngularJS series

Step 4: Connect an external OData feed to our application. While doing that, we will also learn how to use an Angular factory to insert functionality in multiple places. Finally, we will examine the Angular $resource factory, which helps us connect to REST resources.

Move the JavaScript to a Separate File

First, let’s move the JavaScript and CSS files out of our application, and in to a proper place in our project.

Right click on the folder HelloAngular and select New –> Folder

Name the folder js, and click OK

Next, right click on the new js folder, and select New –> File

Name this file main.js and click OK.

Next, copy this code in to the new main.js file. (It is the same code that is in your index.html file.) Then click Save.