Angular not loading - First App
Angular not loading - First App
提问于 2015-06-13 03:01:18
我开始进入AngularJS的世界。
我已经创建了一个小应用程序，它应该从一个API中拉出一些虚拟值的数据。API工作并提供以下JSON(键入/api/employees/)：
[{"Id":1,"FirstName":"George","LastName":"Lucas"},{"Id":2,"FirstName":"Peter","LastName":"Jackson"},{"Id":3,"FirstName":"Christopher","LastName":"Nolan"}]为了使用它，我创建了以下代码：
(function () {
'use strict';
config.$inject = ['$routeProvider', '$locationProvider'];
angular.module('empApp', [
'ngRoute', 'employeesServices'
]).config(config);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/test', {
templateUrl: '/Views/test.html',
controller: 'TestCtrl'
})
.when('/', {
templateUrl: '/Views/list.html',
cntroller:'EmployeeListController'
})
.otherwise({
redirectTo: '/'
});
//$locationProvider.html5Mode(true);
}
angular.module('empApp')
.controller('TestCtrl', TestCtrl);
// Test Contoller - ngView
TestCtrl.$inject = ['$scope'];
function TestCtrl($scope) {
$scope.model = {
message: "This is my app!!!"
};
};
// Employee List Controller
EmployeeListController.$inject = ['$scope', 'Employee'];
function EmployeeListController($scope, Employee) {
$scope.employees = Employee.query();
};
// Employees Service
angular
.module('employeesServices', ['ngResource'])
.factory('Employee', Employee);
Employee.$inject = ['$resource'];
function Employee($resource) {
return $resource('/api/employees/:id');
};})();目前我还没有将代码分离到单独的文件中，但确实打算这样做。也请提供任何建议，重新命名约定等，任何帮助都是感激的
我有以下部分html文件：
<div>
<h1>List Employees</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>
<a href="/employees/edit/{{emp.Id}}" class="btn btn-default btn-xs">edit</a>
<a href="/employees/delete/{{emp.Id}}" class="btn btn-danger btn-xs">delete</a>
</td>
<td>{{emp.FirstName}}</td>
<td>{{emp.LastName}}</td>
</tr>
</tbody>
</table>
<p>
<a href="/employees/add" class="btn btn-primary">Add New Employee</a>
</p></div>index.html文件包含：
<!DOCTYPE html>
<html ng-app="empApp">
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hello Angular JS</h1>
What is 2+2 ?
<br /><br />
Answer = {{2+2}}
<br /><br />
<ng-view></ng-view>
</body>
</html>Angular在表达式确认为4时工作，但我没有从API中获得任何数据。请帮帮我！！
回答 3
Stack Overflow用户
发布于 2015-06-13 03:22:01
我注意到您在路由定义( cntroller:'EmployeeListController')中有一个拼写错误。(我没有足够的名气来发表评论)
Stack Overflow用户
发布于 2015-06-13 03:33:33
完全正确。可能你的EmployeeListController从来没有被错误的声明"cntroller“实例化，你的employees变量有未定义的值。
Stack Overflow用户
发布于 2015-06-13 19:36:27
嗯，经过大量的阅读和网页，我意识到我没有将控制器定义为可用于模块，所以我的代码应该是这样的：
angular.module('empApp')
.controller('TestCtrl', TestCtrl)
.controller('EmployeeListController', EmployeeListController);感谢您的关注！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30810395
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号