![Code Comparsion
var PersonModel= function(first,last,id) {
var self=this;
self.personId=ko.observable(id);
self.firstname=ko.observable(first);
self.lastname=ko.observable(last);
self.fullname=ko.computed(function(){
return self.firstname()+' '+self.
lastname();
});};
var PeopleModel= function(){
var self=this;
self.newPerson=ko.observable(new
PersonModel('bob','knoblin',1));
self.people=ko.observableArray();
self.addPerson=function(){
self.people.push(self.newPerson());
self.newPerson(new PersonModel
('jane','dough',self.people().length+1));
};
}; var komodel=new PeopleModel(); ko.
applyBindings(komodel);
var angularmodel;
var PersonCtrl= function($scope) {
var PersonModel=function(first,last,id){
var self=this;
self.firstname=first;
self.lastname=last;
self.personId=id || 0;
self.fullname=function(){
return self.firstname+' '+self.
lastname;
}; };
$scope.people=[];
$scope.newPerson=new PersonModel
('bob','knoblin',1);
$scope.addPerson=function(){
$scope.people.push($scope.newPerson);
$scope.newPerson=new PersonModel
('jane','dough',$scope.people.length+1);
};
angularmodel=$scope; };](https://image.slidesharecdn.com/knockoutvs-angular-130605145307-phpapp01/85/Knockout-vs-angular-16-320.jpg)
Knockout vs. angular
- 3. Knockout ● Inspired by what was already there in the XAML world ● Declarative Bindings ○ <span data-bind="text:firstname"></span> ● Automatic UI Refresh ○ self.firstname("george"); //automatically changes the span text ● Dependency Tracking ○ self.name=ko.computed(function(){ ■ return self.firstname()+self.lastname(); ○ });
- 4. Knockout 2 ● Templating ○ <ul data-bind="foreach:person"> ■ <li data-bind="text:firstname"> ○ </ul> ● Initialization ○ var komodel=new PeopleModel(); ○ ko.applyBindings(komodel);
- 5. Knockout Model ● MVVM ○ 2 way communication with the view ○ The ViewModel represents the view. This means that fields in a ViewModel usually match up more closely with the view than with the model. ○ View Communication: There is no IView reference in the ViewModel. Instead, the view binds directly to the ViewModel. Because of the binding, changes in the view are automatically reflected in the ViewModel and changes in the ViewModel are automatically reflected in the view. ○ There is a single ViewModel for each view
- 8. Knockout issues ● self.name= oops ○ self.name('is the setter'); ● binding magic variables ○ $data,$parent,$root ● everything is done in one attribute ○ data-bind="text:name,attr:{title:name,'data-id': personId},click:nameclick" ○ there are addons to help with this ● Code at http://embed.plnkr.co/Gs4U8m/preview
- 9. Angular ● Declarative bindings ○ <span>{{newPerson.firstname}}</span> ● Automatic UI Refresh ○ $scope.firstname='george'; ○ KO dependency tracking is a clever feature fo problem which angular does not have. ● MVC ○ Angular likes to say MV*
- 10. Angular 2 ● Dependency Tracking ○ $scope.fullname=function(){ ■ return $scope.firstname+' '+$scope.lastname; ○ }; ● Templating ○ <ul ng-repeat="person in people"> ■ <li title="person.fullname()"> {{person. firstname}} </li> ○ </ul> ● Embeddable ○ no global state, multiple angular apps in one page with no iframe.
- 11. Angular 3 ● Injectable ○ no main() method ○ Dependency Injection is core ● Testable ○ encourages behavior-view separation ○ pre-bundled with mocks ● Loads more built-in stuff ○ Pluralization Helper ○ Localization Helper ○ Currency and date formatting ○ Script based templating
- 12. Angular Issues ● There's so much going on here ○ Is this enterprise library? ○ or `lightweight` emberJs? ● slightly non-predictable directive naming ○ ng-mousedown ○ ng-class-even ● too many ways to do similar or the same things ○ ngBind vs. {{text}} ○ ng-bind vs. data-ng-bind vs. class="ng-class: {expression};" ○ ng-bind-template vs. {{text}} {{moretext}}!
- 13. Angular Html
- 14. Angular Code
- 15. Html Comparison <body> <ul data-bind="foreach:people"> <li data-bind="text:firstname,attr: {title:lastname}"></li> </ul> <div data-role="add a new person" data- bind="with:newPerson"> <input data-bind="value:firstname, valueUpdate:'afterkeydown'"/> <span data-bind="text:firstname"></span> <div data-bind="text:fullname"></div> <input type="button" data-bind=" click:$root.addPerson" value="add"/> <!-- sample complex binding --> <div data-bind="text:fullname,attr: {title:fullname,'data-id':personId}, click:$root.addPerson"></div> </div> </body> <body ng-app ng-controller="PersonCtrl"> <ul> <li ng-repeat="person in people" title="{{person.lastname}}">{{person. firstname}}</li> </ul> <div data-role="add a new person"> <input ng-model="newPerson.firstname"/> <span ng-bind="newPerson.firstname" ></span> <div>{{newPerson.fullname()}}</div> <input type="button" value="add" ng- click="addPerson()"/> </div> <!-- sample complex binding --> <div title="{{newPerson.fullname}}" data- id="{{newPerson.personId}}" ng-click=" addPerson()">{{newPerson.firstname}}</div> </body>
- 16. Code Comparsion var PersonModel= function(first,last,id) { var self=this; self.personId=ko.observable(id); self.firstname=ko.observable(first); self.lastname=ko.observable(last); self.fullname=ko.computed(function(){ return self.firstname()+' '+self. lastname(); });}; var PeopleModel= function(){ var self=this; self.newPerson=ko.observable(new PersonModel('bob','knoblin',1)); self.people=ko.observableArray(); self.addPerson=function(){ self.people.push(self.newPerson()); self.newPerson(new PersonModel ('jane','dough',self.people().length+1)); }; }; var komodel=new PeopleModel(); ko. applyBindings(komodel); var angularmodel; var PersonCtrl= function($scope) { var PersonModel=function(first,last,id){ var self=this; self.firstname=first; self.lastname=last; self.personId=id || 0; self.fullname=function(){ return self.firstname+' '+self. lastname; }; }; $scope.people=[]; $scope.newPerson=new PersonModel ('bob','knoblin',1); $scope.addPerson=function(){ $scope.people.push($scope.newPerson); $scope.newPerson=new PersonModel ('jane','dough',$scope.people.length+1); }; angularmodel=$scope; };
- 17. Similarities ● Fast friendly data-binding ● attribute-based binding ● both can be fully html5 compliant ● custom directives ● Both are better than using jQuery for most things ● Both may occasionally benefit from a sprinkling of jQuery
- 18. Differences ● Large adoption on knockout ● Angular is backed by google ● MVVM vs. MVC ● Push Model vs. dirty checking ● Angular has a dedicated debugging tool - Batarang
- 19. Knockout vs. Angular ● Far more lightweight ● Easier to learn ● Focuses on one area ● Much better documentation ● Should be faster ● More backwards (+IE) compat ● Concerns are better separated ○ attributes and controller/views ● Has a bigger toolbox ● Does binding and mvc ● Better initialization story
- 20. Popularity Knockout - More question tags on Stackoverflow in Feb, as of today: 5904 vs 6554 Angular - more stars on github 10k vs. 3.7k and google searches
- 21. References ● http://joel.inpointform.net/software-development/mvvm- vs-mvp-vs-mvc-the-differences-explained/ ● http://www.slideshare.net/basarat1/mvvm-knockout-vs- angular ● http://stackoverflow. com/questions/9682092/databinding-in-angularjs ● http://odetocode. com/blogs/scott/archive/2013/02/26/why-use-angularjs. aspx ● http://jsperf.com/angularjs-vs-knockoutjs ● http://codeutopia.net/blog/2013/03/16/knockout-vs- backbone-vs-angular/