Pengenalan AngularJS

Malang Frontend Developer

Pengenalan AngularJs(versi 1.5.x)

Presented by : Edi Santoso

Events :Meetup 5 February 2016Dilo 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: '[email protected]',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

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 HTML











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

};});

Model View Controller (MVC)

Model View View Model (MVVM)

Data Binding and Interaction

Data Binding and Interaction

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

// 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>

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

};});

Dependency Injection

Dependency Injection (DI) is a software design pattern that deals with how

components get hold of their dependencies.


Dependency Injection (DI) is a software design pattern that deals with how

components get hold of their dependencies.


// 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';

}]);

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

}]);

Finish...

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/

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 PHPhttps://www.facebook.com/groups/mphug/

MalangJshttps://www.facebook.com/groups/malangjs/

Official siteshttp://malangphp.org/

https://www.facebook.com/groups/mphug/

https://www.facebook.com/groups/malangjs/

http://malangphp.org/

Stay in touch...

@cyberid41fb.com/cyberid41

id.linkedin.com/in/cyberid41http://github.com/cyberid41

Stay in touch...

http://github.com/cyberid41

Software

Pengenalan AngularJS