在HTML5中使用Angular
[英]Use Angular with HTML5
問題描述
我正在CodeSchool中學習有關angular的教程，我嘗試在html5和vs2012 angular新版本中創建自己的實驗。
我嘗試測試角度重復，但問題是HTML5無法呈現我的角度。
當我嘗試運行頁面時，轉發器僅顯示角度陳述{{item.name}}:{{item.quantity}}而不顯示結果。 為什么？ -“在下面顯示代碼”
角度腳本 ：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
application.js ：
<script type="text/javascript" src="Scripts/application.js"></script>
$(function () { var app = angular.module('zaskarCorp', []); app.controller('kirito', function ($scope) { $scope.items = [{ "name": "dual sword", "quantity": 2 }, { "name": "gun", "quantity": 1 }, { "name": "laser sword", "quantity": 1 }]; }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script type="text/javascript" src="Scripts/application.js"></script> </head> <body data-ng-controller="kirito"> <ul> <li data-ng-repeat="item in items"> <span>{{item.name}}:{{item.quantity}}</span> </li> </ul> </body> </html>
如您所見，由於我使用html5因此在角度中添加了data- 。 -“我討厭警告”
3 個解決方案
解決方案1
2 已采納 2014-11-08 02:02:44
您的代碼有很多錯別字和錯誤：
- 功能而不是
function - 敏捷而不是
angular分明 - 不包括jQuery，但您調用
$(function(){...})
這可以使您的代碼正常工作。
另外，為了將來參考，如果從角度源中刪除.min，則調試起來更容易。
解決方案2
1 2014-11-08 02:02:29
請將此指令添加到您的正文標簽中：data-ng-app =“ zaskarCorp”
另外，您的JavaScript代碼中有一些拼寫錯誤。
解決方案3
1 2016-02-19 06:27:01
不使用jQLite，您的代碼將如下所示：
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function ($scope) {
$scope.items = [
{
"name": "dual sword",
"quantity": 2
},
{
"name": "gun",
"quantity": 1
},
{
"name": "laser sword",
"quantity": 1
}];
});
完整代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script> var app = angular.module('zaskarCorp', []); app.controller('kirito', function($scope) { $scope.items = [{ "name": "dual sword", "quantity": 2 }, { "name": "gun", "quantity": 1 }, { "name": "laser sword", "quantity": 1 }]; }); </script> </head> <body data-ng-controller="kirito"> <ul> <li data-ng-repeat="item in items"> <span>{{item.name}}:{{item.quantity}}</span> </li> </ul> </body> </html>
如何在這個 angular 2 示例上使用 HTML5 模式？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.