Saturday, 25 August 2018

AngularJS Tutorial For Beginners 2: How to Set up AngularJS

In this tutorial, we would set up AngularJS and test it to make sure it works. We would do this is 7 simple steps



Step 1: Open Notepad
Step 2: Paste the code below into notepad

<!doctype html>
<html ng-app>
  <head>
    <title>KTG AngularJS Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  </head>
  <body>
My First Program
  </body>
</html>

Step 3: Save with  a name test.html (you can choose another name, but it must end in .html).
Step 4: Open the location you  saved the file. Right-click and open the file in internet explorer
If it displays a web page with the text KTG AngularJS Tutorial, the congrat. If not, let me know in the comment box below.

In this setup we have used  the CDN link for AngularJS. CDN means content delivery network, which hosts the angular.js file.
Now you need to download a copy of angular.js file to your computer and replaces the CDN link in the head with the link to the file you downloaded. So let's continue in step 5.

Step 5: Click on this link to download angularJS -  and place it in the same folder as the file we create in step 2.

Now the folder should contain two files
  • angular.min.js
  • test.html
Step 6: Open the test.html file in notepad and replace the script tag with this one:


<script src="angular.min.js"></script>

Step 7: Save the changes and test the file again by opening it in Internet explorer (chrome or Firefox or any other browser)
If it open the web page and displays the same message as before then you are good to go.

Download Notepad++
We could actually continue using notepad, but just to make it a bit easier for us, we would be using Notepad++ in subsequent tutorials. Download Notepad++ from here.

Thank for your effort. Now on to Tutorial 3 - Write your First Script in AngularJS