My goal is to grasp the new components, but I have a limited understanding of bindings and symbols.
Despite my efforts, I can't seem to get ng-repeat to function with this code. I've experimented with controllerAs syntax, scope, changing the bindings, and more!
APP.JS
var app = angular.module('myApp', []);
/* Mock-Data */
app.constant('friends', [{
firstName: 'Conner',
lastName: 'A',
location: 'Melborne, Australia'
}, {
firstName: 'Dom',
lastName: 'M',
location: 'Los Angeles, CA'
}, {
firstName: 'Bryan',
lastName: 'A',
location: 'Seattle, WA'
}, {
firstName: 'Dan',
lastName: 'M',
location: 'Kalispell, MO'
}]);
app.controller('HomeCtrl', ['friends', function(friends) {
this.$onInit = function() {
console.log("HomeCtrl has been initialized");
this.friends = friends;
console.log(this.friends);
};
}]);
app.component('myGrid', {
templateUrl: 'grid.html',
controller: 'HomeCtrl',
bindings: {
data: '<' // I have tried: &,<,=,@
}
});
Index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>My AngularJS App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<my-grid data="friends"></my-grid>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Grid.html
<div class="panel panel-primary">
<div class="panel-heading">Angular 1.X - Example Component</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in data">
<td>{{ employee.firstName }}</td>
<td>{{ employee.lastName }}</td>
<td>{{ employee.location }}</td>
</tr>
</tbody>
</table>
</div>
Despite my best efforts, I just can't seem to make ng-repeat work..