pengenalan angularjs
Post on 16-Apr-2017
278 Views
Preview:
TRANSCRIPT
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: '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
February '16 Meetup Malang Frontend Developer
Why Angular?Defines numerous ways to organize
web application at client side
February '16 Meetup Malang Frontend Developer
Why Angular?Encourage MVC/MVVM design
pattern
February '16 Meetup Malang Frontend Developer
Why Angular?Good for Single Page Apps
February '16 Meetup Malang Frontend Developer
Why Angular?
https://github.com/showcases/front-end-javascript-frameworks
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
February '16 Meetup Malang Frontend Developer
Key Features● Routing
● Templating
● Modules
● Services
● Expressions
● Filters
● Directives
● Form Validation
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>
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>
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>
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);});
};});
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
Dependency Injection (DI) is a software design pattern that deals with how
components get hold of their dependencies.
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';
}]);
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/
Our Community
Malang PHPhttps://www.facebook.com/groups/mphug/
MalangJshttps://www.facebook.com/groups/malangjs/
Official siteshttp://malangphp.org/
Stay in touch...
@cyberid41fb.com/cyberid41
id.linkedin.com/in/cyberid41http://github.com/cyberid41
Stay in touch...
top related