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.
 

Related Posts

  • Make requirements.txt in Python
    03 May

    Make requirements.txt in python

    Table of ContentsWhat is the requirements.txt file in Python?Ways to make requirements.txt file in PythonUsing the pip to make requirements.txt in PythonUsing the conda command to make requirements.txt file in PythonUsing the pipreqs package to make requirements.txt file in PythonConclusion What is the requirements.txt file in Python? Every package is also updated regularly and features […]

  • Create an array of 1 to 10 in Python
    03 May

    Create an Array of 1 to 10 in Python

    Table of ContentsIntroductionHow to create an array of 1 to 10 in Python?Using the range() function to create an array of 1 to 10 in Python.Using list comprehension along with the range() function to create an array of 1 to 10 in Python.Using a user-defined function to create an array of 1 to 10 in […]

  • Remove Urls from String in Python
    03 May

    Remove Urls from Text in Python

    Table of ContentsIntroductionWays to remove URLs from Text in PythonUsing the re.sub() function to remove URLs from Text in PythonUsing the re.findall() function to remove URLs from Text in PythonUsing the re.search() function to remove URLs from Text in PythonUsing the urllib.urlparse class to remove URLs from Text in PythonConclusion In this post, we will […]

  • Create a list from 1 to 100 in Python
    03 May

    Create a List from 1 to 100 in Python

    Table of ContentsWays to create a list from 1 to 100 in PythonUsing the range() function to create a list from 1 to 100 in PythonUsing the numpy.arange() function to create a list from 1 to 100 in PythonUsing the for loop with range() to create a list from 1 to 100 in PythonConclusion In […]

  • How to initialize an array in Constructor in C++
    23 April

    How to initialize an Array in Constructor in C++

    Table of ContentsArraysConstructors of a ClassWays to initialize an array in Constructor in C++Initialize an array in Constructor With std::fill()Initialize an array in Constructor Using for LoopInitialize an array in Constructor Using Member Initializer ListConclusion This article discusses methods of initializing an array in constructor in C++. Let us first discuss arrays and constructors in […]

  • Set an array to another array in java
    23 April

    Set an Array Equal to Another Array in Java

    Table of ContentsSetting an Array Variable Equal to Another Array VariableSet an Array Equal to Another Array in Java Using the clone() MethodSet an Array Equal to Another Array in Java Using the arraycopy() MethodSet an Array Equal to Another Array in Java Using the copyOf() MethodSet an Array Equal to Another Array in Java […]

Leave a Reply

Your email address will not be published.

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.