CODEWITHSUNDEEP
angularjs
François F.
François F.

Reputation: 229

AngularJS beginner need code explanation

I have a part of code like below :

angular.module('tessicommunicationApp')
    .controller('RegisterController', function ($scope, $translate, $timeout, Auth) {
        $scope.success = null;
        $scope.error = null;
        $scope.doNotMatch = null;
        $scope.errorUserExists = null;
        $scope.registerAccount = {};
        $timeout(function (){angular.element('[ng-model="registerAccount.login"]').focus();});

My question is simple : I don't manage to locate where is declared the login property. Because in the template, I can read :

<input type="text" class="form-control" id="login" name="login" placeholder="{{'global.form.username.placeholder' | translate}}"
                           ng-model="registerAccount.login" ng-minlength=1 ng-maxlength=50 ng-pattern="/^[a-z0-9]*$/" required>

the ng-model directive bind the login property which I don't know where it is declared.

Below a part of the route if you want :

angular.module('tessicommunicationApp')
    .config(function ($stateProvider) {
        $stateProvider
            .state('register', {
                parent: 'account',
                url: '/register',
                data: {
                    authorities: [],
                    pageTitle: 'register.title'
                },
                views: {
                    'content@': {
                        templateUrl: 'scripts/app/account/register/register.html',
                        controller: 'RegisterController'
                    }
                },

Thank you for your answers.

Upvotes: 1

Views: 59

Answers (4)

Fran&#231;ois F.
Fran&#231;ois F.

Reputation: 229

OK so if I understood well, there is no need to have a declared variable 'login' on the left hand side explicitly. It is the binding from the HTML (view) to Javascript (model) that causes the existence of the login variable attached to the registerAccount objet at scope level.

Upvotes: 0

abhi
abhi

Reputation: 139

AngularJS controllers use two-way data binding between the view (HTML) and the controller (JS) with the $scope declaration. So the empty object in your controller $scope.registerAccount can communicate with the view.

So if you type something into your input field Angular will tell the controller to update the registerAccount object with a key login binding to whatever text is inputted.

E.g. if I type "Hello World" into your input, the controller would then be updated. Take a look at this quick fiddle:

https://jsfiddle.net/fw920Led/1/

I'd prob take this time to run through the Todo sample app that AngularJS provides to truly appreciate what's going on. Good luck!

Upvotes: 1

Christian Zosel
Christian Zosel

Reputation: 1424

The login property does not have to be explicitly declared, it is just added to $scope.registerAccount as you type something into the input field.

So basically you have

// before user input
$scope.registerAccount = {} 

// after user input "test"
$scope.registerAccount = {
    login: 'test'
}

Upvotes: 0

Unex
Unex

Reputation: 1757

You should add {{ registerAccount }} in your html. And you'll probably understand the way it works.

The important point here is that 2 way data binding work in 2 ways, javascript to html and html to javascript. Meaning that when you enter a value in your html input, your javascript $scope is updated with the value of the login.

2 way data binding is one of the key feature of angularjs, and is mandatory to understand if you want to get better using the framework.

Upvotes: 0

Related Questions