Learn Angular JS 2021 – Hello World Tutorial for Beginners

Build your first AngularJS project

by Alexandra Kropova from Mammoth Interactive

Steps to make a Hello World app:

  1. Build an HTML file
  2. Convert file to an Angular document
  3. Build a controller element
  4. Import AngularJS
  5. Build a script
  6. Test the website

 

Want to learn more? Enroll in Complete Web & App Development with Machine Learning For All (125 Hours). Free in the Mammoth Unlimited Membership. Get 200+ courses and 2,000 hours at a dirt-cheap price.

Step 1: Build an HTML file

What is HTML?

  • HTML is a markup language. We use HTML to build the elements of a webpage.

Build a new HTML file called helloAngular.html or similar.

How to make an HTML file:
  • Option 1 – Use a code editor like Visual Studio or Atom to make a new file.
  • Option 2 – Use an online code editor like jsbin.com.
  • Option 3 – Use a text editor. You can make the file by making a text file and saving it as a .html file instead of a .txt file.
    • You can even save it as a .txt file and then rename it to a .html file.
    • Just make sure the file isn’t saved with any special formatting.

The bare-bones HTML we need:

<!DOCTYPE html>  
<html>  
<body>
</body>  
</html>
Breaking down this code:
  • HTML uses alligator brackets <> to build each element.
  • <!DOCTYPE html> denotes that the file should be read as an HTML file.
  • <html> builds the container element to store all your other HTML elements.
  • <body> builds the body element. This elements stores all the visual elements on the page.
  • For many elements, such as <html> and <body>, you must have opening and closing tags.
Note
  • This is a very basic setup for a webpage. Normally, you would have a lot more content and metadata.

 


Step 2: Convert file to an Angular document

<!DOCTYPE html>  
<html ng-app="myApp"> 
<body>
</body>  
</html>
Breaking down this code:

1. We added the property ng-app to our <html> element.

What is ng-app in AngularJS?
    • ng-app is a keyword that makes our website into an AngularJS website, instead of a regular HTML website.
    • ng-app initializes the AngularJS framework automatically

2. We gave the property a value myApp.

  • The value of the ng-app property is the name of the app.
  • You can replace myApp with any name you’d like.

 


Step 3: Build a controller element

<!DOCTYPE html>  
<html ng-app="myApp"> 
<body>
<h1 ng-controller="GreetingController">{{greeting}}</h1>
</body> 
</html>
Breaking down this code:
  • <h1> is a Heading 1 HTML element, the largest of all headings.
    • Use a <h1> to build the most important element on the page.
  • ng-controller builds an AngularJS controller.
    • A controller holds business logic.
  • ng-controller is named GreetingController.
  • {{greeting}} is a placeholder containing a member variable greeting.
    • We will replace this entire item with the value of the variable set with AngularJS.

 


Step 4: Import AngularJS

We must load AngularJS into the project to use its functionality.

<!DOCTYPE html>  
<html ng-app="myApp"> 
<body>
<h1 ng-controller="GreetingController">{{greeting}}</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body> 
</html>
Breaking down this code:
  • This new line loads AngularJS into the website via a Content Delivery Network (CDN).
CDN for AngularJS
Why use a CDN?
  • A CDN allows us to quickly load AngularJS into the project without having to install anything!
  • Now we can use AngularJS functionality in the project.

 


Step 5: Build a script

The final step of building the Hello World project!

<!DOCTYPE html>  
<html ng-app="myApp"> 
<body>
<h1 ng-controller="GreetingController">{{ greeting }}</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 
<script>

const app = angular.module("myApp", []);

app.controller("GreetingController",

     function ($scope) {

           $scope.greeting = "Hello World";
     }
);
</script>
</body>
</html>
Breaking down this code:
  • <script> opens an HTML tag to store JavaScript code.
  • const app creates a constant.
    • A constant stores a piece of data and cannot be changed.
  • The value of the constant is the AngularJS app we built in HTML and called “myApp”.
  • We grabbed the controller in the app that was named “GreetingController”.
  • $scope is the binding part between the HTML and the JavaScript.
  • From the scope of the controller, we took the member variable greeting and set its value.

 


Step 6: Test the website

To see the site in action, open your helloAngular.html file in a web browser. You should see “Hello World” displayed on the page!

Note

If you see {{greeting}} displayed instead, something likely went wrong. Check your code to make sure you don’t have any tiny errors. Even one character can break your whole website!

Want to learn more? Enroll in Complete Web & App Development with Machine Learning For All (125 Hours). Free in the Mammoth Unlimited Membership. Get 200+ courses and 2,000 hours at a dirt-cheap price.

Leave a Reply

Your email address will not be published. Required fields are marked *

Mammoth Interactive Favicon

Why you NEED to take this course :

Get in Touch.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

EMAIL US

support@mammothinteractive.com