Angular Js

AngularJS
Table of Contents
1. introduction
i. Filters and a New Directive
2. Flatlander's Gem Store
i. RAMP UP
ii. Creating a Store Module
iii. Index HTML Setup
iv. Built-in Directives
v. Filters and a New Directive
vi. Tabs Inside Out
vii. Forms and Models
viii. Accepting Submissions
ix. Form Validations 101
x. Directives
3. First Chapter
i. json
ii. custom filter
iii. select ng-options
2
AngularJS
My Awesome Book
This file file serves as your book's preface, a great place to describe your book's content and ideas.
introduction 3
AngularJS
RAMP UP
What is Angular JS?

A client-side JavaScript Framework for adding interactivity to HTML.
HTML javascript
<body ng-controller="StoreController">
</body>
<script>
function StoreController(){
alert('Hello,World');
}
</script>
Download AngularJS http://angularjs.org/
Well need angular.min.js
Download Twitter Bootstrap http://getbootstrap.com/
Well need bootstrap.min.css
Getting Started
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
Modules
Where we write pieces of our Angular application.
Makes our code more maintainable, testable, and readable.
Where we define dependencies for our app.
RAMP UP 4
AngularJS
Creating Our First Module

app.js
var app = angular.module('store', [ ]);
Including Our Module

index.html
<script type="text/javascript" src="app.js"></script>
Module HTML
directive HTML tag , Angular js
ng-app directive
<html ng-app="store">
Expressions
Allow you to insert dynamic values into your HTML
<p>
I am {{ 4+6 }}
</p>
<p>
I am 10
</p>
RAMP UP 5
AngularJS
<p>
{{"hello" + " you"}}
</p>
<p>
hello you
</p>
RAMP UP 6
AngularJS
Creating a Store Module
Objectives
Create a Module named gemStore so we can get started on this marketing journey.
Attach the gemStore module to our HTML page with a Directive.
In index.html, create a simple Expression to display a friendly "Hello, Angular!" message.
(function(){
var app=angular.module('gemStore',[]);
})()
<html ng-app="gemStore">
<head>
<meta charset="utf-8">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<p>
{{"Hello," + " Angular"}}
</p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Creating a Store Module 7

AngularJS
Index HTML Setup
Working with Data
var gems = {
name: '1',
price: 6.95,
description: '...'
}
json , html ?
controller
controller?
app , controller app
(function(){
app.controller('StoreController',function(){
});
})()
controller
(function(){
this.product = gem; // product
});
var gem = {
name: '1',
price: 6.95,
description: '...'
}
})()
html ng-controller controller
<div class="container" ng-controller="StoreController as store">
Index HTML Setup 8

AngularJS
ng-controller="controller as "

<h1> {{store.product.name}} </h1>
<h2> {{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
controller div , div ,,

description

<h2> {{store.product.price}} </h2>
</div>
Index HTML Setup 9

AngularJS
Built-in Directives
directives
var gem = {
name: '1',
price: 6.95,
description: '...',
canPurchase: false
}
ng-show
, canPurchase
ng-show true ,

<h2> ${{store.product.price}} </h2>
<button ng-show="{{store.product.canPurchase}}">Buy</button>
</div>
ng-show , false
var gem = {
name: '1',
price: 6.95,
description: '...',
}
, canPurchase ,
ng-hide
soldOut , false
var gem = {
name: '1',
price: 6.95,
description: '...',
canPurchase: false,
soldOut: true
Built-in Directives 10
AngularJS
ng-show , <div ng-show="!store.product.soldOut">

<div ng-show="!store.product.soldOut">
<h2> ${{store.product.price}} </h2>
<button ng-show="{{store.product.canPurchase}}">Buy</button>
</div>
</div>
ng-hide
<div ng-hide="store.product.soldOut">
,,
this.products = gems;//
});
//
var gems =[
{
name: '1',
price: 6.95,
description: '...',
canPurchase: false
},
{
name: '2',
price: 3.74,
description: '...',
canPurchase: true
}
];
,,

<div>
<h1> {{store.products[0].name}} </h1>
<h2> {{store.products[0].price}} </h2>
AngularJS
<p> {{store.products[0].description}} </p>

<button ng-show="{{store.products[0].canPurchase}}">Buy</button>
</div>
<div>
<h1> {{store.products[1].name}} </h1>
<h2> {{store.products[1].price}} </h2>
<p> {{store.products[1].description}} </p>
<button ng-show="{{store.products[1].canPurchase}}">Buy</button>
</div>
</div>
, ng-repeat
ng-repeat

<div ng-repeat="product in store.products">
<h1> {{product.name}} </h1>
<h2> ${{product.price}} </h2>
<p> {{product.description}} </p>
<button ng-show="{{product.canPurchase}}">Buy</button>
</div>
</div>
ng-repeat
AngularJS
Filters and a New Directive

filter
{{product.price | currency}}
{{ data | filter:options }}
{{"1388123412323" | date:"MM/dd/yyyy @ h:mma"}}
12/27/2013 @ 1:50PM
{{"octagon gem" | uppercase}}
OCTAGON GEM
{{"My Description" | limitTo:8}}
My Descr
3 <li ng-repeat="product in store.products | limitTo:3">
<li ng-repeat="product in store.products | orderBy:'-price'">
images: [
{
full: 'images/1.jpg',
thumb: 'images/thumb1.jpg'
},
{
full: 'images/2.jpg',
thumb: 'images/thumb2.jpg'
}
]
1 {{product.images[0].full}}
<img src="{{product.images[0].full}}"/>
, 404 error
ng-src <img ng-src="{{product.images[0].full}}"/>
Filters and a New Directive 13

AngularJS
Tabs Inside Out

tabs
<ul class="nav nav-pills">

<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
ng-click

<li><a href="#" ng-click="tab=1">Home</a></li>
<li><a href="#" ng-click="tab=2">Profile</a></li>
<li><a href="#" ng-click="tab=3">Messages</a></li>
</ul>
, tab
tab

</ul>
{{tab}}
2-way data binding
ng-click , ,
panel tab
3 panel ,,
<div class="panel">
<h4>Description</h4>
<p>{{ product.description }}</p>
</div>
<div class="panel">
<h4></h4>
<blockquote></blockquote>
</div>
<div class="panel">
<h4></h4>
Tabs Inside Out 14

AngularJS
</div>
3 panel tab panel
<div class="panel" ng-show="tab===1">

<p>{{ product.description }}</p>
</div>
<h4></h4>
</div>
<h4></h4>
</div>
panel
ng-init
<ul ng-init="tab=1" class="nav nav-pills">

</ul>
, tab active ng-class
ng-class="{ active:tab===3 }" tab 3, active
<ul ng-init="tab=1" class="nav nav-pills">

<li ng-class="{ active:tab===1 }"><a href="#" ng-click="tab=1">Home</a></li>
<li ng-class="{ active:tab===2 }"><a href="#" ng-click="tab=2">Profile</a></li>
<li ng-class="{ active:tab===3 }"><a href="#" ng-click="tab=3">Messages</a></li>
</ul>
logic ,
logic controller
controller PanelController
ng-controller="PanelController as panel"
<ul ng-init="tab=1" ng-controller="PanelController as panel" class="nav nav-pills">

Tabs Inside Out 15

AngularJS

</ul>
js
app.controller("PanelController",function(){
});
1. ng-init="tab=1" controller
<ul ng-controller="PanelController as panel" class="nav nav-pills">

<li ng-class="{ active:tab===1 }"><a href="#" ng-click="tab=1">Home</a></li>
<li ng-class="{ active:tab===2 }"><a href="#" ng-click="tab=2">Profile</a></li>
<li ng-class="{ active:tab===3 }"><a href="#" ng-click="tab=3">Messages</a></li>
</ul>
app.controller("PanelController",function(){
this.tab=1;
});
2. ng-click , function
this.setTab = function(newValue){
this.tab = newValue;
};

<li><a href="#" ng-click="panel.setTab(1)">Home</a></li>
<li><a href="#" ng-click="panel.setTab(2)">Profile</a></li>
<li><a href="#" ng-click="panel.setTab(3)">Messages</a></li>
</ul>
3. ng-class
this.isSet = function(t){
return this.tab === t;
};

<li ng-class="{ active:panel.isSet(1) }"><a href="#" ng-click="panel.setTab(1)">Home</
<li ng-class="{ active:panel.isSet(2) }"><a href="#" ng-click="panel.setTab(2)">Profile
<li ng-class="{ active:panel.isSet(3) }"><a href="#" ng-click="panel.setTab(3)">Messages
</ul>
Tabs Inside Out 16

AngularJS
4. panel ng-show
<div class="panel" ng-show="panel.isSet(1) ">

<p></p>
</div>
Tabs Inside Out 17

AngularJS
Accepting Submissions
Accepting Submissions 18
AngularJS
HTML
<form name="reviewForm" novalidate>

</form>
required
<form name="reviewForm" novalidate>

<fieldset class="form-group">
<select ng-model="reviewCtrl.review.stars" required class="form-control"
<option value="">Rate the Product</option>
</select>
</fieldset>
<fieldset class="form-group">
<input ng-model="reviewCtrl.review.author" required type="email" class="form-control"
</fieldset>
</form>
ng-submit , formname.$valid
ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)"
angular $valid ,,
.ng-invalid.ng-dirty{border-color:red}
.ng-valid.ng-dirty{border-color:green}
Form Validations 101 19

AngularJS
Directives
,
ng-include ,
product-description.html
<div>
<blockquote>{{product.description}}</blockquote>
</div>
index.html
<div ng-include="'product-description.html'">
</div>
directive
Element
app.js
app.directive("productDescription",function(){
return{
restrict:'E',//element
templateUrl:"product-description.html"
};
});
js directive , html - (dash) productDescription product-description
index.html
<product-description></product-description>
Attribute
app.js
Directives 20
AngularJS
app.directive("productSpecs", function() {
return {
restrict: "A",
templateUrl: "product-specs.html"
};
});
index.html
<div product-specs></div>
controller directive
app.directive("productTabs",function(){
return{
restrict:"E",
templateUrl:"product-tabs.html" ,
controller:function(){
this.tab = 1;
this.isSet = function(checkTab) {
return this.tab === checkTab;
};
this.setTab = function(setTab) {
this.tab = setTab;
};
},
controllerAs:"tab"
};
});
product-tabs.html
<section>
<li ng-class="{ active:tab.isSet(1) }">
<a href ng-click="tab.setTab(1)">Description</a>
</li>
<a href ng-click="tab.setTab(2)">Specs</a>
</li>
<a href ng-click="tab.setTab(3)">Reviews</a>
</li>
</ul>

Directives 21
AngularJS
<div ng-show="tab.isSet(1)" ng-include="'product-description.html'">

</div>


<div product-specs ng-show="tab.isSet(2)"></div>


<product-reviews ng-show="tab.isSet(3)"></product-reviews>
</section>
index.html
<product-tabs></product-tabs>
Directives 22
AngularJS
Form Model
review
reviews
reviews:[
{
stars:5,
body:"",
author:mkdodos@gmail.com
},
{
stars:2,
body:"",
author:dada@gmail.com
},
]
reviews
<div ng-repeat="review in reviews">

{{review.stars}}
{{review.body}}
{{review.author}}
</div>
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{%);
$interpolateProvider.endSymbol(%}');
});
First Chapter 23
AngularJS
json
module1 : controller
angular.module('caseCtrl', [])
.controller('mainController', function($scope, $http, Case) {
// service
Case.get()
.success(function(data) {
$scope.rows = data;// rows
});
});
module2 : service
angular.module('caseService', [])
.factory('Case', function($http) {
return {
get : function() {
return $http.get('shop/json');//
}
}
});
laravel controller
public function getJson()

{
return Material::take(5)->get();
}
module
var app=angular.module('app', ['caseCtrl', 'caseService']);
<div ng-app="app" ng-controller="mainController">
<div ng-repeat="row in rows" class="col-sm-6 col-md-3">

<div class="row-stat">
<p class="row-stat-label">{% row.name %}</p>
<h3 class="row-stat-value">${% row.price %}</h3>
<span class="label label-success row-stat-badge">+</span>
</div> 
</div> 
json 24
AngularJS
</div>
json 25
AngularJS
custom filter
,
.filter('sumPrice',function(){
return function(data){
//
}
})
{% rows | sumPrice %}
angular.module('shopCtrl', [])
.controller('shopController', function($scope, $http, Shop) {
// service
Shop.get()
$scope.rows = data;// rows
console.log(data);
});
})
//*
.filter('sumPrice',function(){
return function(data){
var total=0;
for(var i=0;i<data.length;i++){
if(data[i].qty>0)
total+=data[i].price*data[i].qty;
}
return total;
}
})
;
<div ng-app="shop" ng-controller="shopController">
<span class="label label-success pull-right">:{% rows| sumPrice %}</span>
<table class="table table-bordered">

<thead>
<tr>
<th class="col-md-2"></th>
</tr>
custom filter 26
AngularJS
</thead>
<tbody>
<tr ng-repeat="row in rows">

<td>{% row.name %}</td>
<td>{% row.price %}</td>
<td><input type="text" ng-model="row.qty"></td>
<td>{% row.price*row.qty %}</td>
</tr>
</tbody>
</table>
</div>
custom filter 27
AngularJS
select ng-options
http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx
label for value in array
<select ng-model="cust" ng-options="row.name for row in rows">

<option value="">-- --</option>
</select>
id
{% cust.id %}
angular.module('custCtrl', [])
.controller('custController', function($scope, $http, Cust) {
// service
Cust.get()
$scope.rows = data;//
});
})
;
angular.module('custService', [])
.factory('Cust', function($http) {
return {
get : function() {
return $http.get('../customers2/json');//
}
}
});
json
$rows=Customer::all();
[
{
"id": 1,
"name": "",
"tel": "1234-5789"
},
{
"id": 3,
"name": "",
"tel": "1235-8987"
select ng-options 28
AngularJS
}
]
select ng-options 29

Angular Js

Uploaded by

Copyright:

Available Formats

You might also like

Angular Js

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular Js

Uploaded by

Copyright:

Available Formats

AngularJS

What is Angular JS?

Download AngularJS http://angularjs.org/

Well need angular.min.js

Download Twitter Bootstrap http://getbootstrap.com/

Well need bootstrap.min.css

Creating Our First Module

var app = angular.module('store', [ ]);

Including Our Module

<script type="text/javascript" src="app.js"></script>

Creating a Store Module

Creating a Store Module 7

Index HTML Setup

Working with Data

app , controller app

html ng-controller controller

<div class="container" ng-controller="StoreController as store">

Index HTML Setup 8

<div class="container" ng-controller="StoreController as store">

controller div , div ,,

<div class="container" ng-controller="StoreController as store">

Index HTML Setup 9

<div class="container" ng-controller="StoreController as store">

ng-show , <div ng-show="!store.product.soldOut">

<div class="container" ng-controller="StoreController as store">

<div class="container" ng-controller="StoreController as store">

<p> {{store.products[0].description}} </p>

<div class="container" ng-controller="StoreController as store">

Filters and a New Directive

{{"1388123412323" | date:"MM/dd/yyyy @ h:mma"}}

{{"octagon gem" | uppercase}}

{{"My Description" | limitTo:8}}

3 <li ng-repeat="product in store.products | limitTo:3">

<li ng-repeat="product in store.products | orderBy:'-price'">

ng-src <img ng-src="{{product.images[0].full}}"/>

Filters and a New Directive 13

Tabs Inside Out

<ul class="nav nav-pills">

<ul class="nav nav-pills">

<ul class="nav nav-pills">

2-way data binding

Tabs Inside Out 14

3 panel tab panel

<div class="panel" ng-show="tab===1">

<ul ng-init="tab=1" class="nav nav-pills">

, tab active ng-class

ng-class="{ active:tab===3 }" tab 3, active

<ul ng-init="tab=1" class="nav nav-pills">

<ul ng-init="tab=1" ng-controller="PanelController as panel" class="nav nav-pills">

Tabs Inside Out 15

<li><a href="#" ng-click="tab=3">Messages</a></li>

<ul ng-controller="PanelController as panel" class="nav nav-pills">

<ul ng-controller="PanelController as panel" class="nav nav-pills">

<ul ng-controller="PanelController as panel" class="nav nav-pills">

Tabs Inside Out 16

<div class="panel" ng-show="panel.isSet(1) ">

Tabs Inside Out 17

<form name="reviewForm" novalidate>