Pengenalan AngularJS
0 likes414 views
The document provides an introduction and overview of AngularJS, including its key features such as declarative HTML, data binding, scopes, controllers, services, directives, filters, modules, dependency injection, and routing. It was presented by Edi Santoso at a Meetup event for frontend developers in Malang, Indonesia on February 5, 2016.
![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>](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-10-320.jpg)
![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>](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-11-320.jpg)
![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>](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-12-320.jpg)
![February '16 Meetup Malang Frontend Developer
Declarative Javascript
angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
todoList.addTodo = function() {
todoList.todos.push({text:todoList.todoText, done:false});
todoList.todoText = '';
};
todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-13-320.jpg)
![Scopes
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);
// HTML
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-19-320.jpg)
![Controllers
// javascript
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
// HTML
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-21-320.jpg)
![Services
angular.
module('myServiceModule', []).
controller('MyController', ['$scope','notify', function ($scope, notify) {
$scope.callNotify = function(msg) {
notify(msg);
};
}]).
factory('notify', ['$window', function(win) {
var msgs = [];
return function(msg) {
msgs.push(msg);
if (msgs.length == 3) {
win.alert(msgs.join("n"));
msgs = [];
}
};
}]);
<div id="simple" ng-controller="MyController">
<p>Let's try this simple notify service, injected into the controller...</p>
<input ng-init="message='test'" ng-model="message" >
<button ng-click="callNotify(message);">NOTIFY</button>
<p>(you have to click 3 times to see an alert)</p>
</div>](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-23-320.jpg)
![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 + '!';
};
});](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-26-320.jpg)
![Dependency Injection
// services
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);
// controller
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone)
{
$scope.phones = Phone.query();
$scope.orderProp = 'age';
}]);](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-29-320.jpg)
![Routing
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);](https://image.slidesharecdn.com/pengenalan-angularjs-160205140454/85/Pengenalan-AngularJS-30-320.jpg)
Pengenalan AngularJS
- 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
- 5. February '16 Meetup Malang Frontend Developer Why Angular? Encourage MVC/MVVM design pattern
- 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>
- 13. February '16 Meetup Malang Frontend Developer Declarative Javascript angular.module('todoApp', []) .controller('TodoListController', function() { var todoList = this; todoList.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; todoList.addTodo = function() { todoList.todos.push({text:todoList.todoText, done:false}); todoList.todoText = ''; }; todoList.remaining = function() { var count = 0; angular.forEach(todoList.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; todoList.archive = function() { var oldTodos = todoList.todos; todoList.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) todoList.todos.push(todo); }); }; });
- 14. Model View Controller (MVC)
- 15. Model View View Model (MVVM)
- 16. Data Binding and Interaction
- 17. Data Binding and Interaction
- 18. Scopes Scope is an object that refers to the application model. It is an execution context for expressions.
- 19. Scopes angular.module('scopeExample', []) .controller('MyController', ['$scope', function($scope) { $scope.username = 'World'; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.username + '!'; }; }]); // HTML <div ng-controller="MyController"> Your name: <input type="text" ng-model="username"> <button ng-click='sayHello()'>greet</button> <hr> {{greeting}} </div>
- 20. Controllers Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope
- 21. Controllers // javascript var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]); // HTML <div ng-controller="MyController"> Your name: <input type="text" ng-model="username"> <button ng-click='sayHello()'>greet</button> <hr> {{greeting}} </div>
- 22. Services Angular services are substitutable objects that are wired together using dependency injection (DI).
- 23. Services angular. module('myServiceModule', []). controller('MyController', ['$scope','notify', function ($scope, notify) { $scope.callNotify = function(msg) { notify(msg); }; }]). factory('notify', ['$window', function(win) { var msgs = []; return function(msg) { msgs.push(msg); if (msgs.length == 3) { win.alert(msgs.join("n")); msgs = []; } }; }]); <div id="simple" ng-controller="MyController"> <p>Let's try this simple notify service, injected into the controller...</p> <input ng-init="message='test'" ng-model="message" > <button ng-click="callNotify(message);">NOTIFY</button> <p>(you have to click 3 times to see an alert)</p> </div>
- 24. Directives <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> ngRepeat
- 25. Filters <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> <span>{{phone.name | uppercase}}</span> <p>{{phone.snippet}}</p> </li> </ul> Filters - Uppercase
- 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 + '!'; }; });
- 27. Dependency Injection Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.
- 28. Dependency Injection Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.
- 29. Dependency Injection // services var phonecatServices = angular.module('phonecatServices', ['ngResource']); phonecatServices.factory('Phone', ['$resource', function($resource){ return $resource('phones/:phoneId.json', {}, { query: {method:'GET', params:{phoneId:'phones'}, isArray:true} }); }]); // controller var phonecatControllers = angular.module('phonecatControllers', []); phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) { $scope.phones = Phone.query(); $scope.orderProp = 'age'; }]);
- 30. Routing var phonecatApp = angular.module('phonecatApp', [ 'ngRoute', 'phonecatControllers' ]); phonecatApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', { templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl' }). when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl' }). otherwise({ redirectTo: '/phones' }); }]);
- 31. Finish...
- 33. Our Community Malang PHP https://www.facebook.com/groups/mphug/ MalangJs https://www.facebook.com/groups/malangjs/ Official sites http://malangphp.org/