<!DOCTYPE
html>
<html>
<head>
<title></title>
<meta charset="utf-8"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script
type="text/javascript">
var app =
angular.module("MyApp",[]);
app.controller("Demo1Controller", function ($scope) {
$scope.message = "Welcome to
my first angular js program";
});
</script>
</head>
<body
ng-app="MyApp">
<div
ng-controller="Demo1Controller">
<h1>{{message}}</h1>
</div>
</body>
</html>
Output:
Code Explanation:
-> The "ng-app"keyword
is used to denote that this application should be considered as an angular js
application. Any name can be given to this application.
->The controller is what is used
to hold the business logic. In the h1 tag, we want to access the controller,
which will have the logic to display "Welcome
to my first angular js program", so we can say, in this tag we want to
access the controller named "
Demo1Controller".
-> We are using a member variable
called "message" which is nothing but a place holder to display the message.
-> The "script tag" is
used to reference the angular.js script which has all the necessary
functionality for angular js. Without this reference, if we try to use any
AngularJS functions, they will not work.
-> "Controller" is the
place where we are actually creating our business logic, which is our
controller. The specifics of each keyword will be explained in the subsequent
chapters. What is important to note that we are defining a controller method
called Demo1Controller .
-> We are creating a
"function" which will be called when our code calls this controller.
The $scope object is a special
object in AngularJS which is a global object used within Angular.js. The $scope
object is used to manage the data between the controller and the view.
-> We are creating a member
variable called "message", assigning it the value and attaching the
member variable to the scope object
NOTE:
-> The ng-controller directive is
a keyword defined in AngularJS and is used to define controllers in our
application. Here in our application, we have used the ng-controller keyword to
define a controller named ‘Demo1Controller’.
-> In AngularJs js, when we
display the result then we always give in input in Expression. So The Expression is very important in angular js.
-> An expression is like
JavaScript code which is usually wrapped inside double curly braces such as {{
expression }}
No comments:
Post a Comment