An in-depth analysis of ANGULARJS and Datamodel_angularjs

ANGULARJS Introduction

ANGULARJS is a JavaScript framework. It can be added to the HTML page through the <script> tag.

ANGULARJS extends HTML through instructions and binds data to HTML through an expression.

What is Angularjs?

Angularjs makes it easier to develop a modern single page application (Spas:single page applications).

Angularjs bind application data to HTML elements.

Angularjs can clone and duplicate HTML elements.

Angularjs can hide and display HTML elements.

Angularjs can add code to the HTML element "behind".

ANGULARJS supports input validation.

In general, JSON is used as a model for storing data in Angularjs. We might write model in controller:

App.controller (' Bookcontroller ', [' $scope ', function ($scope) {
$scope. Book = {
id:1,
name: ',
Author: ',
stores:[
{id:1, Name: ', quantity:2},
{id:2, Name: ', quantity:2},
...
]
};
}])

This model might be used in the view:

<div ng-controller= "Bookcontroller" >
<span ng-bind= "book.id" ></span>
<input type= " Text "ng-model=" Book.name "/>
<input type=" text "ng-model=" Book.author "/>

When we need to get data from the server, we might write this:

App.controller (' Bookcontroller ', [' $scope ', ' $http ', function ($scope, $http) {
var bookid = 1;
$http. Get (' Api/books ' +bookid). Success (function (bookdata) {
$scope. book = BookData;
})
$scope. Deletebook = function () {
$http. Delete (' api/books/' + BookID);
}
$scope. Updatebook = function () {
$http. Put (' api/books/' +bookid, $scope. book);
}
$scope. Getbookimageurl = function (width, height) {return
' our/iamge/service ' +bookid + '/width/height ';
}
$scope. isavailable = function () {
if (! $scope. book.stores | | $scope. book.stores.length = = 0) {return
false;< c22/>}
reutrn $scope. Book.stores.some (function (store) {return
store.quantity > 0;
})
}

This can be used in the view:

<div ng-controller= "Bookcontroller" >
<div ng-style= "{backgroundimage: ' url (' +getbookimageurl" (100,100 ) + ') '} ' ></div>
<span ng-bind= ' book.id ' ></span?
<input type= "text" ng-model= "Book.name"/> <input type=
"text" ng-model= "Book.author"/>
is Available: <span ng-bind= "isavailable" ()? ' Yes ': ' No ' ' ></span>
<button ng-click= "Deletebook ()" >Delete</button>
<button ng-click= "Updatebook" >Update</button>

Above, the JSON-formatted model can only be used in Bookcontroller, and how can it be used in other controller?
--by Factory way

App.factory (' book ', [' $http ', function ($http) {
function book (bookdata) {
if (bookdata) {
This.setdata ( bookdata);
}
Book.prototype = {
setdata:function (bookdata) {
angular.extend (this, bookdata);
},
load:function ( ID) {
var scope = this;
$http. Get (' api/books/' + bookid). Success (function (bookdata) {
scope.setdata (bookdata);
})
},
Delete:function (bookid) {
$http. Delete (' api/books/' + BookID);
},
update:function (bookid) {
$ Http.put (' api/books/' + BookID, this);
},
getimageurl:function (width, height) {return
' our/image/  service/' + this.book.id + '/' + width + '/' + height;
},
Isavailable:funciton () {
if (!this.book.stores | | This.book.stores.length = = 0) {return
false;
} 
Return This.book.stores.some (function (store) {return
store.quantity > 0;
}
}} return book;

Above, through the factory way to create a similar book of a data Model, now can be injected into the controller.

App.controller (' Bookcontroller ', [' $scope ', ' book ', Function ($scope, book) {
$scope. Book = new book ();
$scope. Book.load (1);

Changes in the view are also appropriate.

<div ng-controller= "Bookcontroller" >
<div ng-style= "{backgroundimage: ' url (' + book.getimageurl" (100, +] '} ' ></div>
<span ng-bind= "book.id" ></span>
<input type= "text" ng-model= " Book.name "/>
<input type=" text "ng-model=" Book.author "/> is
abailble: <span ng-bind=" Book.isavailabe ()? ' Yes ': ' No ' ' ></span>
<button ng-click= "Book.delete ()" >Delete</button>
<button Ng-click= "Book.update ()" >Update</button>

Above, multiple controller can use the same book data model, if multiple controller processing the same book data model?

App.factory (' Booksmanager ', [' $http ', ' $q ', ' book ', Function ($http. $q, book) {var Booksmanager = {_pool: {}, _retrievei Nstance:function (BookID, bookdata) {var instance = This._pool[bookid]; if (instance) {Instance.setdata (bookdata);} else
{instance = new book (bookdata); this._pool[bookid] = instance;}
return instance; }, _seach:function (BookID) {reutrn this_.pool[bookid]; _load:function (BookID, deferred) {var scope = this; $http. Get (
' api/books/' + bookid). Success (Funciton (BookData) {var book = Scope._retrieveinstance (Bookdata.id, bookdata);
Deferred.resolve (book); }. Error (function () {deferred.reject ();})}, Getbook:function (BookID) {var deferred = $q. Defer (); var book = This._sear
CH (bookid);
if (book) {deferred.resove (book);} else {this._load (bookid, deferred);} return deferred.promise; }, Loadallbooks:function () {var deferred = $q. Defer (); var scope = this; $http. Get (' Api/books '). Success (Function (Booksar Ray) {var books = []; Booksarray.foreach (function (bookdata) {VAR book = scope.l_retrieveinstance (Bookdata.id, bookdata);
Books.push (book);
});
Deferred.resolve (books);
}). Error (function () {deferred.reject ();});
return deferred.promise;
}, Setbook:function (bookdata) {var scope = this; var book = This._search (bookdata.id); if (book) {book.setdata (bookdata);
else {book = scope._retrieveinstance (BookData);
}
};
return booksmanager;  }])

The book Service removes the Load method.

App.factory (' book ', [' $http ', function ($http) { 
function book (bookdata) {
if (bookdata) {
This.setdata ( bookdata):
}
//Some other initializations related to book
};
Book.prototype = {
setdata:function (bookdata) {
angular.extend (this, bookdata);
},
Delete: function () {
$http. Delete (' ourserver/books/' + BookID);
},
update:function () {
$http. Put (' ourserver/books/' + BookID, this];
},
getimageurl:function (width, height) {return
' Our/image/service /' + this.book.id + '/width/height ';
},
isavailable:function () {
if (!this.book.stores | | This.book.stores.length = = 0) {return
false;
}
return This.book.stores.some (the function (store) {return
store.quantity > 0;
});}
;
return book;

Now, multiple controller can use the same Booksmanager service.

App.controller (' Editablebookcontroller ', [' $scope ', ' Booksmanager ', function ($scope, Booksmanager) {
Booksmanager.getbook (1). Then (function (book) {
$scope.
Controller (' Bookslistcontroller ', [' $scope ', ' Booksmanager ', function ($scope, Booksmanager) {
Booksmanager.loadallbooks (). Then (function (books) {
$scope. Books = books;
})
}]