How to create a message in Angular JS

Home > Search > How-to
  by

In this example, the Angular controller will pass a single message to the View.

 

Controller

The following Controller will store the text Hello World in a variable named myMessage

var myApp = angular
	.module("myModule", [])
	.controller("myController", function ($scope) {
	
	$scope.myMessage = "Hello World";
});

 

View

In the view, the following markup can be used to get myMessage, which is Hello World

<head>
    <script src="js/angular.min.js"></script>
    <script src="js/myAngular.js"></script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
 	{{ myMessage }}
    </div>

 


In this example, The Angular controller will pass numerous variables to the View.

 

Controller

The following Controller contains a variable named employee which contains numerous values.

var myApp = angular
	.module("myModule", [])
	.controller("myController", function ($scope) {
	var employee = {
		firstname: "John", 
		lastname: "Doe",
		role: "WebMaster"		
	};
	
	$scope.myVariable = employee;
});

 

View

In the view, the following markup can be used to get the variables in the employee variable.

<head>
    <script src="js/angular.min.js"></script>
    <script src="js/myAngular.js"></script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
      {{ myVariable.firstname }}
      {{ myVariable.lastname }}	
      {{ myVariable.role }}	
    </div>

 


In this example, the Angular controller will pass a single message to the View in a input text form.

 

Controller

The following Controller will store the text Hello World in a variable named myMessage

var myApp = angular
	.module("myModule", [])
	.controller("myController", function ($scope) {
	
	$scope.myMessage = "Hello World";
});

 

View

In the view, the following markup can be used to get the variables in the employee variable. The ng-model directive is used to in the input text form.

<head>
    <script src="js/angular.min.js"></script>
    <script src="js/myAngular.js"></script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        <input type="text" ng-model="myMessage" />
 	{{ myMessage }}
    </div>

 

 

 



Add a Comment




We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.




Please enter in the box below so that we can be sure you are a human.




Comments