2. About Me
angular.module('profile')
.controller('ProfileCtrl', function ProfileCtrl($scope, profileService) {
'use strict';
$scope.profile = {
Name: 'Edi Santoso',
Current: 'Lead Developer at Kodesoft',
Past: 'Frontend Developer at PT Alfasoft',
Education: 'only graduates of vocational high schools',
Summary: 'I have more than 3 years of being in the ' +
'web development with some of the capabilities of the frontend and' +
'the backend technology.',
Email: 'edicyber@gmail.com',
Site: 'http://kodesoft.co.id/',
Github: 'https://github.com/cyberid41',
LinkedIn: 'https://id.linkedin.com/in/cyberid41',
Twitter: 'http://twitter.com/cyberid41'
};
});
3. February '16 Meetup Malang Frontend Developer
Why Angular?
To create properly architectured and
maintainable web applications
4. February '16 Meetup Malang Frontend Developer
Why Angular?
Defines numerous ways to organize
web application at client side
6. February '16 Meetup Malang Frontend Developer
Why Angular?
Good for Single Page Apps
7. February '16 Meetup Malang Frontend Developer
Why Angular?
https://github.com/showcases/front-end-javascript-frameworks
8. February '16 Meetup Malang Frontend Developer
Key Features
● Declarative HTML approach
● Easy Data Binding : Two way Data Binding
● Reusable Components
● MVC/MVVM Design Pattern
● Dependency Injection
● End to end Integration Testing / Unit Testing
9. February '16 Meetup Malang Frontend Developer
Key Features
● Routing
● Templating
● Modules
● Services
● Expressions
● Filters
● Directives
● Form Validation
10. February '16 Meetup Malang Frontend Developer
Declarative HTML
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
[ <a href="" ng-click="todoList.archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>
11. February '16 Meetup Malang Frontend Developer
Declarative HTML
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
[ <a href="" ng-click="todoList.archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>
12. February '16 Meetup Malang Frontend Developer
Declarative HTML
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
[ <a href="" ng-click="todoList.archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>
26. Modules
Modules and ngApp
<div ng-app="myApp">
<div>
{{ 'World' | greet }}
</div>
</div>
// declare a module
var myAppModule = angular.module('myApp', []);
// configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});