在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.