Table of Contents
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:
- AngularJs hello world example
- AngularJs controller examples
- AngularJs ng-repeat example
- AngularJs Built-in filter example
- AngularJs custom filter example
- AngularJs ajax example using $http
- AngularJS RESTful web service JAXRS CRUD example using $http
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.Example :
Live demo:
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.
Copy below text , open notepad , paste it and save it as angularJSExample.html and open it in the browser.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<meta charset="UTF-8"> <title>Angular js</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <div ng-app> 10+40 ={{ 10 + 40 }} 1===2 ? : {{ 1==2 }} </div> |
- 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.
- 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.
As you can see, angular js has evaluated expressions for both div tags.
Lets take another example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<meta charset="UTF-8"> <title>Angular js</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <div ng-app> Name: <input type="text" ng-model="helloWorld"> Hello {{ helloWorld}} !!! </div> |
In this example, we have used textbox, so whatever you write in textbox, get reflected with hello.
Was this post helpful?
Let us know if this post was helpful. Feedbacks are monitored on daily basis. Please do provide feedback as that\'s the only way to improve.
