/views/angular.ejs
file, we're going to specify which part of the DOM that Angular owns.<html ng-app="taskerApp">
Angular allows us to bind a DOM element as a View directly to a controller. We're going to modify our container:
<article ng-controller="TaskListCtrl">
<div class="col-md-12">
</div>
</article>
We're going to tell our controller to render a list of our tasks:
<article ng-controller="TaskListCtrl">
<div class="col-md-12">
<ul>
<li ng-repeat="task in tasks">
<span>{{task.name}}</span>
<p>{{task.description}}</p>
<p>{{"Completed: " + task.completed}}
</li>
</ul>
</div>
</article>
Take a look at that view syntax. What do you think is going to happen when Angular processes this Controller?
Let's find out!
/public/javascripts/angular-app.js
angular.ejs
view, add a link to it:<script type='text/javascript' src="/javascripts/angular-app.js"></script>
angular.min.js
!angular-app.js
, we're going to create our application:// namespace: taskerApp
var taskerApp = angular.module('taskerApp', []);
This binds our app to where we declared it in <html ng-app="taskerApp">
.
Cool - now we need to bind that View we made to a controller.
[{'name': 'Take out of the trash',
'description': 'Don\'t forget the recyclables!',
'completed': true },
{'name': 'Reload ventra card',
'description': 'Balance is low',
'completed': false },
{'name': 'Pick up surprise from UPS...',
'description': 'its a secret to everyone',
'completed': false }]
taskerApp.controller('TaskListCtrl', function ($scope) {
});
<li ng-repeat="task in tasks">
in our view.taskerApp.controller('TaskListCtrl', function ($scope) {
$scope.tasks = [
{'name': 'Take out of the trash',
'description': 'Don\'t forget the recyclables!',
'completed': true },
{'name': 'Reload ventra card',
'description': 'Balance is low',
'completed': false },
{'name': 'Pick up surprise from UPS...',
'description': 'its a secret to everyone',
'completed': false },
];
});
tasks
some objects.