Buil
Built-in Directives
ng-src :
--------------------------------------------------------------------------------------------------------------------------
ng-click :
--------------------------------------------------------------------------------------------------------------------------
Solution :
--------------------------------------------------------------------------------------------------------------------------
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gems;
});
app.controller('TabController', function(){
this.tab = 1;
this.setTab = function(ntab){
this.tab = ntab;
};
this.isSet = function(ntab){
return this.tab == ntab;
};
});
app.controller('GalleryController',function(){
this.current = 0;
this.setCurrent = function(value) {
this.current = value || 0;
};
});
ng-controller="GalleryController as gallery"
>
--------------------------------------------------------------------------------------------------------------------------
ng-model
Submit a Review
ng-model ="review.author" type="email" class="form-control" placeholder="jimmyDean@example.org" title="Email" />
this.review = {};
this.addReview = function(product){
product.reviews.push(this.review);
this.review = {};
};
});
3.8 Form Validations 101
.ng-invalid.ng-dirty{ border-color:red } .ng-valid.ng-dirty{ border-color:green }
ng -include
"'product-description.html'">
app.directive("productReviews", function() {
return {
restrict: 'E',
templateUrl: "product-reviews.html"
};
});
app.directive("productSpecs",function(){
return {
restrict:'A',
templateUrl:"product-specs.html"
};
});
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'
};
});
=================================================================================
5.1 Dependencies
(function() {
var app = angular.module("store-directives",[]);
app.directive("productDescription", function() {
return {
restrict: 'E',
templateUrl: "product-description.html"
};
});
app.directive("productReviews", function() {
return {
restrict: 'E',
templateUrl: "product-reviews.html"
};
});
app.directive("productSpecs", function() {
return {
restrict:"A",
templateUrl: "product-specs.html"
};
});
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(activeTab) {
this.tab = activeTab;
};
},
controllerAs: "tab"
};
});
app.directive("productGallery", function() {
return {
restrict: "E",
templateUrl: "product-gallery.html",
controller: function() {
this.current = 0;
this.setCurrent = function(imageNumber){
this.current = imageNumber || 0;
};
},
controllerAs: "gallery"
};
});
})();
5.3 Services
app.controller('StoreController',['$http',function($http){
var store = this;
store.products = [];
$http.get('/store-products.json').success(function(data){
store.products = data;
});
}]);
Angular JS is a structural framework for dynamic web apps.
It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.
AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write.
And it all happens within the browser, making it an ideal partner with any server technology.
AngularJS teaches the browser new syntax through a construct we call directives. AngularJS is not a single piece in the overall puzzle of building the client-side of a web application.
AngularJS is a client side MVC framework, which
- provides a layer on top of jQuery.
- provides a framework and api to develop modular applications upon,
- üprovides well defined structure to your applications, where separation of concerns is well maintained.
Each functionality of project belongs to a specific concern(data, view, business-logic), and thus reduces development time by several fold, maintenance and testability becomes a breeze with modular architecture. In AngularJS, you can achieve the same functionality in couple of lines of code, which with JQuery might take hundreds of lines. AngularJS takes care of all boilerplate code, and let you focus on core business logic, and look-n-feel of your application.
There are 12 main constructs of angular js
Template: [HTML with additional mark up ]
Directive:[ extend HTML with custom attributes and elments]
Scope:[context that binds view with model]
Expression:[access varibales & functions from scope]
Filter:[formats the value of expression]
Data binding :[sync data between model and view]
Controller: the business logic behind the views
Injector: Dependency injection container
Service: Reusable business logic independent views
Template: [HTML with additional mark up ]
Directive:[ extend HTML with custom attributes and elments]
Scope:[context that binds view with model]
Expression:[access varibales & functions from scope]
Filter:[formats the value of expression]
Data binding :[sync data between model and view]
Controller: the business logic behind the views
Injector: Dependency injection container
Module: container for different parts of application including
- Controller
- Services
- Filters
- Directives
Which configures the injector
Service: Reusable business logic independent views
ONE WAY DATA BINDING
ng-app>
</span><span style="background-color: white;">Hello World</span><span style="background-color: white; color: rgb(0, 119, 0);">
Hello ng-bind="name">
Hey {{name}}
ng-app
ng-controller
ng-model
ng -init
BINDING ELEMENTS
ng-bindng-bind template
ng-bind.HTML
ng non bindable
REPEAT ELEMENTS
ng-repeatng-repeatTrackByIndex
EVENTS
ng-showng-hide,
ng-disabled,
ng-readonly,
ng-click
ng-db-click,
ng-mouse[hover| click| up|down]
ng- show|hide
FILTERS
Uppercase : The
uppercase filter converts string to the uppercase.
Lowercase : The
lowercase filter convert string to the lowercase.
Currency : The
currency filter formats a number value to currency format.
{{amount | currency : '$' : 3}}
Dateformat: {{todayDate | date:'short'}}
{{todayDate |
date:'medium'}}
--> {{todayDate | date:'dd/MMM/yyyy'}}
Comments
Post a Comment