2016-08-15 47 views
0

我想构建一个简单的网络应用程序与外部API进行通信,第一步我希望检查我的控制器,服务-HTML集成是否全部放置,所以我搭售将简单变量从控制器绑定到视图,但我得到的是{{msg}}而不是成功的绑定。角落无法绑定表达式

请稍后忽略服务现在它只是我的基金。

main.html中:

<!DOCTYPE html> 

<html > 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="controller.js"></script> 

<head></head> 
<body ng-app="queueApi" ng-controller="MainController"> 
    <div> 
     <h1>{{msg}}</h1> 
    </div> 

</body> 
</html> 

queueservice.js

angular.module('queueApi') 
.factory('queueService', function ($resource){ 
    return $resource('http://127.0.0.1:8080/queue/:id',{id: '@id'}); 

}); 

controller.js

var app = angular.module('queueApi' , ['ngResource']); 
app.controller('MainController', function($scope,$http, queueService){ 

    $scope.msg = "Hi tom"; 
    // $scope.items = queueService.query({id:2}); //getting all from id 2 

}); 
+0

您的错误似乎与依赖项有关,请单击F12并打开开发人员工具并查看主要错误。现在将['ngResource']更改为[]并再次尝试 –

回答

2

如果你看看哟你的控制台你可以看到模块创建中的错误。这是因为ngResource模块位于外部源文件中,而不是angular.min.js。也加上angular-resource.js

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.min.js"></script>  
<script src="controller.js"></script> 
+0

您好哈姆雷特,你用什么IDE来检查控制台? – Tomb

0

除了Hamlet Hakobyan's答案,你必须确保你的模块已经包含在正确的顺序。使用您的代码结构controller.js应该先于queueservice.js

documentation

要注意的是使用angular.module( 'Mymodule中',[])将创建模块Mymodule中和覆盖任何现有的命名MyModule的模块。使用angular.module('myModule')来检索现有的模块。