我的“Hello World”Angular JS無效
[英]My “Hello World” Angular JS is not working
問題描述
我一直在學習Angular js的教程，我正在使用Web Storm 9.0.1。
我只是創建了一個Html頁面並將Angular.js文件加載到項目中。 這是我的簡單代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World ";
}
</script>
</body>
</html>
但是當我運行頁面時，我得到的是： {{helloMessage}}作為標題1！ 我該怎么辦 ？ 我在這里失蹤了什么？
9 個解決方案
解決方案1
6 2014-12-03 14:35:16
你需要：
<body ng-app>
需要此ngApp才能理解AngularJS必須在哪里工作
這是您的工作代碼： http ： //plnkr.co/edit/lPOknrPD5dykwImL6Pb9？p = preview
解決方案2
2 2014-12-03 14:35:34
您還沒有初始化Angular應用程序。 您需要做的就是稍微修改您的body標簽。 請注意以下body標簽中的ng-app屬性：
function HelloWorldCtrl($scope) { $scope.helloMessage = "Hello World "; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app> <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> </body>
解決方案3
2 2014-12-03 14:37:31
<html ng-app="plunker">
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
解決方案4
2 2014-12-03 14:39:06
你總是需要把指令放在第一位。 您也可以使用或任何其他html標記。 ng-app指令告訴瀏覽器'嘿，這是一個Angular應用程序，讓我們看看腳本'。 在ng-app之后，它將識別所有Angular指令。
將角度腳本加載到html底部的身體之后也是更好的做法。 建議最后加載它以獲得性能和屏幕加載推理。
解決方案5
2 2014-12-03 14:55:18
謝謝大家，是的確問題是缺少ng-app指令。 注意：我關注的教程錯過了這一點！
工作守則：
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>
解決方案6
1 2014-12-03 14:37:00
缺少ng-app指令：
<body ng-app="">...</body>
解決方案7
1 2015-01-11 13:46:37
如果您還沒有找到任何解決方案，請嘗試使用此代碼。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Hello World </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp">
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</div>
<script>
// INITIALIZE THE APP.
var hello = angular.module('HelloWorldApp', []);
// ADD THE CONTROLLER.
hello.controller(
'HelloWorldCtrl',
['$scope', function ($greet) {
$greet.helloMessage = 'Hello World!';
} ]
);
</script>
</body>
</html>
我在DIV元素中定義了“ng-app”指令，稍后在腳本中對其進行了初始化。 這樣我就可以在DIV元素中添加多個視圖和控制器。
例如。 在標頭標記下添加另一個DIV。
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<div ng-controller="greet">
<span> {{greetings}} </span>
</div>
稍后在腳本標記內添加此代碼。
// ADD THE SECOND CONTROLLER.
hello.controller(
'greet',
['$scope', function ($greet1) {
$greet1.greetings = 'Good Morning';
} ]
);
解決方案8
0 2014-12-03 15:40:00
您需要做的就是在頁面上定義AngularJS應用程序。 ng-app指令定義了AngularJS應用程序。 您可以在您的頁面上執行以下操作：
<html ng-app=""> or
<body ng-app="">或
<div ng-app="">
在開始編寫其他角度JS代碼之前，請確保執行此操作。
有關Angular JS基礎知識的更多信息：
解決方案9
0 2017-04-15 11:37:09
將角度版本更改為1.2，我做了它並且它有效。 這是： https ： //ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js
Eclipse JQuery無法在我的簡單Hello World程序上運行
[英]Eclipse JQuery not working on my simple Hello World program
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.