Trouble rendering view in Angular

Question

I think what I'm trying to do is very simple, but somehow I am having trouble getting it to work. I'm sure there must be some simple solution, but I can't find it.

Basically, I have a simple array of dictionaries containing the resources I'm trying to render (defined as $scope.acts in the acts controller). I'm not importing JSON or anything like that, it's all right there in the controller file. The index is working fine, but I'm trying to render a 'show' view (not sure if this is the proper Angular terminology, I'm used to working with Rails, so I still think in those terms), for a single item in the array, and it isn't working. The template is loading, but it isn't fetching data from the array.

I really want to do this in the simplest manner possible, no bells or whistles. Eventually, I want to load the data from a Rails app, but I want to build this up one step at a time so that I get a feeling for how Angular is doing it's thing.

Here's my code.

app.js

var controllers, snowball_effect;

snowball_effect = angular.module('snowball_effect', [
    'templates', 
    'ngRoute', 
    'ngResource',
    'controllers'
]);

snowball_effect.config([
  '$routeProvider', function($routeProvider) {
    return $routeProvider
    .when('/', {
      templateUrl: "static_pages/index.html",
      controller: 'StaticPagesController'
    })
    .when('/acts/index', {
      templateUrl: "acts/index.html",
      controller: 'ActsController'
    })
    .when('/acts/:id', {
      templateUrl: "acts/show.html",
      controller: 'ActsController'
    });
  }
]);


controllers = angular.module('controllers', []);

controllers.controller("StaticPagesController", ['$scope', {}]);

controllers.controller("NavBarController", [
  '$scope', 
  '$routeParams', 
  '$location',
  function($scope,$routeParams,$location) {
    $scope.actsIndex = function() {
      $location.path("/acts/index");
    }
    $scope.actsNew = function () {
      $location.path("/acts/index");
    }

}]);

ActsController.js

controllers = angular.module('controllers');

controllers.controller("ActsController", [
  '$scope', 
  '$routeParams', 
  '$location', 
  '$resource', 
  function($scope,$routeParams,$location,$resource) {
    $scope.acts = [
      {
        id: 1, 
        name: "Plant a Flower", 
        description: "Plant a flower in your garden or along the street.",
        inspires: 1
      }
    ];

    $scope.addAct = function() {
      $scope.acts.push($scope.newAct);
    }

    $scope.deleteAct = function(act) {
      $scope.acts.splice($scope.acts.indexOf(act), 1);
    }

    $scope.linkToShowAct = function(act) {
      $location.path('acts/' + act.id);
    }
}]);

templates/acts/show.html

<div class="container" ng-controller="ActsController">
    <div class="body">

        <h1>
            {{act.name}}
        </h1>

        <p class="act-show-description">
            {{act.description}}
        </p>

        <p class="act-show-inspires">
            <strong>Inspires:</strong>
            {{act.inspires}}
        </p>

        <a href="#/">Edit</a>
        <a href="#/">Back</a>
    </div>
</div>

In $scope.linkToShowAct() I don't think the $return is correct and might be throwing some error. Have you check the console? — rtn
– rtn, Commented Dec 7, 2015 at 15:18
Ah, the return was a mistake. I took it out. The resource still isn't loading, however. The console isn't logging anything. — Sam Phillips
– Sam Phillips, Commented Dec 7, 2015 at 19:10

Ben Nieting · Accepted Answer · 2015-12-07 20:03:17Z

1

Your ActsController creates an array named acts, but your html does not reference an item in that array. It is using act instead of acts[0].

Try changing your html to this:

<div class="container" ng-controller="ActsController">
  <div class="body">

    <h1>
        {{acts[0].name}}
    </h1>

    <p class="act-show-description">
        {{acts[0].description}}
    </p>

    <p class="act-show-inspires">
        <strong>Inspires:</strong>
        {{acts[0].inspires}}
    </p>

    <a href="#/">Edit</a>
    <a href="#/">Back</a>
</div>

answered Dec 7, 2015 at 20:03

Ben Nieting

1,5282 gold badges16 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Trouble rendering view in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related