Я учу себя AngularJS, пытаясь сделать простое приложение.У меня проблемы с привязкой данных при использовании контроллера.
todo-item.js
'use strict';
angular.module('todoItem', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/todoItem', {
templateUrl: 'todo-item/todo-item.template.html',
controller: 'TodoItemCtrl'
});
}])
.controller('TodoItemCtrl', [function() {
this.test = [1, 2, 3, 4];
}]);
todo-item.template.html
<p>This is the partial for todo item.</p>
<p>
this is just a test
</p>
<p>{{$ctrl.test}}</p>
<ul>
<li ng-repeat="i in $ctrl.test">{{i}}</li>
</ul>
То, что я вижу, это отображение веб-страницы:
Это частичное для todo item.
Это всего лишь тест
Так вотуказывает на то, что шаблон визуализируется, однако без зависимой части привязки данных ...
Если я добавлю console.log(this.test) в код контроллера сразу после строки this.test = [1, 2, 3, 4], он выведет объект массива на консольArray(4) [ 1, 2, 3, 4 ].Итак, я знаю, что код контроллера должен работать ...
Чего мне не хватает?
Кроме того, будучи новичком в AngularJS, я пока не знаком с отладкой в этой среде.Как бы вы обычно отлаживали что-то подобное?Могу ли я перейти на консоль и сделать что-то вроде >>$ctrl?
В случае, если это поможет, вот app.js
'use strict';
// Declare app level module which depends on views, and core components
angular.module('todoApp', [
'ngRoute',
'todoList',
'todoItem'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/todoList'});
}]);
и index.html:
<!DOCTYPE html>
<html lang="en" ng-app="todoApp">
<head>
<meta charset="utf-8">
<title>ToDo AngularJS App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="todo-list/todo-list.js"></script>
<script src="todo-item/todo-item.js"></script>
</body>
</html>