Download to read offline
![Example #2
angular.module('ex-01-app',[]);
angular.module('ex-01-app')
.controller('GreetingController',
function($scope){
$scope.name='World';
}
);
<!DOCTYPEhtml>
<htmlng-app="ex-01-app">
<head>
<metacharset="utf-8">
<title>Angular.JS</title>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs
</head>
<body>
<divng-controller="GreetingController">
<label>Name:<inputtype="text"ng-model="name"></label>
<h1>Hello,{{name}}!</h1>
</div>
</body>
<scriptsrc="ex-01.js"></script>
</html>
5 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-5-320.jpg)
![angular.module('ex-02-app',[]);
angular.module('ex-02-app')
.controller(
'GreetingController',
function($scope){
$scope.name='Default';
$scope.names=[];
$scope.submit=function(){
$scope.names.push($scope.name);
$scope.name="";
};
}
);
<divng-controller="GreetingController">
<formng-submit="submit()">
<label>Name:<inputtype="text"ng-model="name"></label
</form>
<divng-if="names.length>0">
<h1>Helloto</h1>
<ul>
<ling-repeat="nameinnames">{{name|uppercase}}
</ul>
</div>
</div>
Example #3
6 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-6-320.jpg)
![Example #4
angular.module('ex-03-app',[]);
angular.module('ex-03-app')
.controller('GreetingController',
function($scope){
$scope.name='';$scope.names=['Ujang','Otong','Dod
$scope.submit=function(){
$scope.names.push($scope.name);console.log('submittin
$scope.name="";
};});
angular.module('ex-03-app')
.filter('reverse',function(){
returnfunction(input){
returninput.split("").reverse().join("");
};});
<divng-controller="GreetingController">
<formng-submit="submit()">
<label>Name:<inputtype="text"ng-model="name"></label
</form>
<div><h1>Hits</h1>
<ul><ling-repeat="nameinnames">{{name|reverse}}</li
</div></div>
7 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-7-320.jpg)
![(function(){
varapp=angular.module('store',[]);
app.controller('StoreController',function(){
this.product=gem;
});
vargem={
name:'Dodecahedron',
price:2.95,
description:'...',
canPurchase:true,
soldOut:false
}
})();
<divid="app03"ng-app="store">
<divng-controller="StoreControllerasstore">
<divng-hide="store.product.soldOut">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<buttonng-show="store.product.canPurchase">AddtoCart</
</div>
</div>
</div>
Example #5-1
8 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-8-320.jpg)
![<divid="app03a"ng-app="store_a">
<divng-controller="StoreControllerasstore">
<divng-repeat="productinstore.products">
<divng-hide="product.soldOut">
<h2>{{product.name}}</h2>
<h3>${{product.price}}</h3>
<p>{{product.description}}</p>
<buttonng-show="product.canPurchase">AddtoCart</button
</div>
</div>
</div>
</div>
Example #5-2
(function(){
varapp=angular.module('store_a',[]);
app.controller('StoreController',function(){
this.products=gems;
});
vargems=[
{
name:'Dodecahedron',
price:2.95,
description:'...',
canPurchase:true,
soldOut:false
},
{
name:"PentagonalGem",
price:5.95,
description:"...",
canPurchase:false,
soldOut:false
}
];
})();
9 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-9-320.jpg)
![<divid="app03a_mod"ng-app="store_a">
<divng-controller="StoreControllerasstore">
<ulclass="list-group">
<liclass="list-group-item"ng-repeat="productinstore.products"
<h3>{{product.name}}
<emclass="pull-right">{{product.price|currency}}
</h3>
</li>
</ul>
</div>
</div>
Example #5-3
(function(){
varapp=angular.module('store_a',[]);
app.controller('StoreController',function(){
this.products=gems;
});
vargems=[
{
name:'Dodecahedron',
price:2.95,
description:'...',
canPurchase:true,
soldOut:false
},
{
name:"PentagonalGem",
price:5.95,
description:"...",
canPurchase:false,
soldOut:false
}
];
})();
10 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-10-320.jpg)
![<!doctypehtml>
<htmlng-app="todoApp">
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"
<scriptsrc="ex-05-todo.js"></script>
<linkrel="stylesheet"href="ex-05-todo.css">
</head>
<body>
<h2>Todo</h2>
<divng-controller="TodoListControllerastodoList">
<span>{{todoList.remaining()}}of{{todoList.todos.length}}remaining
[<ahref=""ng-click="todoList.archive()">archive</a>
<ulclass="unstyled">
<ling-repeat="todointodoList.todos">
<inputtype="checkbox"ng-model="todo.done">
<spanclass="done-{{todo.done}}">{{todo.text}}</span
</li>
</ul>
<formng-submit="todoList.addTodo()">
<inputtype="text"ng-model="todoList.todoText" size
placeholder="addnewtodohere">
<inputclass="btn-primary"type="submit"value="add"
</form>
</div>
</body>
</html>
angular.module('todoApp',[])
.controller('TodoListController',function(){
vartodoList=this;
todoList.todos=[
{text:'learnangular',done:true},
{text:'buildanangularapp',done:false}];
todoList.addTodo=function(){
todoList.todos.push({text:todoList.todoText,done:false
todoList.todoText='';
};
todoList.remaining=function(){
varcount=0;
angular.forEach(todoList.todos,function(todo){
count+=todo.done?0:1;
});
returncount;
};
todoList.archive=function(){
varoldTodos=todoList.todos;
todoList.todos=[];
angular.forEach(oldTodos,function(todo){
if(!todo.done)todoList.todos.push(todo);
});
};
});
13 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-13-320.jpg)
![HTML
<bodyng-controller="mainController">
<navclass="navbarnavbar-default">
<divclass="container">
<divclass="navbar-header">
<aclass="navbar-brand"href="/">AngularRoutingExample
</div>
<ulclass="navnavbar-navnavbar-right">
<li><ahref="#home"><iclass="fafa-home"></i>Home</
<li><ahref="#about"><iclass="fafa-shield"></i>About
<li><ahref="#contact"><iclass="fafa-comment"></i>
</ul>
</div>
</nav>
<divid="main">
<divng-view></div>
</div>
<footerclass="text-center">...</footer>
</body>
JS
varscotchApp=angular.module('scotchApp',['ngRoute']);
scotchApp.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl:'ex-06/home.html',contr
.when('/home', {templateUrl:'ex-06/home.html',contr
.when('/about', {templateUrl:'ex-06/about.html',cont
.when('/contact',{templateUrl:'ex-06/contact.html',co
});
scotchApp.controller('mainController',function($scope){
$scope.message='EveryonecomeandseehowgoodIlook!'
});
scotchApp.controller('aboutController',function($scope){
$scope.message='Look!Iamanaboutpage.';
});
scotchApp.controller('contactController',function($scope){
$scope.message='Contactus!JK.Thisisjustademo.';
});
15 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-15-320.jpg)
![JS
(function(){
varapp=angular.module('store',['store-products']);
//----------------
app.controller('StoreController',['$http',function($http)
varstore=this;
store.products=[];
$http.get('flatlander-02/store-products.json').success(function
}]);
//----------------
app.controller('ReviewController',function(){
this.review={};
this.addReview=function(product){
this.review.createdOn=Date.now();
product.reviews.push(this.review);
this.review={};
};
});
//----------------
})();
(function(){
varapp=angular.module('store-products',[]);
//----------------
app.directive('productGallery',function(){
return{restrict:'E',templateUrl:'flatlander-02/templa
controller:function(){this.current=0;
this.setCurrent=function(newGallery){this.current=
},
controllerAs:'gallery'
};
});
//----------------
app.directive('productTitle',function(){
return{restrict:'E',templateUrl:'flatlander-02/templa
});
//----------------
app.directive("productSpecs",function(){
return{restrict:'A',templateUrl:'flatlander-02/templa
});
//----------------
app.directive("productPanels",function(){
return{restrict:'E',templateUrl:'flatlander-02/templa
controller:function(){this.tab=1;
this.selectTab=function(setTab){this.tab=setTab;
this.isSelected=function(checkTab){returnthis.tab
},
controllerAs:'panel'
};
});
//----------------
})();
22 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-22-320.jpg)
![product-title.html
<h3>
{{product.name}}
<emclass="pull-right">{{product.price|currency}}</em>
</h3>
product-gallery.html
<divclass="gallery"ng-show="product.images.length">
<imgng-src="{{product.images[gallery.current]}}"class="imgimg-circleimg-thumbnailcenter-block"
<ulclass="clearfixnopadding">
<liclass="small-imagepull-leftthumbnail"ng-repeat="imageinproduct.imagestrackby$index"
<ahrefng-click="gallery.setCurrent($index)"><imgng-src
</li>
</ul>
</div>
product-specs.html
<h4>Specs</h4>
<ulclass="list-unstyled">
<li>
<strong>Shine</strong>
:{{product.shine}}</li>
<li>
<strong>Faces</strong>
:{{product.faces}}</li>
<li>
<strong>Rarity</strong>
:{{product.rarity}}</li>
<li>
<strong>Color</strong>
:{{product.color}}</li>
</ul>
</div>
23 / 26](https://image.slidesharecdn.com/angularjs-151221033321/85/Angular-js-23-320.jpg)
Uploaded byEueung Mulyana
Angular js
This document provides an overview and examples of using AngularJS. It begins with basics like creating a simple app with data binding. It then covers additional concepts like controllers, filters, and directives. Examples demonstrate building multi-page apps using routing. The document concludes with an example of building reusable components in a store app.
More Related Content
Angular js
- 1. Angular.JS Eueung Mulyana http://eueung.github.io/js/angular JS CodeLabs| Attribution-ShareAlike CC BY-SA 1 / 26
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. HTML <bodyng-controller="mainController"> <navclass="navbarnavbar-default"> <divclass="container"> <divclass="navbar-header"> <aclass="navbar-brand"href="/">AngularRoutingExample </div> <ulclass="navnavbar-navnavbar-right"> <li><ahref="#home"><iclass="fafa-home"></i>Home</ <li><ahref="#about"><iclass="fafa-shield"></i>About <li><ahref="#contact"><iclass="fafa-comment"></i> </ul> </div> </nav> <divid="main"> <divng-view></div> </div> <footerclass="text-center">...</footer> </body> JS varscotchApp=angular.module('scotchApp',['ngRoute']); scotchApp.config(function($routeProvider){ $routeProvider .when('/', {templateUrl:'ex-06/home.html',contr .when('/home', {templateUrl:'ex-06/home.html',contr .when('/about',{templateUrl:'ex-06/about.html',cont .when('/contact',{templateUrl:'ex-06/contact.html',co }); scotchApp.controller('mainController',function($scope){ $scope.message='EveryonecomeandseehowgoodIlook!' }); scotchApp.controller('aboutController',function($scope){ $scope.message='Look!Iamanaboutpage.'; }); scotchApp.controller('contactController',function($scope){ $scope.message='Contactus!JK.Thisisjustademo.'; }); 15 / 26
- 16. Flatlander Based onShaping up with Angular.js @Codeschool 16 / 26
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. References 1. AngularJS —Superheroic JavaScript MVW Framework 2. Single Page Apps with AngularJS Routing and Templating | Scotch 3. Shaping up with Angular.js 4. Angular introduction 25 / 26
- 26. END Eueung Mulyana http://eueung.github.io/js/angular JS CodeLabs| Attribution-ShareAlike CC BY-SA 26 / 26