<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<my-header></my-header>
<div class='container' ng-controller='mainCtrl'>
<div class='row'>
<div class='span12'>
{{ name | greet }}
</div>
</div>
<hr />
<div class='row'>
<div class='span12'>
<div my-current-time></div>
</div>
</div>
<hr />
<div class='row'>
<div class='span6'>
<user-list></user-list>
</div>
<div class='span6'>
<ul>
<li ng-repeat='book in books'>
{{book.id}}:{{book.name}}
</li>
</ul>
</div>
</div>
<my-footer></my-footer>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src='directive.js'></script>
<script src='filter.js'></script>
<script src='service.js'></script>
<script src="app.js"></script>
</body>
</html>
var myAppModule = angular.module('myApp', ['myService', 'myDirective', 'myFilter']);
myAppModule.run(['$location', function ($location) {
console.log($location.$$host);
}]);
myAppModule.value('AdminName', 'KENTA KOMAI');
myAppModule.controller('mainCtrl', function($scope, $http, AdminName, book, booksFactory, booksService){
$scope.name = AdminName;
$scope.users = [
{id:100, age:25, name:'Kenta Komai'},
{id:101, age:20, name:'Masami Nagasawa'},
{id:102, age:17, name:'Erika Toda'},
{id:103, age:14, name:'Nozomi Sasaki'},
{id:104, age:34, name:'Aoi Miyazaki'}
];
$scope.books = booksService.bookList(); //use service
$scope.books = booksFactory.bookList(); //use factory
$scope.books = book.bookList(); //use provider
$scope.event = function($scope){
alert('click');
};
});
/* Styles go here */
var myFilterModule = angular.module('myFilter', []);
myFilterModule.filter('greet', function(){
return function(name) {
return 'Hello, ' + name + '!';
};
});
myFilterModule.filter('sample', function(){
return function(user) {
return user.id + ':' + user.age;
};
});
var myDirectiveModule = angular.module('myDirective', []);
myDirectiveModule.directive('myHeader', function(){
return {
restrict : 'E',
link : function(scope, element, attr){
},
template :
'<header>' +
' <div class=\'container\' id=\'mainHeader\'>' +
' <h1>HEADER</h1>' +
' </div>' +
'</header>'
};
});
myDirectiveModule.directive('myFooter', function(){
return {
restrict : 'E',
link : function(scope, element, attr){
},
template :
'<footer>' +
' <div class=\'container\' id=\'mainFooter\'>' +
' <h1>FOOTER</h1>' +
' </div>' +
'</footer>'
};
});
myDirectiveModule.directive('userList', function(){
return {
restrict : 'E',
link : function(scope, element, attr){
},
templateUrl : 'userlist.html'
};
});
myDirectiveModule.directive('myCurrentTime', function($timeout, dateFilter) {
return function(scope, element, attrs) {
var format='';
var timeoutId;
function updateTime() {
element.text(dateFilter(new Date(), 'yyyy/MM/dd H:ss Z'));
}
function updateLater() {
timeoutId = $timeout(function() {
//console.log('time');
updateTime();
updateLater();
}, 1000);
}
element.bind('$destroy', function() {
$timeout.cancel(timeoutId);
});
updateLater();
};
});
var myServiceModule = angular.module('myService', []);
myServiceModule.factory('booksFactory', function(){
var BookList = [
{id:1, name:'The Racketeer: A Novel', isbn:'978-0553840926'},
{id:2, name:'Calico Joe: A Novel ', isbn:'978-0553841275'},
{id:3, name:'Theodore Boone: The Abduction', isbn:'978-0142421376'},
{id:4, name:'The Racketeer', isbn:'978-1444730623'},
{id:5, name:'Theodore Boone: Kid Lawyer', isbn:'978-0142417225'},
{id:6, name:'The Sins of the Father', isbn:'978-1250010407'},
{id:7, name:'Best Kept Secret (Clifton Chronicles)', isbn:'978-1250040770'}
];
return {
bookList: function(){ return BookList; }
};
});
myServiceModule.service('booksService', function(){
var BookList = [
{id:8, name:'The Racketeer: A Novel', isbn:'978-0553840926'},
{id:9, name:'Calico Joe: A Novel ', isbn:'978-0553841275'},
{id:10, name:'Theodore Boone: The Abduction', isbn:'978-0142421376'},
{id:11, name:'The Racketeer', isbn:'978-1444730623'},
{id:12, name:'Theodore Boone: Kid Lawyer', isbn:'978-0142417225'},
{id:13, name:'The Sins of the Father', isbn:'978-1250010407'},
{id:14, name:'Best Kept Secret (Clifton Chronicles)', isbn:'978-1250040770'}
];
this.bookList = function(){
return BookList;
};
});
myServiceModule.provider('book', function(){
this.books = [
{id:15, name:'The Racketeer: A Novel', isbn:'978-0553840926'},
{id:16, name:'Calico Joe: A Novel ', isbn:'978-0553841275'},
{id:17, name:'Theodore Boone: The Abduction', isbn:'978-0142421376'},
{id:18, name:'The Racketeer', isbn:'978-1444730623'},
{id:19, name:'Theodore Boone: Kid Lawyer', isbn:'978-0142417225'},
{id:20, name:'The Sins of the Father', isbn:'978-1250010407'},
{id:21, name:'Best Kept Secret (Clifton Chronicles)', isbn:'978-1250040770'}
];
this.$get = function(){
var BookList = this.books;
return {
bookList: function(){
return BookList;
}
};
};
this.addBook = function(book){
this.books.push(book);
};
});
myServiceModule.config(function(bookProvider){
book = {id:99, name:'hacking', isbn:'999-9999999999'};
bookProvider.addBook(book);
});
<table class='table'>
<thead>
<th>ID:AGE</th>
<th>NAME</th>
<th>EDIT</th>
</thead>
<tbody>
<tr ng-repeat='user in users'>
<td>{{user | sample}}</td>
<td>{{user.name}}</td>
<td><button class='btn btn-primary' ng-click='event($scope)'>EDIT</button></td>
</tr>
</tbody>
</table>