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.
 

import_contacts

You may also like:

Related Posts

  • Python check for null
    17 November

    How to check for null in Python

    Table of ContentsHow to check if a variable is NULL in Python?Using the is operator to check if a variable is NULL in Python.Using the if condition to check if a variable is NULL in Python.Using the not equal to operator to check if a variable is NULL in Python. This article demonstrates the different […]

  • Split String with multiple delimiters
    17 November

    Split String With Multiple Delimiters In Python

    Table of ContentsSplitting a string in PythonWays to split a string in PythonUsing the split() and replace() functionsUsing the regular expressions In this post, we will see how to split String with multiple delimiters in Python. Splitting a string in Python When we talk about splitting a string, it means creating a collection of sub-strings […]

  • Funny Kahoot names
    17 November

    600+ Funny, Dirty, Inappropriate Names for Kahoot

    Table of ContentsFunny Names for KahootKahoot: A Brief OverviewHow to Change your Name on Kahoot?Funny Names for Kahoot: Overall EditionFunny Kahoot Names: Girls EditionFunny Names For Kahoot: Boys EditionFunny Names for Kahoot: Unique EditionFunny Troll Names for KahootFunny Inappropriate Names: Dirty Kahoot namesGood Kahoot NamesFunny Inappropriate Names: Set 2Frequently Asked Questions About Funny Names for […]

  • Funny steam names
    17 November

    600+ Funny Steam Names to Use in 2021

    Table of ContentsFunny Steam Names: Let’s Enhance your Steam Profile by Giving it a New NameAssigning Funny Steam Names:Step-By-Step Guide200+ Funny Steam Names70+ Cool Steam Names90 Good Steam Names50 Clever Steam Names30 Funny Steam Names For Boys35 Funny Steam Names For Girls25 Creative Cool Steam Names100+ Other Funny Steam Names to Consider in 2021Deleting Previous […]

  • Sort dictionary by value in Python
    17 November

    Sort dictionary by value in python

    Table of ContentsHow to sort sort dictionary by value in Python?Using for loop along with the sorted() function.Using the sorted() function to sort dictionary by value in Python.Using operator.itemgetter() function to sort sort dictionary by value in Python.Using lambda function to sort sort dictionary by value in Python.Using the OrderedDict() method to sort sort dictionary […]

  • Get class name in Python
    17 November

    Get class name in Python

    Table of ContentsHow to get the attributes of an object?Get Class name in python using the __class__ attribute Get Class name in python using type() functionConclusion While working with objects in python, several times we need to get their class name. In this article, we will discuss several ways to get the class name of an […]

Leave a Reply

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

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.