1

I am currently working on a problem with angular js (only worked with it for a while). In an attempt to fix that problem, I have tried to isolate it by using a duplicate copy of my work and deleting everything else which is not needed.

I added a specific piece of code, and I know that this specific piece of code should be working but it's not. Before I can even try to integrate it and see if it actually works with it, I'd need to try to figure out if there is truly something wrong with it.

I have also created new external copies of the js files and css as well for that purpose and correctly linked them.

Basically, the problem I have is that I keep seeing this piece of code in my browser instead of the actual text that should be written:

I see this in my browser (yes scripts are enabled in the browser)...

{{phone.name}} {{phone.snippet}}

But obviously, this shouldn't be the thing appearing.

This is the html:

<!doctype html>
<html ng-app="phonecatApp">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="css/bootstraptwo.css" />
</head>

<body ng-controller="PhoneListCtrl">
    <script type="text/javascript" src="js/apptwo.js"></script>
    <script type="text/javascript" src="js/angulartwo.js"></script>


  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="col-md-10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones">
            <span>{{phone.name}}</span>
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

      </div>
    </div>
  </div>

</body>
</html>

This is the angular:

(function(){


'use strict';

/* Controllers */

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

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.',
     'age': 1},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 2},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 3}
  ];

  $scope.orderProp = 'age';
});

});
user54600
  • 268
  • 1
  • 3
  • 11
  • Angular is probably throwing an error. Do you see any javascript errors in console? – tommybananas Jul 10 '14 at 22:18
  • Yeah just checked. The first thing that pops is this (though I don't see why it would give me that error): Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to: [$injector:nomod] Module 'phonecatApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.2.18/$injector/nomod?p0=phonecatApp – user54600 Jul 10 '14 at 22:22
  • The angular lifecycle will stop when exceptions are thrown so that will be fixed as soon as you fix the errors. Right now it looks like the phonecatApp module never got loaded. – tommybananas Jul 10 '14 at 22:24
  • Yeah I saw that it was written that, but unless I am mistaking, I am correctly loading it. – user54600 Jul 10 '14 at 22:25
  • The IIFE isn't being invoked. Needs a pair of parentheses at the end. – Anthony Chu Jul 10 '14 at 22:26
  • I tried following this part here (is that what you meant? I looked at another page with the description, but to no avail): (function() { /* code */ })(); – user54600 Jul 10 '14 at 22:52
  • Curious, where is the angular script loaded? If it's angulartwo.js, then you should reverse the order of your scripts – pixelbits Jul 11 '14 at 03:13
  • @pixelbits, I modified that just now, but it changed nothing whatsoever. To be fair, that was a good idea, but it didn't change anything. – user54600 Jul 11 '14 at 04:06
  • @user54600 One more suggestion, try adding to your tag. Reason here:http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e – pixelbits Jul 11 '14 at 04:09
  • @pixelbits. I was wondering something, if someone (like myself for example) does not put "@nameofperson", does that mean that a person who already replied to a post won't be notified? I tried the meta tag, but it changed nothing. right now, my brain is fried lol, 12:30am here. I will check it out some more tomorrow, but if you have any other ideas tonite, let me know. – user54600 Jul 11 '14 at 04:30
  • @user54600 The only other thing I can think of is that you're missing the () at the end of your IIFE, but it looks like you've tried that already. Maybe put up a plunker? – pixelbits Jul 11 '14 at 04:34
  • @pixelbits, sure. Let me know if this url works for you. http://embed.plnkr.co/67CWTg3vt1g4HEtpIMBj/preview – user54600 Jul 11 '14 at 05:36
  • 2
    @user54600 I'm pretty sure the error is because of the order that your scripts are applied. The order should be - 1. angular first, 2. then your script. Plunker:http://plnkr.co/edit/e0i5KQnJflHk9VAW0Wcl?p=preview – pixelbits Jul 11 '14 at 05:44
  • @pixelbits, I tried your plunker and the angular can't be the one from the one you linked (it has to be the specific version I have or it won't work for some reason). I loaded yours and worked after making the link change. Mine should have worked, as I had already taken your recommendation beforehand. Now the "Alphabetical" and "newest" thing doesn't work :/ Will be taking a look at this now. I think I might have deleted that code piece by accident lol. – user54600 Jul 12 '14 at 17:48
  • @pixelbits, alright, so cool. So that other minor problem has been fixed (for some odd reason, I had deleted the sort option). Thanks for helping me for the original problem. Two problems fixed today :) – user54600 Jul 12 '14 at 18:05
  • 1
    @user54600 Here is the plunker with the search and sort fixed: http://plnkr.co/edit/8ESxE0HabHBC37LY9oPM?p=preview – pixelbits Jul 12 '14 at 21:07
  • @pixelbits. I had already added the orderProp and the filter query (I guess you didn't see the other post). Thanks anyhow for that :) – user54600 Jul 12 '14 at 21:51

2 Answers2

0

You're missing part of the dependency injection with how you are declaring your controller:

phonecatApp.controller('PhoneListCtrl', ['$scope', function($scope) {
Aaron
  • 2,015
  • 2
  • 24
  • 32
  • I added that in, reloaded the page but to no avail, and then toyed with it for a while, but it still threw me the same error. – user54600 Jul 10 '14 at 22:49
0

Consider renaming PhonelistCtrl to PhonelistController. Please check a gist: https://gist.github.com/johannesMatevosyan/60542f181adb14863244

/* Controller */

phonecatApp.controller("PhonelistController", function ($scope) {}

<body ng-controller="PhonelistController"></body>
johannesMatevosyan
  • 1,360
  • 2
  • 20
  • 30
  • Thank you for the link. I will check this out once I get the chance (as I am currently on vacation for a month - I didn't bring my own laptop). This looks promising, however, Thank you! – user54600 Sep 23 '15 at 22:03