Угловая загрузка API - Первое приложение

Я начинаю в мире AngularJS.Угловая загрузка API - Первое приложение

Я создал небольшое приложение, которое должно извлекать данные из API с некоторыми фиктивными значениями. Работы по API и дает следующий JSON (набрав/API/сотрудники /):

[{"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'); 
};})();

Я не seprated кода в отдельные файлы в это время, но намереваются. Просьба также давать какие-либо рекомендации по поводу именования и т.д. Приветствуется любая помощь

У меня есть следующий частичный 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>

Угловые работает как выражение подтверждает 4. Но я не получаю никаких данных от API. Пожалуйста, помогите !!

источник

2015-06-12 tuppers

Похоже, что с помощью инструментов разработчика появляется следующая ошибка: – tuppers

Ошибка: [ng: areq] Аргумент «EmployeeListController» не является функцией, получил undefined http://errors.angularjs.org/1.4.0/ ng/areq? p0 = EmployeeListController & p1 = not% 20a% 20function% 2C% 20got% 20undefined – tuppers

Я заметил, что у вас есть опечатка в определении маршрутов (cntroller:'EmployeeListController'). (и у меня недостаточно репутации для комментариев)

источник

2015-06-12 19:22:00

Большое спасибо, что заметили опечатку, но ничего не изменилось, пока нет данных – tuppers

Точный. Вероятно, ваш EmployeeListController никогда не был создан из-за неправильного объявления «cntroller», а переменная ваших сотрудников имеет неопределенное значение.

источник

2015-06-12 19:33:32 otaviodecampos

большое спасибо за замедление опечатки, но ничего не изменилось. – tuppers

Ну после того, как много чтения и веб-страниц, я понял, что я не определил контроллер, как доступный для модуля мой код следует читать:

angular.module('empApp') 
    .controller('TestCtrl', TestCtrl) 
    .controller('EmployeeListController', EmployeeListController);

Спасибо для смотреть!

источник

2015-06-13 11:36:27 tuppers

Угловая загрузка API - Первое приложение

ответ

Смежные вопросы