私はこれに類似したいくつかの記事を見ましたが、私は依存関係を正しく実装したと思いますが、 。ここにコードがあります。
IndexController:
/**
* IndexController
* @namespace task_list.layout.controllers
*/
(function() {
'use strict';
angular
.module('task_list.layout.controllers')
.controller('IndexController', IndexController);
IndexController.$inject = ['$scope', 'Auth', 'Tasks', 'Snackbar'];
/**
* @namespace IndexController
*/
function IndexController($scope, Auth, Tasks, Snackbar) {
var vm = this;
vm.isAuthenticated = Auth.isAuthenticated();
vm.tasks = [];
activate();
/**
* @name activate
* @desc Actions to be performed when this controller is instantiated
* @memberOf task_list.layout.controllers.IndexController
*/
function activate() {
Tasks.all().then(tasksSuccessFn, tasksErrorFn);
$scope.$on('task.created', function (event, task) {
vm.tasks.unshift(task);
});
$scope.$on('task.created.error', function() {
vm.tasks.shift();
});
/**
* @name tasksSuccessFn
* @desc Update tasks array on view
*/
function tasksSuccessFn(data, status, headers, config) {
vm.tasks = data.data;
}
/**
* @name tasksErrorFn
* @desc Show snackbar with error
*/
function tasksErrorFn(data, status, headers, config) {
Snackbar.error(data.error);
}
}
}
})();
タスク
/**
* Tasks
* @namespace task_list.tasks.services
*/
(function() {
'use strict';
angular
.module('task_list.tasks.services')
.factory('Tasks', Tasks);
Tasks.$inject = ['$http'];
/**
* @namespace Tasks
* @returns {Factory}
*/
function Tasks($http) {
var Tasks = {
all: all,
create: create,
// edit: edit,
// delete: delete,
get: get
};
return Tasks;
////////////////////
/**
* @name all
* @desc Get all Tasks
* @returns {Promise}
* @memberOf task_list.tasks.services.Tasks
*/
function all() {
return $http.get('/api/v1/tasks/');
}
/**
* @name create
* @desc Create a new Task
* @param {string} name The name of the new Task
* @returns {Promise}
* @memberOf task_list.tasks.services.Tasks
*/
function create(name) {
return $http.post('/api/v1/tasks/', {
name: name
});
}
/**
* @name get
* @desc Get the Tasks of a given user
* @param {string} username The username to get Tasks for
* @returns {Promise}
* @memberOf task_list.tasks.services.Tasks
*/
function get(username) {
return $http.get('/api/v1/accounts/' + username + '/tasks/');
}
}
})();
Task_list.js
(function() {
'use strict';
angular
.module('task_list', [
'task_list.routes',
'task_list.auth',
'task_list.layout',
'task_list.tasks',
'task_list.config',
'task_list.utils',
]);
angular
.module('task_list.routes', ['ngRoute']);
angular
.module('task_list.config', []);
angular
.module('task_list')
.run(run);
run.$inject = ['$http'];
/**
* @name run
* @desc Update xsrf $http headers to align with Django's defaults
*/
function run($http) {
$http.defaults.xsrfHeaderName = 'X-CSRFToken';
$http.defaults.xsrfCookieName = 'csrftoken';
}
})();
モジュールとそのサブフォルダ(コントローラ、ディレクティブ、サービス)のI負荷。ファイルを小型化し、アプリ内の各モジュールを次のようにロードすることに注意してください。
(function() {
'use strict';
angular
.module('task_list.layout', [
'task_list.layout.controllers'
]);
angular
.module('task_list.layout.controllers', []);
})();
ご協力いただきありがとうございます。ありがとう!ここで
は、コンソールログです:JSファイルの
c98216751c41.js:2140 Error: [$injector:unpr] Unknown provider: TasksProvider <- Tasks <- IndexController
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=TasksProvider%20%3C-%20Tasks%20%3C-%20IndexController
at http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:1507:8
at http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:1721:7
at Object.getService [as get] (http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:1737:122)
at http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:1721:212
at getService (http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:1737:122)
at injectionArgs (http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:1740:58)
at Object.instantiate (http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:1747:106)
at $controller (http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:2000:20)
at Object.link (http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:2681:377)
at http://127.0.0.1:9090/static/CACHE/js/c98216751c41.js:1576:296 <div class="col-xs-12 ng-view ng-scope">
tasks.module.js
(function() {
'use strict';
angular
.module('task_list.tasks', [
'task_list.tasks.controllers',
'task_list.tasks.directives',
'task_list.tasks.services',
]);
angular
.module('task_list.tasks.controllers', []);
angular
.module('task_list.tasks.directives', ['ngDialog']);
angular
.module('task_list.tasks.services', []);
})();
ロード順:
<script type="text/javascript" src="{% static 'javascripts/task_list.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/task_list.config.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/task_list.routes.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/auth/auth.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/auth/services/auth.service.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/auth/controllers/register.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/tasks/tasks.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/auth/controllers/login.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/layout/layout.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/layout/controllers/navbar.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/tasks/directives/tasks.directive.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/tasks/controllers/tasks.controller.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/utils/utils.module.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/utils/services/snackbar.service.js' %}"></script>
<script type="text/javascript" src="{% static 'javascripts/layout/controllers/index.controller.js' %}"></script>
を、何これは、Python(またはジャンゴ)と関係があるのでしょうか? – mgilson
タスクサービスが登録されていないようです。あなたのサービスがインスタンス化されているのか、それともロードされているのかを見るためにコンソールログなどを置くことができますか?最終バンドルファイルが含まれているかどうか確認することができます。このエラーは、indexControllerがタスクサービスを見つけることができないために発生します –
@mgilsonそのプロジェクトは私が作業しているのはdjangoにあり、私は自分のビューとして角度を統合しましたが、現時点ではそうではありません。 – hect1c