AngularJS hello world example

AngularJs is an open-source web application framework mainly maintained by Google . It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures,  It helps you to solve major issues with single web page applications. You need to write very less code to achieve complex functionalities.

AngularJS tutorial:

In this post , we will see how to create angular js example.  I will try to create example as simple as possible.
We need to include angular .js in our pages. This can be done in two ways.

  • go to https://angularjs.org/ and click on download Angular js 1 and copy CDN link
  • You can directly download it from above link and put .js file your folder.

Example :

Copy below text , open notepad , paste it and save it as angularJSExample.html and open it in the browser.

Live demo:

Angular JS example

Explanation:

  • We have included angular js CDN in line number 6
  • If you see closely, we have used ng-app attribute with div element. It is called angular directive (We will learn about this letter). We just need to know that it tells angular about starting point of angular flow. So in this div element , we will have angular js related code.
  • You can understand ng-app as main() method in java
  • {{ }} defines angular expression, so whatever inside it will be evaluated. You can see {{10+40}} becomes 50 here.

What if we do not put ng-app and use angular expression:

  • It won’t evaluate the expression as simple as that.

Lets create another div without ng-app and see how it works
Angular js without ng-app

AngularJS did not evaluate expression for second div as it is out of scope for it.

Lets put ng-app at body tag

Angular js ng-app on bidy tag


As you can see, angular js has evaluated expressions for both div tags.

More example:

Lets take another example:

Live demo:

Angular js example

Explanation :

In this example, we have used textbox, so whatever you write in textbox, get reflected with hello.

  • We have used ng-app same as previous example.
  • If you notice, we have also used ng-model this time. It is also angular directive and it binds state of model and view, so whatever you write in text box, it get reflected in {{helloworld}} . You will be able to understand more about in the coming tutorials.
 

Was this post helpful?

Related Posts

  • 25 June

    Convert Roman Number to Integer in Python

    Table of ContentsHow to Convert Roman Number to Integer in PythonHow to convert roman number to integer in python?Using the if...else statement to convert roman number to integer in Python.Using classes and a dictionary to convert roman number to integer in Python.Using the roman module to convert roman number to integer in Python.ConclusionWas this post […]

  • 11 June

    Remove Single Quotes from String in Python

    Table of ContentsRemove single quotes from string in Python.How to remove single quotes from string in Python?Using the replace() function to remove single quotes from string in Python.Using a for loop to remove single quotes from string in Python.Using the join() function to remove single quotes from string in Python.Using the re module functions to […]

  • 11 June

    Escape Backslash Character in Python

    Table of ContentsEscape backslash character in python.How to use escape backslash character in python?Using the escape backslash character in python to represent whitespace characters.Using the escape backslash character in python to turn special characters into ordinary characters.Using the escape backslash character in f-strings in Python.Using the escape backslash character in raw strings in Python.Was this […]

  • 11 June

    Remove Parentheses From String in Java

    Table of ContentsJava StringsRemove Parentheses From a String Using the replaceAll() MethodRemove Parentheses From a String by TraversingConclusionWas this post helpful? Java uses the Strings data structure to store the text data. This article discusses methods to remove parentheses from a String in Java. Java Strings Java Strings is a class that stores the text […]

  • 11 June

    Break out of function in Python

    Table of ContentsBreak out of function in PythonHow to break out of function in Python?Using the return statement to break out of function in PythonUsing the try and except block to break out of function in PythonUsing the sys.exit() function to break out of function in PythonConclusionWas this post helpful? In this post, we will […]

  • 11 June

    Check if Object Is Iterable in Python

    Table of ContentsWhat are iterables in Python?How to check if object is iterable in Python?Using the iter() function to check if object is iterable in PythonUsing the for loop to check if object is iterable in PythonUsing the isinstance() function to check if object is iterable in PythonConclusionWas this post helpful? In this post, we […]

Leave a Reply

Your email address will not be published.

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.