Having trouble starting with AngularJS
Question
I'm reluctant to even ask this because it feels so remedial, but I've been scouring through tutorials and docs all morning with no results.
I'm trying to get up and running using AngularJS out of interest and can't seem to get the darn thing to work for me. I have local copies of jquery and angular which I know are being referenced correctly because I'm seeing my jquery bit in index.html working properly.
Please forgive any mis-nomers in my explanation: I'm trying to create a simple ng-app with one controller to grab and output the value of the username input field. I'm under the impression that what I have *should work. Here's the code:
index.html:
<!DOCTYPE html>
<html ng-app="indexApp">
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src ="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jqscripts.js"></script>
<script type="text/javascript" src="js/indexApp.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<h1>Hello Angular</h1>
<p>your name: <input type="text" ng-model="username" name="username"></p>
<p>{{ show() }}</p>
</div>
</body>
</html>
indexApp.js
var indexApp = angular.module("myapp", []);
indexApp.controller('HelloController', ['$scope',
function($scope) {
$scope.username = 'Sam';
$scope.show = function() {return $scope.username;};
});
I have the feeling this is something obvious I'm missing, but I'd love to at least get it up and running!
2 answers
solution1
3 2015-07-02 16:20:38
Here you are:
var indexApp = angular.module("indexApp", []);
Hope this help.
solution2
2 ACCPTED 2015-07-02 16:27:26
<html ng-app="indexApp">
This is your problem. You are supplying the name of the javascript variable which is different from the name of the module you actually registered with angular.module('name', dependencies).
When specifying ng-app in your HTML directive you need to use the name that you supplied as the first parameter. In this case myapp . The answer above will work but you could just as easily change your HTML to be
<html ng-app="myapp">
and everything will work properly.
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.