Pengenalan AngularJS

Malang Frontend Developer
Pengenalan AngularJs
(versi 1.5.x)
Presented by : Edi Santoso
Events :
Meetup 5 February 2016
Dilo Malang

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'
};
});

February '16 Meetup Malang Frontend Developer
Why Angular?
To create properly architectured and
maintainable web applications

Why Angular?
Defines numerous ways to organize
web application at client side

Why Angular?
Encourage MVC/MVVM design
pattern

Why Angular?
Good for Single Page Apps

Why Angular?
https://github.com/showcases/front-end-javascript-frameworks

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

Key Features
● Routing
● Templating
● Modules
● Services
● Expressions
● Filters
● Directives
● Form Validation

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>

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);
});
};
});

Scopes
Scope is an object that refers to the
application model. It is an execution
context for expressions.

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>

Controllers
Controller is defined by a JavaScript
constructor function that is used to
augment the Angular Scope

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>

Services
Angular services are substitutable
objects that are wired together
using dependency injection (DI).

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>

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

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

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 + '!';
};
});

Dependency Injection
Dependency Injection (DI) is a software
design pattern that deals with how
components get hold of their
dependencies.

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';
}]);

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'
});
}]);

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/

Our Community
Malang PHP
https://www.facebook.com/groups/mphug/
MalangJs
https://www.facebook.com/groups/malangjs/
Official sites
http://malangphp.org/

Stay in touch...
@cyberid41
fb.com/cyberid41
id.linkedin.com/in/cyberid41
http://github.com/cyberid41
Stay in touch...

Pengenalan AngularJS

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Pengenalan AngularJS (20)

Recently uploaded (20)

Pengenalan AngularJS