Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Knockout Vs Angular

    Hochgeladen von

    Saravanan Subburayal
    54 Ansichten21 Seiten
    This document compares and contrast between Knockout and Angular js

    Originaltitel

    Knockout vs Angular

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    This document compares and contrast between Knockout and Angular js

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    54 Ansichten21 Seiten

    Knockout Vs Angular

    Hochgeladen von

    Saravanan Subburayal
    This document compares and contrast between Knockout and Angular js

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 21

    Vs.

    by Brandon D'Imperio

    About the presenter

    https://coderbits.com/Maslow/
    http://www.slideshare.net/MaslowB/ https://nuget.org/profiles/MaslowB/

    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(); });

    Knockout 2
    Templating
    <ul data-bind="foreach:person"> <li data-bind="text:firstname"> </ul>

    Initialization
    var komodel=new PeopleModel(); ko.applyBindings(komodel);

    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

    Knockout Html

    Knockout Code

    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

    Angular
    Declarative bindings
    <span>{{newPerson.firstname}}</span>

    Automatic UI Refresh
    $scope.firstname='george'; KO dependency tracking is a clever problem which angular does not have.

    feature fo

    MVC
    Angular likes to say MV*

    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.

    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

    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}}!

    Angular Html

    Angular Code

    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" databind="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" ngclick="addPerson()"/> </div> <!-- sample complex binding --> <div title="{{newPerson.fullname}}" dataid="{{newPerson.personId}}" ng-click=" addPerson()">{{newPerson.firstname}}</div> </body>

    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; };

    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

    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

    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

    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

    References
    http://joel.inpointform.net/software-development/mvvmvs-mvp-vs-mvc-the-differences-explained/ http://www.slideshare.net/basarat1/mvvm-knockout-vsangular 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-vsbackbone-vs-angular/

    Das könnte Ihnen auch gefallen