Angular ng controller directive Example

Angular ng controller directive Example

Today, We want to share with you Angular ng controller directive Example.
In this post we will show you Angular ng controller directive Example, hear for Angular ng controller directive Example we will give you demo and example for implement.
In this post, we will learn about Angular ng controller directive Example with an example.

AngularJs ng-controller directive

The AngularJS mostly used to ng-controller directive adds a controller class to the view part of the (your web application). It is the one type of key aspect which specifies portion or scope the principles behind the Model-View-Controller simple design pattern.

READ :  Filtering Angularjs Items based on start and end date

ng-controller directive is supported by all HTML elements.(Like div,p,table,h1,h3,h3,h4,h5,h6,span.etc…) A controller directive is a JavaScript(js) object containing set all attributes or all properties with functions.

AngularJS controllers as a control the data of AngularJS web applications.
AngularJS controllers are supported by regular JavaScript Objects.

AngularJs ng-controller Syntax:

    <element ng-controller="expression | Your Controller Name"></element>  

AngularJs ng-controller directive : Example

<!DOCTYPE html>
<html>
<head>
    <title>AngularJs ng-controller directive : Example</title>
    <script src="https://infinityknow.com/libs/angular.min.js"></script>
</head>
<body ng-app="infinityknowApp">
	<h1>AngularJS Controller: Example</h1>
    <div ng-controller="simpleCtrl">
        Full Verification: {{yname + " " + webname}}
    </div>
    <script>
        var myngApp = angular.module('infinityknowApp', []);
        myngApp.controller('simpleCtrl', function ($scope) {
            $scope.yname = "AngularJS_king";
			$scope.webname = "www.infinityknow.com";      
        });
    </script>
</body>
</html>

Two Controllers, Both with the same postname ‘postname’

<body ng-controller="firstCtrl">
    <input ng-model="postname" /> {{postname}}

    <div ng-controller="secondCtrl">
        <input ng-model="postname" /> {{postname}} - {{$parent.postname}}
    </div>
</body>
With controller as
<body ng-controller="firstCtrl as parent">
    <input ng-model="parent.postname" /> {{parent.postname}}

    <div ng-controller="secondCtrl as child">
      <input ng-model="child.postname" /> {{child.postname}} - {{parent.postname}}
    </div>
</body>

pass parameters to an AngularJS controller and uses

index.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJs ng-controller directive : Example</title>
    <script src="https://infinityknow.com/libs/angular.min.js"></script>
	    <script src="app.js"></script>
</head>
<body ng-app="infinityknowApp">
	<h1>AngularJS Controller: Example</h1>
    <div ng-controller="simpleCtrl" ng-init="init('Dhaval Dave','007')">
    <h1>I am  {{name}} {{id}}</h1>    </div>
</body>
</html>

app.js

<script>
	var myngApp = angular.module('infinityknowApp', []);
	myngApp.controller('simpleCtrl', function ($scope) {
		$scope.init = function(name, id)
		  {
			$scope.id = id;
			$scope.name = name; 
		  };      
	});
</script>

More Example of ng-controller directive

var app = angular.module("myApp", []);
app.controller("mycontroller", ['$scope','$http', function($scope, $http)
		{    
			$http.get('js/data.json').success (function(data){
				//alert(JSON.stringify(data.orders));
				$scope.jsondata = data;
			}); 
		}]
);

View DemoView Demo

READ :  Vuejs Computed Properties - Vue Watch Completed property
https://pakainfo.com/

Add a Comment

Your email address will not be published. Required fields are marked *