How to create a simple name calculator app with AngularJS

Introduction

AngularJS is a popular Javascript frontend framework that is widely used by all and it's very easy to use. In this tutorial, I will teach you how to use AngularJS to develop a simple name calculator app.

How-to

• After downloading your angular file into your project folder, create two files which are app.js and index.html. The app.js file is where you are going to set up your application while the index.html will hold the output.

LET'S GET STARTED

• Include your angular.js and app.js files in your index.html using the script tag.

• In your index.html, you need an input and maybe a text line which will output the result. You can set this up using the form input tag and a paragraph tag to hold the output.

• The next step is to go into your app.js, set up an IIFE ( immediately invoked function express) which will hold your function.

• set up the angular app and a controller app which will hold the function that will control your name calculator app

• Include your angular app into the body of your index.html ( this is done by putting ng-app="nameOfAngularApp" inside the start tag of the body).

• Wrap a div around your input and p tags then put inside of the div, the controller app. This is to ensure the controller app only act on whatever is inside this div and doesn't affect any other thing on your page. It is done by putting `ng-controller="nameOfControllerApp" inside the start tag of the desired element you want it to have an effect on.

After the above steps, Your app.js will look like this: :

and your index.html will look like this:

Let's move on

The next step is setting up the functions in the controller app, let's go:

• The first step is to include $scope as an argument in the function of the controller app. This will enable you to set up anything in your app.

• Create two scopes. One for the input and the other for the output.

  1. Your input scope will be include in your input tag using the ng-model="scopeName" inside the start tag. set it to an empty string
  2. Your output scope will be the one to hold the calculation result.

• Create the function that will calculate the function and set it to the output scope.

After these steps, your app.js will look like this:

and your {% raw %}index.html will look like this :

Reach out if you have any question regarding this: Twitter, Email

Thanks for reading 🙏