• Write Your First AngularJS Controller

    Posted on December 24, 2015 by Hamidul Islam in Angular JS.

    Write-Your First-AngularJS- Controller


    aim

    In AngularJS Application, angularJS Controller controls the application data.  In this article we will try to learn how to write our first AngularJS controller. Below are new terms 

    • Model - The data required for view
    • View - Its the HTML
    • Controller - A JavaScript function which controls the data of the view.
    • $scope - Its the glue between Controller and view.

    $scope

    This $scope object is a plain old JavaScript object. We can add and change properties on the $scope object however we see fit. This $scope object is the data model in Angular. Unlike traditional data models, which are the gatekeepers of data and are responsible for handling and manipulating the data, the $scope object is simply a connection between the view and the HTML. It’s the glue between the view and the controller.

    All properties found on the $scope object are automatically accessible to the view.

    First Step to Write Controller:

    View

    <div ng-app="app" ng-controller="someController">
    //Some more code
    </div>

    For the above view the Controller should be like this

    <script>
    var app = angular.module('app', []);
    app.controller("someController", function($scope) {
    //Some logic here
    });
    </script>

    Explanation:

    • angular is global object. Its ready to use in angularJS Application
    • While creating controller ng-controller directive is used. 
    • AngularJS invokes the controller with a $scope object. AngularJS will take care of it to pass it.
    • app.controller is a function where we passed two parameters. First one is controller name and second one is scope object.

    Complete Example

    <!DOCTYPE html>
    <html lang="en-US">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    <div ng-app="app" ng-controller="nameController">
    First Name:
    <input type="text" ng-model="firstName">
    <br>
    Last Name:
    <input type="text" ng-model="lastName">
    <br>
    <br>Full Name: {{firstName + " " + lastName}}
    </div>

    <script>
    angular.module("app", []).controller("nameController", function($scope) {
    $scope.firstName = "Hamidul";
    $scope.lastName = "Islam";
    });
    </script>
    </body>
    </html>

    Post Tagged with
Comments are closed.
Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close