Trying to use controllers in AngularJS

Question

I have implemented auto-complete feature, now I am trying to integrate into my main application. This is the controller function which I designed.

(function() {
      'use strict';
      angular
        .module('MyApp')
        .controller('DemoCtrl', DemoCtrl);

      function DemoCtrl($http) {
        this.querySearch = function (query) {
           return $http.get('http://127.0.0.1:8888/autocomplete/' + escape(query)).then(function(result) {
              return result.data;
            });
        }
      }
    })();

This is my HTML for the first scenario:

<div class="autocompletedemoFloatingLabel" ng-controller="DemoCtrl as ctrl" ng-app="MyApp" layout="column" ng-cloak="">
      <md-content class="md-padding">
        <form name="searchForm" ng-submit="$event.preventDefault()">
            <div layout-gt-sm="row">
            <md-input-container flex="">
            </md-input-container>

            <md-autocomplete md-floating-label="" 
                            flex="" 
                            md-item-text="item.Symbol"
                            md-items="item in ctrl.querySearch(ctrl.searchText)" 
                            md-search-text="ctrl.searchText" 
                            md-selected-item="ctrl.selectedItem" 
                            md-no-cache="ctrl.noCache" 
                            md-input-name="autocompleteField" 
                            required="">
              <input>
              <md-item-template>
                <span md-highlight-text="ctrl.searchText">{{item.Symbol+" - "+item.Name+" ("+item.Exchange+")"}}</span>
              </md-item-template>
              <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
                <div ng-message="required">You <b>must</b> have a favorite movie.</div>
                <div ng-message="minlength">Your entry is not long enough.</div>
                <div ng-message="maxlength">Your entry is too long.</div>
              </div>
            </md-autocomplete>
          </input>
          </div>
    </form>
  </md-content>
</div>

Now the application currently contains controller in this format:

var app = angular.module("assign8", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue=false;
$scope.myValue_sec = false; 
});

I am very new to angular, I am unable to map the first format to the second one. Kindly let me know how can I map first to second. TIA.

I have an API using which I send suggestions back to the front end. The first controller does that job for me. While the second one is used for switching frames. Ng-show, Ng-hide. I am using Angular 1.5.5. Hope that clears it up. The problem is I dont understand how function() is being used in first line of first format. Second seems more intuitive. — jyotirmaya ojha, Nov 15 '17 at 19:26
Possible duplicate of [Angularjs "Controller as" or "$scope"](https://stackoverflow.com/questions/30641478/angularjs-controller-as-or-scope) — Claies, Nov 15 '17 at 19:36

score 1 · Accepted Answer · answered Nov 15 '17 at 19:27

1

I'm not sure where the confusion lies. The two scenarios are very similar.

app.controller("MyCtrl", function ($scope) {
    this.querySearch = function (query) { ... }
});

answered Nov 15 '17 at 19:27

isherwood

58,414
16
114
157

I did this change, still doesnt work. I am really sorry but I am still trying to learn angular – jyotirmaya ojha Nov 15 '17 at 19:39
"Doesn't work" isn't useful. Please be more specific about the problem (in your question as well as here), and use code formatting for legibility (backquotes in comments). – isherwood Nov 15 '17 at 19:43
Thanks for your help Sir, I was missing ngAnimate file hence the issue. Have a good day. – jyotirmaya ojha Nov 15 '17 at 19:51
Then you should delete the question or provide a correct answer to the actual problem. – isherwood Nov 15 '17 at 21:02

score 0 · Answer 2 · answered Nov 15 '17 at 19:51

There are two manners to make the binding in AngularJS.

The controller as that is what is done in the first format, you can see DemoCtrl as ctrl in html the ctrl variable represent your controller, in your controller, you see this, every attribut of this can be accessed via ctrl in html. for example: ctrl.myAttribut.
The second manner is the use of $scope service. that is what is done in the second format. every attribut of $scope can be accessed in html as long as the corresponding controller is called. For example: if in your controller you have $scope.myAttribut, in your html you can access like this {{myAttribut}}.

score 0 · Answer 3 · answered Nov 15 '17 at 21:07

This worked:

<script>
var app = angular.module("MyApp");
app.controller("DemoCtrl", function ($http) {
    this.querySearch = function (query) 
    { 
          return $http.get('http://127.0.0.1:8888/autocomplete/' + escape(query)).then(function(result) {
          return result.data;
        });
    }
});
</script>

Trying to use controllers in AngularJS

3 Answers3