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
– jyotirmaya ojha, Commented Nov 15, 2017 at 19:26

isherwood · Accepted Answer · 2017-11-15 19:27:51Z

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, 2017 at 19:27

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

4 Comments

jyotirmaya ojha Over a year ago

isherwood Over a year ago

"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).

jyotirmaya ojha Over a year ago

Thanks for your help Sir, I was missing ngAnimate file hence the issue. Have a good day.

isherwood Over a year ago

Then you should delete the question or provide a correct answer to the actual problem.

Kenany · Accepted Answer · 2017-11-15 19:51:56Z

0

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

answered Nov 15, 2017 at 19:51

Kenany

5204 silver badges17 bronze badges

Comments

jyotirmaya ojha · Accepted Answer · 2017-11-15 21:07:39Z

0

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>

answered Nov 15, 2017 at 21:07

jyotirmaya ojha

732 silver badges13 bronze badges

Collectives™ on Stack Overflow

Trying to use controllers in AngularJS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related