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
andindex.html
. Theapp.js
file is where you are going to set up your application while theindex.html
will hold the output.
LET'S GET STARTED
Include your
angular.js
andapp.js
files in yourindex.html
using the script tag.In your
index.html
, you need aninput
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 puttingng-app="nameOfAngularApp"
inside the start tag of the body).Wrap a
div
around yourinput
andp
tags then put inside of thediv
, the controller app. This is to ensure the controller app only act on whatever is inside thisdiv
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.
- Your input scope will be include in your
input
tag using theng-model="scopeName"
inside the start tag. set it to an empty string - Your output scope will be the one to hold the calculation result.
- Your input scope will be include in your
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 🙏
Top comments (0)