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>
2 answers
solution1
1 ACCPTED 2015-07-02 21:29:08
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.
solution2
0 2015-07-02 21:48:47
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.