CODEWITHSUNDEEP
javascriptangularjs
Kent
Kent

Reputation: 91

Angular static JSON list wont render

Sorry to bother... but I am blue in the face and dying of asphyxiation from this.

Ok I am using eclipse and relevent angular plugins to edit a simple list example as follows but it refuses to display on preview or when opened with browser within eclipse.

This one came right out of the book keyed in as-is... ok except for double quotes vs single quotes... the eclipse plugin reacts differently to those... but I dont know why or what takes precedence for these quotes. It seems to like the single quotes better.

Anyway, this JSON list wont display.

Any tips ? Thanks

<script>
    alert ('inside js');

    var myModule.controller('AppCtrl', function($scope) { });
    myModule.controller('AppCtrl', function($scope) {
        $scope.stories = [
            {title:'Story 00', description:'Description pending.'},
            {title:'Story 01', description:'Description pending.'},
            {title:'Story 02', description:'Description pending.'},
            {title:'Story 03', description:'Description pending.'},
            {title:'Story 04', description:'Description pending.'},
            {title:'Story 05', description:'Description pending.'}
            ];
        });
</script>


<div ng-controller='AppCtrl'>
    <div class='span4 sidebar-content'>
        <h2>Stories</h2>
        <div class='story' ng-repeat='story in stories' > 
            <h4>{{story.title}}</h4>
            <p>{{story.description}}</p>
        </div>
    </div>
</div>

<script type="text/javascript" 
      src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>

Upvotes: 1

Views: 166

Answers (2)

sylwester
sylwester

Reputation: 16498

At this attempt you've missed ng-controller and ng-app in your HTML here is working jsbin http://jsbin.com/qeninogakeji/1/edit

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appViewModule">
  
    <div class='span4 sidebar-content' ng-controller="AppViewController">
        <h2>Stories</h2>
        <div class='story' ng-repeat='story in stories' > 
            <h4>{{story.title}}</h4>
            <p>{{story.description}}</p>
        </div>
    </div>
</div>
<script>
var appViewModule = angular.module('appViewModule', []);

    appViewModule.controller('AppViewController', function($scope) {
      
        $scope.stories = [
            {'title':'Story 00', 'description':'Description pending.'},
            {'title':'Story 01', 'description':'Description pending.'},
            {'title':'Story 02', 'description':'Description pending.'},
            {'title':'Story 03', 'description':'Description pending.'},
            {'title':'Story 04', 'description':'Description pending.'},
            {'title':'Story 05', 'description':'Description pending.'}
            ];
        });

</script>

Upvotes: 0

m59
m59

Reputation: 43785

The problem is that you are not creating an angular module, nor are you bootstrapping that module and for some reason, you have the controller declaration duplicated. This is a working example with those corrections:

// declare an angular module
angular.module('myApp', [])

// attach controller
.controller('AppCtrl', function($scope) {
  $scope.stories = [
    {title:'Story 00', description:'Description pending.'},
    {title:'Story 01', description:'Description pending.'}
  ];
})

;

Markup:

<!-- bootstrap the angular module and add controller to element -->
<div ng-app="myApp" ng-controller='AppCtrl'>
    <div class='span4 sidebar-content'>
        <h2>Stories</h2>
        <div class='story' ng-repeat='story in stories' > 
            <h4>{{story.title}}</h4>
            <p>{{story.description}}</p>
        </div>
    </div>
</div>

Live Demo

You may cache the module to a variable, but I see no need to do so. Angular is already a global variable - I suggest using it's internal module system to store and get references to modules rather than making more globals.

// make a module
angular.module('myModuleName', [
 // array of dependencies
]);

// get a module
angular.module('myModuleName')
// add a controller to the module
.controller('myCtrl', function() { //etc

Rather than:

var myModule = angular.module('myModuleName', []);
myModule.controller(function() {

Upvotes: 2

Related Questions