CODEWITHSUNDEEP
angularjsangularjs-scope
Don
Don

Reputation: 433

AngularJS - scope variable not displaying on page

New to angular and have a page in which I have the app and controller defined. After the controller, I am trying to display a value I get back from a Node Rest call (which I get correctly). If I put {{1+1}} i get a value... I do not get a value for {{test}} or {{stock.symbol}}. I do see them in the scope variable in firebug .... Not sure what I am doing wrong with the definition of the module. Any help would be appreciated! Code snippets below ...

HTML
=====
<html lang="en" ng-app="tradingSystem">
..
..

{% block content %}

  {% include "includes/carousel.html" %}

  <div class="container" ng-controller="StockListCtrl">
    <h3>Test: {{ test }} </h3>
    <h3>Symbol: {{ stock.symbol }}</h3>


{% block content %}

  {% include "includes/carousel.html" %}

  <div class="container" ng-controller="StockListCtrl">
    <h3>Test: {{ test }} </h3>
    <h3>Symbol: {{ stock.symbol }}</h3>

App.JS
=======
'use strict';

/* App Module */

var tradingSystem = angular.module('tradingSystem', [
  'ngRoute',
  'tradingSystemAnimations',
  'tradingSystemControllers',
  'tradingSystemFilters',
  'tradingSystemServices'
]);

controllers.js
=============
'use strict';

/* Controllers */

var app = angular.module('tradingSystem', []);

app.controller('LoginCtrl', ['$scope', 'User', function($scope, User) {

    $scope.authenticate = function (user)
    {
        $scope.user = User.authenticate({emailAddress: user.emailAddress, password:           user.password});
    alert("Received " + $scope.user);
    };

}]);


app.controller('StockListCtrl', ['$scope', '$http', function($scope, $http) {

    $scope.test = 'This is a test';

    $http.get('/api/stocks')
      .success(function (stocks) {

        if (!stocks) {
          console.log("No results from api/stocks service ");
        }
        else
        {
          $scope.stocks = stocks;

          console.log("Results: " + stocks);
          console.log("Stocks Fetched: " + $scope.stocks.length)

          $scope.stock = stocks[0];
          console.log("Scope: " + $scope);
          alert(stocks[0].symbol);
          console.log($scope);
        }
      })
      .error(function (reason) {
        alert(reason);
      });

  }]);

Upvotes: 0

Views: 3186

Answers (2)

glendaviesnz
glendaviesnz

Reputation: 1899

As Alex C mentions you are re-declaring the app module in the controllers file - as the docs note at https://docs.angularjs.org/api/ng/function/angular.module - if you are wanting to retrieve an existing module you need to leave off the second parameter, eg. 

angular.module('myModule', []); //creates a new module
angular.module('myModule'); //retrieves an existing module

So given that you have already declared your tradingSystem module and assigned it to a global variable (not the best approach for larger apps, but ok for a small example) in your controller.js you need to drop var app = angular.module('tradingSystem', []); and have 

tradingSystem.controller('LoginCtrl', etc.

but you do have tradingSystemControllers as a dependency of your tradingSystem module, so maybe in your controllers file you meant to put:

var tradingSystemControllers = angular.module('tradingSystemControllers', []);

EDIT: 20/7/2014

As far as setting up for larger applications goes, not my tips or best practice, I am just following what other leaders in this area are suggesting and it is working for me for now ;-)

  1. I think that https://github.com/ngbp/ngbp is a good example of an Angular app structure broken down by module, with all files (module js, templates, less, unit tests) related to a module in the same folder. ngbp also has a good automated workflow for compiling both a dev and production build with karma testing, jshint, etc. built in. There are lots of angular seed/boilerptlate projects around now - not saying the ngbp is the best as I haven't looked at them all in detail - but the approach of putting all related module files together in the module folder is a good one I think, and the approach suggested by the Angular team now - https://docs.google.com/a/core-ed.ac.nz/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

  2. In relation to using

    var tradingSystem = angular.module(

that I mentioned in my first answer - given that you have easy access to any angular modules via 

angular.module('myModule')

assigning a module to a global variable doesn't have any huge advantage, and potentially clutters the global name space in a large app. I like the approach put forward by a couple of others which is to use an IIFE to encapsulate each module a bit better - details here - http://caughtexceptions.blogspot.co.nz/2014/07/angular-module-setup.html To this end I have modified the ngbp build process slightly to use grunt-wrap to wrap each module definition in its own IIFE as part of build process.

Upvotes: 1

Don
Don

Reputation: 433

The problem was related to using Swig as my rendering engine with Express. Once I added swig.setDefaults({ varControls: ['<%=', '%>'] }); // or anything besides ['{{', '}}'] to change the defaults, the page rendered the AngularJS variables.

Upvotes: 2

Related Questions