AngularJS templates not loading correctly

Question

I recently started learning web development basics by myself, and at the moment, I try to start with AngularJS. But unfortunately my first project won't work out. I tried to fix it by myself, but I can't find the problem. In my opinion, I simply failed to include or import the Angular code in the right way.

My Problem: Instead of computing the results of the angular script app.js, it shows: {{ here should be Angular related stuff }}

I hope you may help me with my annoying debugging problem. I also would love to hear other feedback about my first code and which things are useless or what else I need to do or to think about.

Thank you very much for your help and time.

my folder tree:

App
- app.js
bower_components
- angular
- bootstrap
- d3
- jquery
css
- style.css
js
- index.js
node_modules
bower.json
index.html

// Define the `SmartIndustryInterfaceApp` module
var smartIndustryInterface = angular.module('SmartIndustryInterface', []);

smartIndustryInterface.controller('WaelzlagerListController', 
    function WaelzlagerListController($scope) {
        $scope.WaelzlagerList[
    {
      name: 'Nexus S',
      snippet: 'Fast just got faster with Nexus S.'
    }, {
      name: 'Motorola XOOM™ with Wi-Fi',
      snippet: 'The Next, Next Generation tablet.'
    }, {
      name: 'MOTOROLA XOOM™',
      snippet: 'The Next, Next Generation tablet.'
    }
  ];
});

<html lang="de" ng-app="SmartIndustryInterface">
    <head>
        <title>Smart Industry Interface</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
        <!-- angular material-->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
        <link rel="stylesheet" href="../css/style.css">
        
        <!-- Angular -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <!-- Bower -->
        <script src="/bower_components/angular/angular.js"></script>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <!-- D3 -->
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <!-- local -->
        <script src="App/app.js"></script>
    </head>
        
    <body>
        <div>
        <p id="dynamischerHTML">Dieser Text wird noch geladen... ... ... ... </p>
        </div>
        
        <div ng-controller="WaelzlagerListController">
        <ul>
            <li ng-repeat="waelzlager in WaelzlagerList">
                <span>{{waelzlager.name}}</span>
                <p>{{waelzlager.snippet}}</p>
            </li>
        </ul>
        </div>
            
        <div>
        <p ng-controller="testing"> {{firstName + "" + lastName}} </p>
        <script> var app = angular.module("SmartIndustryInterface", []);
                 app.controller("testing", function($scope) {
                    §scope.firstName = "John";
                    $scope.lastName = "Doe"; 
                 });
        </script>
        </div>
        
        <!--<md-list>
            <md-list-item class="md-2-line" ng-repeat="item in todos">
                <md-checkbox ng-model="item.done"></md-checkbox>
                <div class="md-list-item-text">
                    <h3>{{item.title}}</h3>
                    <p>{{item.description}}</p>
                </div>
            </md-list-item>
        </md-list>-->
        
        <script src="js/index.js"></script>
    </body>
</html>

Make friends with your browser dev tools (F12). What errors are thrown in console? ALso in same tools use network tab to check loading status of all files — charlietfl
– charlietfl, Commented May 28, 2016 at 21:35
@charlietfl liked because I forgot F12 was the keyboard shortcut and have been finding dev-tools via the menu system for the last six months. hits self on head repeatedly — Peter Carter
– Peter Carter, Commented May 29, 2016 at 11:12

Peter Carter · Accepted Answer · 2016-05-29 12:40:24Z

The main issues are:

1 - wrong character § when it should be $.

§scope.firstName = "John";

should be

$scope.firstName = "John";

2 - Missing equal sign in $scope.WaelzlagerList = [...]

I cleaned up the code a bit by moving the inlined controller to together with the first one.

// Define the SmartIndustryInterfaceApp module
var smartIndustryInterface = angular.module('SmartIndustryInterface', []);

smartIndustryInterface.controller('WaelzlagerListController', 
    function ($scope) {
        $scope.WaelzlagerList = [
    {
      name: 'Nexus S',
      snippet: 'Fast just got faster with Nexus S.'
    }, {
      name: 'Motorola XOOM with Wi-Fi',
      snippet: 'The Next, Next Generation tablet.'
    }, {
      name: 'MOTOROLA XOOM',
      snippet: 'The Next, Next Generation tablet.'
    }
  ];
});
smartIndustryInterface.controller("testing", function($scope) {
                    $scope.firstName = "John";
                    $scope.lastName = "Doe"; 
                 });

//angular.element(document).ready(function () {
//    angular.bootstrap(document, ['SmartIndustryInterface']);
//});

<html lang="de" ng-app="SmartIndustryInterface">
    <head>
        <title>Smart Industry Interface</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
        <!-- angular material-->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
        <link rel="stylesheet" href="../css/style.css">
        
        <!-- Angular -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <!-- Bower -->
        <script src="/bower_components/angular/angular.js"></script>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <!-- D3 -->
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <!-- local -->
        <script src="App/app.js"></script>
    </head>
        
    <body>
        <div>
        <p id="dynamischerHTML">Dieser Text wird noch geladen...</p>
        </div>
        
        <div ng-controller="WaelzlagerListController">
        <ul>
            <li ng-repeat="waelzlager in WaelzlagerList">
                <span>{{waelzlager.name}}</span>
                <p>{{waelzlager.snippet}}</p>
            </li>
        </ul>
        </div>
            
        <div>
        <p ng-controller="testing">{{firstName + ' ' + lastName}}</p>
        </div>

        <script src="js/index.js"></script>
    </body>
</html>

Thank you very much for your help. Right, the missing "$" was just a dump fault. I also appreciate the code cleaning. I started with the list (ng-controller Waelzlager), but than I tried to fix the error with angular. With the inline script and the ng-controller "testing", I tried to find my issues in the first place. But unfortunately also your code fixes do not fix the problem. Do you think I need to require angular in the app.js, or why does angular do not work in my project?

PeterS · Accepted Answer · 2016-05-29 09:52:09Z

1

A couple of things so far:

The array of objects is badly defined:

        $scope.WaelzlagerList = [
    {
      name: 'Nexus S',
      snippet: 'Fast just got faster with Nexus S.'
    }, {
      name: 'Motorola XOOM™ with Wi-Fi',
      snippet: 'The Next, Next Generation tablet.'
    }, {
      name: 'MOTOROLA XOOM™',
      snippet: 'The Next, Next Generation tablet.'
    }
  ];

And then the Inline JS has a dodgy char in it:

**§**scope.firstName = "John";

You perhaps need to ask yourself why this needs to be inline, it will make testing harder for you. There are other issues, but those are the two to kick off with. There seems to be a load order issue with the "testing" controller too. See if that helps.

Add plunkr, thanks VRPF: plunkit

edited May 29, 2016 at 9:52

answered May 28, 2016 at 21:39

PeterS

2,96428 silver badges38 bronze badges

2 Comments

Andre Over a year ago

Thank you very much for your help. Right, the missing "$" was just a dump fault. I also appreciate the code cleaning. I started with the list (ng-controller Waelzlager), but than I tried to fix the error with angular. With the inline script and the ng-controller "testing", I tried to find my issues in the first place. But unfortunately also your code fixes do not fix the problem. Do you think I need to require angular in the app.js, or why does angular do not work in my project?

PeterS Over a year ago

@Andre does the entire code snippet provided by VRPF not work for you? You shouldn't need require to run the app and VRPF uploaded solution works for me. I have made a plunkr for you to view. Uptick for VRPF here though for the final tidy. plnkr.co/edit/6EEtKj?p=preview

Collectives™ on Stack Overflow

AngularJS templates not loading correctly

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related