angular.js和node.js在页面加载时调用节点
我正在尝试使用angular加载页面时调用节点函数，但出于某种原因，函数不会被调用。 我有ng-app和控制器指定，我想我只是把API调用在控制器的构造函数。 这里是页面的代码：
<!doctype html> <!-- ASSIGN OUR ANGULAR MODULE --> <html ng-app="landingPage"> <head> <!-- META --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport --> <title>my page</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script src="core.js"></script> </head> <!-- SET THE CONTROLLER AND GET ALL GATEWAYS --> <body ng-controller="mainController"> 然后我的core.js文件是在同一个目录中拥有控制器控制器：
var loadingCtrl = angular.module('landingPage', []); function mainController($scope, $http) { console.log('loading gateways'); // when landing on the page, get all gateways and show them $http.get('/api/gateways') .success(function(data) { $scope.gateways = data; console.log('got response'); console.log(data); }) .error(function(data) { console.log('Error: ' + data); }); }
我从来没有看到任何日志报表….
我想你只需要改变
function mainController($scope, $http) { //your code here }
至
angular.module('landingPage').controller('mainController', function($scope, $http) { //your code here });
让angular度知道控制器存在。
尝试像下面的dependency injection数组符号。
angular.module('landingPage', []).controller('mainController',['$scope','$http', function($scope, $http) { console.log('loading gateways'); // when landing on the page, get all gateways and show them $http.get('/api/gateways') .success(function(data) { $scope.gateways = data; console.log('got response'); console.log(data); }) .error(function(data) { console.log('Error: ' + data); }); }]);
检查Plunker 。 但我会build议使用工厂服务来加载外部数据，而不是将其加载到控制器中，因为您可以在不同的控制器中重复使用相同的服务。
带有工厂服务的示例代码
'use strict'; angular.module('landingPage', []).controller('mainController',['$scope','$http','gatewayService', function($scope, $http,gatewayService) { console.log('loading gateways'); // when landing on the page, get all gateways and show them $scope.gateways = gatewayService.getData(); }]).factory('gatewayService', ['$http',function($http){ return { getData: function() { return $http.get('/api/gateways') .success(function(data) { return data console.log('got response'); console.log(data); }) .error(function(data) { console.log('Error: ' + data); return data; }); } }; }]);
检查Plunkr