AngularJS beginner need code explanation

Question

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.

abhi · Accepted Answer · 2016-03-03 17:17:45Z

1

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!

answered Mar 3, 2016 at 17:17

abhi

1391 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian Zosel · Accepted Answer · 2016-03-03 17:04:13Z

0

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'
}

answered Mar 3, 2016 at 17:04

Christian Zosel

1,4241 gold badge9 silver badges16 bronze badges

Comments

Unex · Accepted Answer · 2016-03-03 17:03:09Z

0

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.

answered Mar 3, 2016 at 17:03

Unex

1,76713 silver badges17 bronze badges

Comments

François F. · Accepted Answer · 2016-03-04 08:20:43Z

0

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.

answered Mar 4, 2016 at 8:20

François F.

2293 silver badges18 bronze badges

Collectives™ on Stack Overflow

AngularJS beginner need code explanation

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related