<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app=""
ng-init="welcomeMsg='welcome';myCol='pink';quantity=10;cost=5">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
<p ng-bind="welcomeMsg"></p>
<h1>Hello {{name}}</h1>
<p>My first expression: {{ 5 + 5 }}</p>
<p>Total in dollar: {{ quantity * cost }}</p>
<p>Total in dollar using ng-bind: <span ng-bind="quantity * cost"></span></p>
</div>
</body>
</html>
If we consider an AngularJS application to consist of:
--> View, which is the HTML.
--> Model, which is the data available for the current view.
--> Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model.
The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
--> View, which is the HTML.
--> Model, which is the data available for the current view.
--> Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model.
The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.