我是 Angular 的新手,并试图将它集成到我的应用程序中。我正在尝试使用一个简单的ng-repeat
(在我设置的示例项目中完美运行)。但是,在当前项目中,我使用的是 Swig 模板语言,它使用 {{ }} 从 .JSON 文件中获取数据,例如:
person.html 文件:
<div> {{ myFirstName }} </div>
<div> {{ mySurName }} </div>
person.json 文件:
{
"myFirstName" : "Joe",
"mySurName" : "Bloggs",
}
我认为我面临的问题是 Swig 使用 {{ }} 从 .JSON 文件中获取数据,而 Angular 也使用 {{ }}。
这是我的简单 ng-repeat:
<ul ng-controller="MyCtrl">
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}}
</li>
</ul>
这是我的简单控制器:
require(['app'], function(app) {
'use strict';
app.controller("MyCtrl", function($scope) {
$scope.countries = [
{name: 'France', population: 63.1},
{name: 'United Kingdom', population: 61.8}
];
});
});
打开我的 HTML 页面时,显示的只是:
has population of
has population of
关于我如何解决这个问题的任何想法?
谢谢
更新
我想从 .JSON 文件中检索数据
更新跟随大卫比奇的推荐
应用树:
- application
- resources
- CSS
- img
- JS
- data
- countries-data.json
- pages
- countries.html
在下面的示例解决方案中,我的 $http.get 是
$scope.countries = [];
$http.get('/resources/data/countries-data.json', function(data){
Firebug 中显示的错误:“NetworkError: 404 Not Found - http://localhost:8000/resources/data/countries-data.json”