在HTML5中使用Angular
[英]Use Angular with HTML5
问题描述
I'm taking tutorial in CodeSchool about angular and I try to create my own experiment in html5 and angular new version in vs2012 . 
我正在CodeSchool中学习有关angular的教程，我尝试在html5和vs2012 angular新版本中创建自己的实验。
I try to test angular repeat but the problem is HTML5 can't render my angular. 我尝试测试角度重复，但问题是HTML5无法呈现我的角度。
When I try to run my page, the repeater only show the angular statement {{item.name}}:{{item.quantity}} not the result. 当我尝试运行页面时，转发器仅显示角度陈述{{item.name}}:{{item.quantity}}而不显示结果。 Why? 为什么？ -"show code below" -“在下面显示代码”
Angular script : 角度脚本 ：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
application.js : 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>
As you can see I add data- in my angular because I use html5 . 如您所见，由于我使用html5因此在角度中添加了data- 。 -"I hate warnings" -“我讨厌警告”
3 个解决方案
解决方案1
2 已采纳 2014-11-08 02:02:44
Your code has a number of typos and errors: 您的代码有很多错别字和错误：
- funtion instead of
function功能而不是function - agular instead of
angular敏捷而不是angular分明 - no jQuery included, but you call
$(function(){...})不包括jQuery，但您调用$(function(){...})
Here's a plunker with your code working. 这可以使您的代码正常工作。
Also, for future reference, if you remove .min from the angular source, it makes it easier to debug. 另外，为了将来参考，如果从角度源中删除.min，则调试起来更容易。
解决方案2
1 2014-11-08 02:02:29
Please add this directive to your body tag: data-ng-app="zaskarCorp" 请将此指令添加到您的正文标签中：data-ng-app =“ zaskarCorp”
Also, you have some misspellings in your javascript code. 另外，您的JavaScript代码中有一些拼写错误。
解决方案3
1 2016-02-19 06:27:01
Without using jQLite your code will look like this: 不使用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
}];
});
Full code: 完整代码：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.