HTML not importing Angular.js functions

Question

I am using an HTML page to call functions from an Angular.js page using $scope. No matter what i do, my result appears as {{heading + message}} instead of Hello (+) Users name. (see code below). I feel like this is an issue with not being able to call from my js file, or simply not being able to call the Angular library.

I tested out an example from the Angular.js website and it worked fine so i assume it cannot call the file. I have tried relative paths and direct paths, but neither seem to work for calling the first.js file.

Could it be a problem with not running a node.js server?

Here is the HTML and JS code (my code works perfectly on Stackflow's tester but not on my computer)

var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
 $scope.first = 'Some';
 $scope.last = 'One';
 $scope.heading = 'Message: ';
 $scope.updateMessage = function() {
  $scope.message = 'Hello ' + $scope.first +' '+ $scope.last + '!';
 };
});

<!doctype html>
<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
  <script scr="C:\Users\Administrator\Documents\AngularTesting\js\first.js"></script>
  <title>Name App</title>
 </head>
 <body ng-app="firstApp">
  <div ng-controller="FirstController">
   <span>Name:</span>
   <input type="text" ng-model="first">
   <input type="text" ng-model="last">
   <button ng-click='updateMessage()'>Message</button>
   <hr>
   {{heading + message}}
  </div>
  <!--<script scr="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>-->

 </body>
</html>

angular isn't meant to be run from a local browser window without a server. — Claies, Jul 02 '15 at 21:06
@dfsq What do you mean? A command prompt or the node.js shell? Sorry im really new to this stuff — , Jul 02 '15 at 21:27
I mean browser developer tools. Press F12 in chrome for javascript console. — dfsq, Jul 02 '15 at 21:29
As many have mentioned the page needs to be served from a server. If you're on windows look at a couple of the Microsoft **free** dev tools: [WebMatrix](https://www.microsoft.com/web/webmatrix/) or [VisualStudio Express](https://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx) both of which come with IIS Express as a development web server. — Jon P, Jul 02 '15 at 22:58

score 0 · Accepted Answer · answered Jul 02 '15 at 21:29

0

AngularJS doesn't do its job if you don't run it on a server. If you're not familiar with running a webpage on a server, follow these steps:

Download WampServer
Start running WampServer
Copy your files to the following folder: "C:\wamp\www\"
Change the "src" of your script file in your HTML page to the new location.
Open up a browser and go to http://localhost/app.html (assuming your HTML-file is called app.html)

AngularJS will now be able to do its job, just like on StackOverflow.

answered Jul 02 '15 at 21:29

Testuser

16
3

I just did this, and it displayed my page, but didnt do anything differently than me just running the html doc so it still doesnt work :/ thanks for offer though – Jul 02 '15 at 22:00
*UPDATE* It is hosting my html file, but not my js file for angular. Any thoughts? – Jul 03 '15 at 19:26
Ok. I found the problem. Once you'll see it, you'll probably pull every single hair out of your head one by one. But it's usually like that when you find a problem. Look at your HTML-file in the head. You use "scr" in stead of "src" to import your own JavaScript-file. I just tested your code, which indeed doesn't work (even on a server). But it does work after changing the "scr" to "src". The error here was just a typo. ;) – Testuser Jul 04 '15 at 16:04

score 0 · Answer 2 · edited May 23 '17 at 12:31

Any http server should work. The simplest solution I can think of is run the Python http server.

Assuming you have a folder with following structure:

AngularTesting

|_ index.html

|_ first.js

Run this command in the AngularTesting directory:

python -m SimpleHTTPServer 8000

Seems you are using Windows. So this might be helpful for you if it is not setup yet: Set up Python simpleHTTPserver on Windows

You can try the website by go this address in browser. Also, import the js file in index.html by using relative links.

http://localhost:8000/

Another worth solution to learn is using development tools like grunt or gulp. They have a lot of interesting modules like auto reloading, jslint, minify, etc.

HTML not importing Angular.js functions

2 Answers2