AngularJS ngcontroller

The ng-controller directive is used to attaches a controller class to the view (HTML element).
The ng-controller directive creates a new scope.
The ng-controller directive compile at the priority level 500.
It is supported by all HTML element.
The ng-controller is a key aspect of how angular supports the Model-View-Controller design pattern.

MVC Component in AngularJS:

Model – The models are the properties of a scope. This is the lowest level of the pattern. It is used to manipulating the data. The scope properties are accessed through the bindings.
View – The view is a template (HTML with data bindings). It is used to displaying all or part of the data to the user.
Controller – The ng-controller directive is used to define the controller classes. The controller class contain a software code that controls the interaction between the Model and View (HTML).

Syntax for ng-controller directive in AngularJS:

<element ng-controller= “expression” ></element>

Parameter value for ng-controller directive in AngularJS:

Value	Description
expression	The name of the controller

Sample coding for ng-controller directive in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                    angular.min.js"></script>
    </head>
    <body>
        <h2>ng-controller Directive in AngularJS Tutorials. </h2>
        <div ng-app="myApp" ng-controller="myController">
            {{ msg }}
        </div>
        <script>
        var app= angular.module('myApp', [ ]);
        app.controller('myController', function($scope) {
            $scope.msg = "Welcome To AngularJS Tutorials";
        });>
        </script>
    </body>
</html>

Data:

The msg data been defined for our AngularJS Application.

msg = "Welcome To AngularJS Tutorials";

Logic:

Controller logic for the AngularJS application

app.controller('scopeCtrl', function($scope)
    {
        $scope.msg = "Welcome To AngularJS Tutorials";
    });

HTML:

Viewable HTML contents in AngularJS Application.

<div ng-app="myApp" ng-controller="scopeCtrl">
                        {{ msg }}
</div>

Code Explanation for ng-controller Directive in AngularJS:

Code Explanation for AngularJS ngcontroller

AngularJS is distributed as a JavaScript file, and can be added to a HTML page with a <script> tag.
The AngularJS application is defined by ng-app="myApp". The application runs inside the <div> tag. It’s also used to define a <div> tag as a root element.
The ng-controller=”myController” is an AngularJS directive. It is used to define a controller name as “myController”.
{{ msg }} is a used to bind the controller value by using the scope object.
angular.module function is used to create a module. Here has passed an empty array to it.
Here we have declared a controller myController module using apps.controller() function.
The value of the controller modules is stored in scope object. In AngularJS, $scope is passed as first argument to apps.controller during its constructor definition.
Here we have set the value of $scope.msg as “Welcome To AngularJS Tutorials” which are to be used to display the {{ msg }} value in the HTML<div> element.

Sample Output for ng-controller Directive in AngularJS :

Sample Output for AngularJS ngcontroller

The output displays a message of a variable msg by using a ng-controller directive.

PDF

AngularJS ngcontroller

MVC Component in AngularJS:

Syntax for ng-controller directive in AngularJS:

Parameter value for ng-controller directive in AngularJS:

Sample coding for ng-controller directive in AngularJS:

Data:

Logic:

HTML:

Code Explanation for ng-controller Directive in AngularJS:

Sample Output for ng-controller Directive in AngularJS :

Related Searches to angularjs ng-controller directive

Wikitechy

Join our Community

Other Languages