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

  • 04 December

    Create Array of Objects in PHP

    Table of ContentsUsing [] syntaxUsing array() methodUsing stdClass Object An array can contain a sequence of elements of different data types. From strings to integers to floats to objects. In this post, we will discuss the different ways to how to create an array of objects in PHP. Using [] syntax We can use the […]

  • 04 December

    Get Parameters From URL String in PHP

    Use parse_url() with parse_str() functions Use parse_url() with parse_str() to get parameters from URL String in PHP. The parse_url() function is used to return the components of a URL by parsing it and parse_str() is used to create an associate array of query parameters and their values. [crayon-638c36b67b295380956788/] [crayon-638c36b67b29b017586597/] Once you have the array of […]

  • 02 December

    Pass Variable From PHP to JavaScript

    Table of ContentsUse echo methodUse json_encode methodUse htmlspecialchars method Use echo method In order to pass variable from PHP to JavaScript, you will need to use the echo statement. This will print out the variable for you. For example, if you have a variable named $name, you would use the following code: [crayon-638c36b67bf29122667430/] This will […]

  • 02 December

    Remove Quotes from String in PHP

    Table of ContentsRemove Quotes from String in PhpUsing str_replace() MethodUsing preg_replace() MethodRemove Quotes from Beginning and End of String in PhpUsing trim() MethodUsing preg_Replace() Method Remove Quotes from String in Php Using str_replace() Method Use the str_replace() function to remove quotes from String in PHP. [crayon-638c36b67c11b476213834/] [crayon-638c36b67c11f937934568/] We used str_replace() to remove double quotes and […]

  • 30 November

    Check if Array is Empty in PowerShell

    Table of ContentsWhat is an Empty Array?Use the Count Property to Check If an Array is Empty in PowerShellUse the Length Property to Check If an Array is Empty in PowerShell 💡TL;DR To check if an array is empty access its count property e.g. arr.count. If count is equal to 0, then array is empty. […]

  • 30 November

    Split Integer into Digits in Python

    Table of ContentsUsing List ComprehensionUsing for LoopUsing map() with list() & str.split() Using List Comprehension To split integer into digits in Python: Use the str() to transform the specified integer to a string. Use a list comprehension to loop over converted String. Use int() to convert every substring to an integer in each iteration. [crayon-638c36b67c4a6355539834/] […]

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.