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

  • 22 July

    Manage C Sharp Homework Assignment at Ease Online

    Table of ContentsC Sharp Homework Help: Use the Service and Get Your BenefitsC Sharp Assignment Help: Sound Guarantees for the CustomersTop-Notch Authentic ContentPrivacy24/7 SupportPlace Your Order and Get the Task Down at Ease In this post, we will see how to manage C sharp homework assignment online. Who can do my c# assignment fast? The […]

  • Break out of nested loop in java
    22 July

    How to break out of nested loops in Java

    Table of ContentsUsing break (will break inner loop)Using named loopUsing named blockUsing returnConclusion In this post, we will see how to break out of nested loops in Java. Using break (will break inner loop) It is very important to understand how nested loops work to ensure that applying break will output the desired result. If […]

  • showbox alternatives
    22 July

    15 Best Showbox Alternatives (With Download Links) in 2021

    Table of ContentsBest Showbox Alternatives to Try in 2021CrackleMovie HDPlaybox HDMovie BoxMegaBox HDTubi TvHuluPopcorn TimeCinema BoxFreeFlixMobdroVisit Popcorn FlixBobby Movie BoxVisit Flipps HDMovcyFrequently Asked QuestionWhat is Showbox?What is the need for Showbox alternatives?Which are the best Showbox alternatives?Are there free Showbox alternatives?Final Words Were you having trouble streaming your favourite movies, which made you look for […]

  • Kimcartoon alternatives
    21 July

    KimCartoon alternatives -13 Best Websites Like KimCartoon in 2021

    Table of ContentsBest KimCartoon alternatives in 2021CartoonsOnToonovaKissAnimeToonGetWatch Cartoons OnlineCartoonCrazyAnimedaoAnimeToonCartoon ExtraEyeonanimeNyaaMasteraniToonJetFrequently Asked Questions Is KimCartoon safe in 2021?Is KimCartoon legal in 2021?Is there any working proxy of KimCartoon in 2021?Wrapping Up Are you worried about KimCartoon getting shut recently? Well, we’ve you covered. KimCartoon has been one of the best platforms for seamlessly streaming cartoons in HD. […]

  • Trim String in C++
    19 July

    Trim String in C++

    Table of ContentsUsing Boost string algorithms to trim string in C++Using find_first_not_of() and find_last_not_of()` to trim strings in C++Using find_if() to trim the string in C++Using stringstream to trim the strings in C++Using a customized function to trim the strings in C++Conclusion When we take an input from an user, strings can have unwanted whitespaces […]

  • JSON parser in C++
    19 July

    JSON Parser in C++

    Table of ContentsSimple JSON Parser in C++ using JsonCpp libraryConclusion In this post, we will see about JSON parser in C++. There is no native support for JSON in C++. We can use a number of libraries that provide support for JSON in C++. We will use JsonCpp to parse JSON files in C++ which […]

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.