pengenalan angularjs
TRANSCRIPT
![Page 1: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/1.jpg)
Malang Frontend Developer
Pengenalan AngularJs(versi 1.5.x)
Presented by : Edi Santoso
Events :Meetup 5 February 2016Dilo Malang
![Page 2: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/2.jpg)
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: '[email protected]',Site: 'http://kodesoft.co.id/',Github: 'https://github.com/cyberid41',LinkedIn: 'https://id.linkedin.com/in/cyberid41',Twitter: 'http://twitter.com/cyberid41'
};});
![Page 3: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/3.jpg)
February '16 Meetup Malang Frontend Developer
Why Angular?To create properly architectured and
maintainable web applications
![Page 4: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/4.jpg)
February '16 Meetup Malang Frontend Developer
Why Angular?Defines numerous ways to organize
web application at client side
![Page 5: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/5.jpg)
February '16 Meetup Malang Frontend Developer
Why Angular?Encourage MVC/MVVM design
pattern
![Page 6: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/6.jpg)
February '16 Meetup Malang Frontend Developer
Why Angular?Good for Single Page Apps
![Page 7: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/7.jpg)
February '16 Meetup Malang Frontend Developer
Why Angular?
https://github.com/showcases/front-end-javascript-frameworks
![Page 8: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/8.jpg)
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
![Page 9: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/9.jpg)
February '16 Meetup Malang Frontend Developer
Key Features● Routing
● Templating
● Modules
● Services
● Expressions
● Filters
● Directives
● Form Validation
![Page 10: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/10.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>
![Page 11: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/11.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>
![Page 12: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/12.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>
![Page 13: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/13.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);});
};});
![Page 14: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/14.jpg)
Model View Controller (MVC)
![Page 15: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/15.jpg)
Model View View Model (MVVM)
![Page 16: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/16.jpg)
Data Binding and Interaction
![Page 17: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/17.jpg)
Data Binding and Interaction
![Page 18: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/18.jpg)
Scopes
Scope is an object that refers to the application model. It is an execution
context for expressions.
![Page 19: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/19.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>
![Page 20: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/20.jpg)
Controllers
Controller is defined by a JavaScript constructor function that is used to
augment the Angular Scope
![Page 21: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/21.jpg)
Controllers
// javascriptvar 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>
![Page 22: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/22.jpg)
Services
Angular services are substitutable objects that are wired together
using dependency injection (DI).
![Page 23: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/23.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>
![Page 24: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/24.jpg)
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
![Page 25: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/25.jpg)
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
![Page 26: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/26.jpg)
Modules
Modules and ngApp
<div ng-app="myApp"> <div>
{{ 'World' | greet }} </div></div>
// declare a modulevar myAppModule = angular.module('myApp', []);
// configure the module.// in this example we will create a greeting filtermyAppModule.filter('greet', function() {
return function(name) {return 'Hello, ' + name + '!';
};});
![Page 27: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/27.jpg)
Dependency Injection
Dependency Injection (DI) is a software design pattern that deals with how
components get hold of their dependencies.
![Page 28: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/28.jpg)
Dependency Injection
Dependency Injection (DI) is a software design pattern that deals with how
components get hold of their dependencies.
![Page 29: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/29.jpg)
Dependency Injection
// servicesvar phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',function($resource){
return $resource('phones/:phoneId.json', {}, {query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});}]);
// controllervar phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) {
$scope.phones = Phone.query();$scope.orderProp = 'age';
}]);
![Page 30: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/30.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'});
}]);
![Page 31: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/31.jpg)
Finish...
![Page 32: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/32.jpg)
Credits
http://www.slideshare.net/bolshchikov/angularjs-basics-with-example
http://www.slideshare.net/sbegaudeau/angular-js-101-everything-you-need-to-know-to-get-started
http://www.slideshare.net/manishekhawat/angularjs-22960631
https://docs.angularjs.org/
https://www.google.co.id/
![Page 33: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/33.jpg)
Our Community
Malang PHPhttps://www.facebook.com/groups/mphug/
MalangJshttps://www.facebook.com/groups/malangjs/
Official siteshttp://malangphp.org/
![Page 34: Pengenalan AngularJS](https://reader031.vdokumen.net/reader031/viewer/2022021500/586fceec1a28aba24c8b7cf9/html5/thumbnails/34.jpg)
Stay in touch...
@cyberid41fb.com/cyberid41
id.linkedin.com/in/cyberid41http://github.com/cyberid41
Stay in touch...