Meantime, there was this new kid on the block which was generating a lot of noise and doing some revolutionary things, especially in terms of performance and ease of development called React.

I was firmly in the React camp for the last year or so, and I knew it was the future. But what kept React back for me and probably most of the developers was all these unanswered questions: which build process to use, what data managing library, managing state, even which language to use (ES5, ES6, Typescript, Flow). There was also this story around mobile development which didn’t have the right answer: you could go React Native, which is great, but that’s a huge buy-in which doesn’t always really work-out for small and micro agencies and enterprise apps; Ionic is still king-of-the-hill when it comes to these types of apps, and React just doesn’t have a clear answer which goes well with Cordova.

But i feel that, after looking at some videos and trying out some code, Angular has exactly the right bases covered and it’s ready to put up a good fight for king of front-end hill.

I wrote a “vs” in the title, but it probably should state “inherits”. Angular2 is basically React, it inherits pretty much all of its best features (component tree, virtual dom, clear inputs and outputs) and builds upon it. Angular 2 adds all the infrastructure needed for building a complete web app (from data fetching to routers), with all the decisions premade, and it does so by using the most cutting edge language (TypeScript) and event management system (RxJs), and all the other batteries included. I’m so happy to see the adoption of these 2 technologies as a base for Angular, as both of these have been a favorite of mine for some time already. RxJs has a long history, I’ve used it even before it had a Javascript version, and it’s been one of the best secret weapons in any developer’s arsenal. Typescript was one of my biggest gripes against React, because although you could use Typescript with React, it was not a default choice. Even the very popular create-react-app CLI is not using it and it doesn’t plan to do it in the near future.

Even the inline templating (which a lot of people complain about) does have its merits, because it’s a place where some brilliant folks from angular enabled a thing called Template Transform, which effectively enables you to have your own DSL for showing and fetching data, and creating your own nicer and shorter syntax.

The state management has also been blatantly copied from React, and then supercharged. Some smart folks took the Redux patterns and then they combined them with RxJs to create something that Redux should’ve been from the start.

As for the ecosystem, although React’s gain in popularity was stellar, the big component producers have been suspiciously quiet on the front of native React components. They did make some wrappers, and some new component producers emerged, but “Kendo and co” didn’t give out much else than that. Angular 2 already has native controls BEFORE the initial release! Enthusiasm is huge, and plenty of 3rd party library developers are rallying behind it. Ionic 2 is also just around the corner if you want to build power efficient, mobile hybrid apps. And if you’re big on Native, there’s this thing called NativeScript which sports native Angular 2 support. Angular 2 was built with mobile in mind from the start, so we are very excited to give it a spin on our next project. Stay tuned for some demo apps and proof-of-concepts from us, but in the meanwhile, take a look at following videos to wet your appetite:

The basic problem we had is how to sort a query by a taxonomy term. Orchard doesn’t provide that out of the box because the one taxonomy field can have multiple values even though you can set a single value limit.

The workaround i thought of is creating a read-only field which would get updated on save. For that i planned to use the Orchard workflows.

There are a few nice-to-haves i’d like orchard to enable in future:
1. Enable hidden fields
2. Enable read-only fields
3. Better documentation on workflow objects!!!

Current examples are pretty much a joke, especially for a feature this powerful!
Ok, so how can you update a field on content save? Simple!

You need to create a workflow like this:

The elements are “Content Updated” and “Decision”. Make sure to set “Content Updated” as start element.
Now, the biggest trick is in the decision element; this is a screenshot from the edit of the element:

Or here’s the code:

var ct=ContentItem.City;    
string state= "N/A";
if(ct.State.Terms.Count>0)
      state= ct.State.Terms[0].ContentItem.TitlePart.Title;

gd.StateName.Value = state;
SetOutcome("Done");

The most beatiful thing about this code is that IT’S JUST C#! And it works!
There are a number of different syntactic things that are used when you are mixing up code with markup, but this part is as straightforward as it can get and it works perfectly.

Hope it helps!
Bruno

Now, the one problem with React that people were trying to solve since they learned to love it is: now what? How do we connect it with our data and handle it with minimal boilerplate? I was skeptical about Flux from day one but see that’s the difference: I hated React when I saw it, but I was just kinda skeptical about Flux. It’s much harder to grow out of skepticism into a romance. You can have a sort of a steady relationship with no frills with that kind of start, but nothing close to real romance. There were too many questions lingering (how many stores, how do I organize and track them? Why so much code to connect them? Do I store anything on a component or not, what about change tracking? etc…) and you were pretty much left on your own to answer them. If you searched for an explanation or best practices, the general answer would be “it depends”. And I must admit, the whole ambiguity about “The right way”TM also cooled down my love for React.

A few days ago I ran into what seem to me as just-another-flux-also-ran called Redux. But after reading about it, I actually hated it. It seemed to simple and dumbed down, and introduced ideas like single state storage. This post started 2 weeks ago as a rant about sorry state of Flux and especially about Redux as a extremely stupid solution for the problem. But the same thing that happened with React, happened with Redux. The ideas clicked and love was born. Now there are a lot of good articles and videos about Redux, so I won’t go into explaining the details. It’s actually pretty simple pub-sub system but scalable. The boilerplate is minimized but flexibility is still there, and it delivers on one thing I had trouble with other Flux solutions: simple implementation of single source of truth (without huge amount of hooks and boilerplate). It’s so good that even some developers of competing solutions stopped developing their own and switched. It’s also under development at break-neck speed (it changed from v1 to v2 in 2 weeks) and the support and documentation is awesome. It still needs some questions answered and stuff tweaked but I expect it to become a de-facto standard for development of React application. Check out Dan Abramov’s video about Redux:

https://www.youtube.com/watch?v=xsSnOQynTHs

and the Redux github.  Oh, and as an added plus, check out my sample application built with React and Redux

https://github.com/brunoAltinet/react-redux-example

Cheers!

What interested me most about React is how I can use it to solve some basic data input problems. So the application needed to consist of these basic features:

1. Easy form creation
2. Simple, cross-field and custom validation
3. Look-up tables and dropdowns
4. After input calculations (between properties and components)
5. Detail input (invoice items)
6. Integration with server-side technologies

Honestly, I’m pretty frustrated with the current crop of Todo apps. They are completely useless. I think that a basic invoicing app does a much better job of presenting maturity and power of a certain framework, but I guess that would make too many frameworks and tools look ridiculous. To set up a basic invoicing app you need 3 tables: Partners, Invoice and InvoiceDetail. You need 2 forms, of which the invoicing form would be the one that holds most of the complexity. Actually, you could completely toss out the Partner form, and have it only as a look-up table. It’s a simple, yet very comprehensive demo app.

The invoice form contains partner dropdown, total fields for calculating netto, tax, and brutto values. Adding or subtracting invoice items should change calculated totals. Invoice items also contain calculations (multiplying quantity and unit price) that then have to trigger totals calculation. The validation should work on partner field, date and totals.

All of these features have to be easy to implement with minimal boilerplate and highly extensible (convention over configuration).

In the next post I’ll explain some libraries I used to achieve this, and some additions I had to do to make it all work. 
You can already check out the source code on github, and a demo app (link in the description)

https://github.com/brunoAltinet/ReactAspNetCrudExample

The unattend file Z:\unattend\169.254.69.148.xml was not found!

You would probably get a different xml name, corresponding to some other IP, and the installation would abort.
The solution is simple. You probably have 2 network cards defined (i had legacy and a standard network card), so the system is trying to install via regular card instead of the legacy one. Remove the standard card and leave only the legacy one for the installation.
And that’s it!

var DatepickerDemoCtrl = function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt = null;
  };

  // Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };
  $scope.toggleMin();

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.initDate = new Date('2016-15-20');
  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];
};

ALL that for just one date picker? Really? You can check out the HTML part on the UIs page, but it’s also pretty large. Granted, you can definitely delete a bunch of these functions and tags like initDate etc, but you still have a lot going on there just to hookup a datepicker with a button. So i decided to wrap those into my own directive and get rid of that code smell, and here’s what i ended up with:

(function() {
    'use strict';

    var module = angular.module('altinet.directives', []);

    module.directive('altiDatepicker', [altiDatePicker]);

    function altiDatePicker() {
        var mprefix = 'altidatePicker1234';
        var linkFunc= function(scope, elem, attrs) {
            scope[mprefix+'open'] = function ($event) {
                $event.preventDefault();
                $event.stopPropagation();

                scope[mprefix+'opened'] = true;
            };
        };
        return {
            restrict: 'AE',
            replace: true,
            scope:true,
            compile: function (element, attrs) {
                var html = '<p class="input-group">'+
                        '<input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="'+attrs.ngModel+'" is-open="'+mprefix+'opened" ng-required="true" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />'
                        +'<span class="input-group-btn">'
                        +    '<button type="button" class="btn btn-default" ng-click="'+mprefix+'open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span></p>';
                var e = angular.element(html);
                element.replaceWith(e);
                return linkFunc;
            }
        }
    }

})();

Lets’ go through it step by step:

1. first few lines is about declaring a directive, you can find a lot about that in the docs, but what you have to keep mind is that if you name your directive ‘altiDatepicker’, you will use it with a ‘data-alti-datepicker’ tag (see what they did there?).

2. every directive function has to return an object which can contain properties like “restrict” (which tells how you use the directive), “replace” (does it replace the current code),
“compile” (a function which will be executed and where you do all the magic), or “link” (a function used for hooking up).

3. Beware, if you already have “compile” defined, your “link” function WILL NOT BE EXECUTED unless you return it as a RESULT of your compile function (like in my example).

4. The compile function is the critical part, what i basically did there is took the html of a datepicker and of a button, i concatenated attribute value “ngModel”, i ran that html string through angular.element(html) function, and than replaced the directive with the resulting code. If you want, you can use the same principal and have some other attributes passed down to your custom datepicker.

5. At the end of the “compile” function, I return the linkFunc defined above. The linkFunc defines how i link this directive to scope. I use the linkFunc to add a popup opening function to the scope. Notice that i put a prefix on the functions name, the same way i do it in the html code. Why is that? No reason actually, it can also work without prefix. Actually there is one but i’ll explain later on.

6. The trickies part? The scope. It is defined scope:false by default, which means the directive uses the parent’s scope (which means all datepicker directives on the same controller (eg. form or page) share the same properties and methods). I won’t go deep into scope explanation, but what would happen when you would press any button on any picker, all popups would open.
How did i solve that problem? I defined scope:true. What does that do? It defines that this directive has it’s own child scope and it’s own method “open” attached to that scope. But since it’s a child scope, it also has access to all the parent scope’s properties which are not defined in the child, so i can easily access the model on the parrent scope. But what if I had a property “open” and i wanted to access that in directive? That’s why i have the prefix, i can now have a property “open” on the parent scope and still be able to access it. The only property on parent scope i can’t access is altidatePicker123open, but i doubt i’m going to use that:). There are other ways of dealing with this problem (like isolated scope) but I honestly couldn’t bother right now to see how that works. This was quick, dirty and it works:).

7. Finally, my usage of the directive went from:

            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>

and all that code in the controller (which would multiple with every datepicker used), to….

<input type="text" data-alti-datepicker ng-model="vm.template.testDate" />

With no extra methods on the controller whatsoever:). Now that is what i call a good encapsulation!

But one thing that really has me excited about breeze is the thing that some people hate about it and that is a “Metadata()” endpoint.
What is metadata endpoint?
Metadata endpoint is a service method that a Breeze client application calls to get all the info about entities it has to keep track off, including property names and types, validation, keys, references, object graph etc. The method is called once per app initialization, and the payload can be pretty heavy, but it saves a lot of coding.
The reason i’m so interested in it is that it lets me share basic entity descriptions and validation between client and server, and what’s more, it also lets me save my own custom metadata to feed it, which i will definitely use when creating dynamic business entities in my future project.

Theoretically, Breeze should also be a good fit for Angular because of Angular’s notorious non-scalability when it comes to number of bindings. To keep the app snappy, you have to keep bindings in-check, so huge grids of control-bound data are out of the question. But then you run into a problem of dirty-checking and keeping data up-to-date when having multiple references to same data, and doing lots of manual work which you wanted to avoid by using Angular in the first place. Breeze keeps all those points covered, so i think i can get away with binding angular on just a few key properties and actions, and let Breeze handle the rest.
This is all still IN-THEORY, but i will look into it pretty soon and get back to you with results. Other than that, Breeze is extremely flexible, it can consume literally ANYTHING you throw at it, from OData, Queryable endpoints, pojos, DTOS, from any source which uses HTTP. So you have all the flexiblity in the world to start fast and lean by leveraging tight integration with entity framework, and move gradually to using classic REST endpoints with perhaps MongoDb as persistence.

Quick start
For a quick start with Angular and Breeze I warmly recommend Hot towel Angular Breeze nuget package. It’s a pretty neat layout for an SPA.
After installing i made a few modifications:
1. Instead of firing up SPA by calling index.html, i moved most of the logic to Index.cshtml

2. For my own needs, I moved top navigation bar to ASP.NET view (server-side) because i plan on having lots of smaller SPAs instead of one big one, and i will show links to those in my top bar.

3. For every SPA, you have to reference ALL the the .js files you plan to use in your index.html. That’s my conclusion so far but there’s probably some more elegant solution somewhere.

4. One HUGE pain in the neck i had is that I would get 500 errors from server with a completely blank page, just the header. Debuging didn’t help because all breakopioints would get hit, and no error i could see was thrown. On thing that finally helped me was IntelliTrace, a feature that i would regularly turn off in previous versions of Visual Studio. It showed that my server was throwing “Entry point was not found.” error on Newtonsoft.Json assembly. I previously had to update Json.NET while setting up my environment so i suspected that could cause problems.
It turns out that regardless of having a newer version of Json.NET packaged in the solution, some assemblies would target the older one stored in GAC, and then you would get a version mismatch. A good explanation of the problem can be found here. The solution of the problem is pretty simple, you have to update your Web.Config where you define which Json.NET minimum version to use:

      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-4.5.0.0" newVersion="4.5.0.0" />
      </dependentAssembly>

to…

      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
      </dependentAssembly>

5. Breeze is not hooked up by default in this template, you have to modify a few files. First you have to modify datacontext.js and include entityManagerFactory. Something like this…

(function () {
    'use strict';

    var serviceId = 'datacontext';
    angular.module('app').factory(serviceId, ['common','entityManagerFactory','breeze','logger', datacontext]);

    function datacontext(common, entityManagerFactory,breeze, logger) {
        var $q = common.$q;

        var mngr = entityManagerFactory.newManager();
        var service = {
            getPeople: getPeople,
            getMessageCount: getMessageCount,
            getPartners:getPartners
        };

        return service;

        function getMessageCount() { return $q.when(72); }

        function getPeople() {
            var people = [
                { name: 'John', lastName: 'Papa', age: 25, location: 'Florida' },
                { name: 'Ward', lastName: 'Bell', age: 31, location: 'California' },
                { name: 'Colleen', lastName: 'Jones', age: 21, location: 'New York' },
                { name: 'Madelyn', lastName: 'Green', age: 18, location: 'North Dakota' },
                { name: 'Ella', lastName: 'Jobs', age: 18, location: 'South Dakota' },
                { name: 'Landon', lastName: 'Gates', age: 11, location: 'South Carolina' },
                { name: 'Haley', lastName: 'Guthrie', age: 35, location: 'Wyoming' }
            ];
            return $q.when(people);
        }
        function getPartners() {
            var qry = breeze.EntityQuery.from("Partners").orderBy("name");
            var promise = mngr.executeQuery(qry).catch(queryFailed);
            return promise;
        }

        function queryFailed(error) {
            logger.logError(error.message, "Query failed");
            throw error; // so downstream promise users know it failed
        }
    }
})();

This is the biggest difference from the regular samples you will find. Most of other samples don’t use entityManagerFactory.
Notice how i use Angular’s dependency injection to reference entityManagerFactory. I use that factory to make an entityManager used for data retreival. What i’m very glad to see is the concepts from silverlight (like query objects in getPartners) making it into Breeze. Makes me feel right at home:). After you’ve done that you’ll start getting some excetpion about failing to resolve dependencies. You also have to hook up breeze itself into your application.
You will also have to configure your endpoint and some other stuff in your config.js

(function () {
    'use strict';

    var app = angular.module('app');

    // Configure Toastr
    toastr.options.timeOut = 4000;
    toastr.options.positionClass = 'toast-bottom-right';

    // For use with the HotTowel-Angular-Breeze add-on that uses Breeze
    var remoteServiceName = 'breeze/AppContext';
.
.
.

The remoteServiceName is the most important one for breeze, this is a relative URL To your breeze service.
The last piece of the puzzle is hooking up breeze in your app.js, which is something already described in lots of sample apps, but here it is:

(function () {
    'use strict';
    
    var app = angular.module('app', [
        'breeze.angular',
        // Angular modules 
        'ngAnimate',        // animations
        'ngRoute',          // routing
        'ngSanitize',       // sanitizes html bindings (ex: sidebar.js)

        // Custom modules 
        'common',           // common functions, logger, spinner
        'common.bootstrap', // bootstrap dialog wrapper functions

        // 3rd Party Modules
        'ui.bootstrap'      // ui-bootstrap (ex: carousel, pagination, dialog)
    ]);
    
    // Handle routing errors and success events
    app.run(['$route',  function ($route) {
            // Include $route to kick start the router.
        }]);        
})();

The first line, “breeze.angular”, is what’s important. You also have to reference all those files of your SPA in your index.html page. I use ForLoop.HtmlHelper for this, so that all the javascript references and blocks end up at the end of the page. The following is the complete reference for my sample app, you don’t need all of it.

@using (@Html.BeginScriptContext())
{

    Html.AddScriptFile("~/scripts/angular.js");
    Html.AddScriptFile("~/scripts/angular-animate.js");
    Html.AddScriptFile("~/scripts/angular-route.js");
    Html.AddScriptFile("~/scripts/angular-sanitize.js");
    Html.AddScriptFile("~/scripts/breeze.debug.js");
    Html.AddScriptFile("~/scripts/breeze.angular.js");

    Html.AddScriptFile("~/scripts/toastr.js");
    Html.AddScriptFile("~/scripts/moment.js");
    Html.AddScriptFile("~/scripts/ui-bootstrap-tpls-0.10.0.js");
    Html.AddScriptFile("~/scripts/spin.js");

       // <!-- Bootstrapping -->
    Html.AddScriptFile("app/app.js");
    Html.AddScriptFile("app/config.js");
    Html.AddScriptFile("app/config.exceptionHandler.js");
    Html.AddScriptFile("app/config.route.js");

   // <!-- common Modules -->
    Html.AddScriptFile("app/common/common.js");
    Html.AddScriptFile("app/common/logger.js");
    Html.AddScriptFile("app/common/spinner.js");

    //<!-- common.bootstrap Modules -->
    Html.AddScriptFile("app/common/bootstrap/bootstrap.dialog.js");

    //<!-- app -->
    Html.AddScriptFile("app/admin/admin.js");
    Html.AddScriptFile("app/dashboard/dashboard.js");
    Html.AddScriptFile("app/templates/templates.js");
    Html.AddScriptFile("app/layout/shell.js");
    Html.AddScriptFile("app/layout/sidebar.js");

    //<!-- app Services -->
    Html.AddScriptFile("app/services/datacontext.js");
    Html.AddScriptFile("app/services/directives.js");
    Html.AddScriptFile("app/services/entityManagerFactory.js");
}

And that’s it! I managed to show my first table with this kind of setup. I just wanted to point out some relevant points i couldn’t find anywhere else to make the hook-up succesful, you should definitely have a look at other sampple applications like Todo-Angular on the Breeze site.

Knockout.js
Binding library which is also a part of Durandal, i think it’s a good solution for basic binding needs, but not quite the type of solution i hoped for. Anyway on to the next…

Backbone.js
The grandpa of JS mvc frameworks. I haven’t looked at it much since everyone says it’s pretty basic, you need plugins like marionette (good/bad), and from what i gathered everyone’s transitioning to play with the newer kids on the block. For a guy that came from Silverlight, using Caliburn.micro with conventions and MVVM, when i saw a lot of “boilerplate” written next to it’s name i hardly gave a serious thought to it any more. FINAL VERDICT: Oldie but goldie. Speaking of new kids on the block…

React.js
Definitely the one i was most interested in, i really think it’s an amazing solution. It’s a paradigm shift and a way of thinking that really resonates with me. I love the tools, philosophies and extensions people are developing around it (like Om, Clojurescript support ). But it lacks battle proof. As a .NET guy, i don’t like the tooling story just yet. Altough you can get MVC5 supported nuget packages, JSX Visual studio support (judging from my Google search) is non-existant. If i was a sublime text guy, i would absolutely consider it. The other problem i have with it, i’m not quite sure how it would behave with data intensive applications with grids and forms, and i don’t see how to integrate it with some out-of-box components, like syncfusion or kendo. I absolutely love the principle of js-only components, doing away with templating etc. I just need to see more examples, better support, bigger community etc. FINAL VERDICT: Up and coming and very promising, something to keep an eye on, but more examples and support needed. Strong backing, and judging by how they treat ASP.NET, a very bright future is in it for a .NET guy. Speaking of support….

Durandal.js
Aaand we have our first JS MVC war victim (and as always, the innocent suffer first). Durandal.js was my favourite just a few months ago. It looked extremely solid, and it was built by a guy who was into UI frameworks for the last XY years, the father of Caliburn and Caliburn.Micro, Rob Eisenberg. I fell completely in love with Caliburn.Micro, it’s the best code i’ve ever seen and having a same guy do a JS framework… well, i was completely sold. Until 2 weeks ago that is. Turns out Rob is now in bed with the enemy.He joined the Angular 2.0 team and they are building the next generation of web. Which honestly is kind of relief because that leaves me with less to choose from. FINAL VERDICT: Silverlight-inspired framework going the way of silverlight:(. So now that would make Rob’s biggest “enemy”….

Ember.js
That would be my second favourite. I’m always keeping an eye on what’s going on over the fence, and since Ember is a brainchild of Rail-heads, I was very intrigued by a prospect of integrating Ember with my ASP.NET MVC app. The opinionated nature, the convention based development, the battle-proved worthiness, the genuine open-source nature of the project, the pit-of-success enforced structure resonated very much with my way of thinking. I still feel it’s the most complete solution, and the one that has the best feature set and performance, and it’s an ideal one…. for a rails developer. Or even for a python dev, or php. It’s just not that great for a .net dev. The main issue is the fact that Ember owns your data model and therefore it makes it harder to use data library like Breeze. And Ember-data doesn’t support OData, which i may or may not use (haven’t decided yet). Other than that, when searching for a kendo-ember integration, results came out pretty scarce. There are some Ember-specific girds and controls, but i really don’t want to be framework-bound when choosing my controls. FINAL VERDICT: Fantastic framework with the right idea, but without appropriate following, support and mindshare. And speaking of mind share…

Angular.js
Takes the crown. Angular strikes me as a middle-of-the-road solution all-around. It’s opinionated but not completely, it has less then Ember but more than the rest, it’s somewhat structured but less than Ember. I don’t like it honestly, it has too many weird and angular-specific concepts (and i usually don’t like the middle-of-the road things). But I’m completely buying the future of Angular and the mind share. Every control vendor i googled has some kind of angular integration, and 3rd party libraries cannot afford to ignore it. If you want to use them, your best bet is Angular by far. Model is a simple Javascript object (Pojo) so it’s dead simple to integrate with breeze or similar. The 2.0 version will be also built and supported by a guy who did Durandal, so I have high hopes for that one. The visual studio integration is also very decent, the Microsoft team is also using it, PHP guys are using it, Angular guys are well connected to Chrome developers (not something you should ignore), basically everyone is using it. Oh and there’s also this…

It’s a pretty safe bet your Angular skills will be in high demand, and learning the concepts and quirks should pay off in the long run. And to all the PMs, the Angular talent should be the easiest to find in the future.
FINAL VERDICT: King of the hill, whatever you might think of that.

So that would be my recommendation for a JS MVC framework. Keep an eye on React, try out Ember to learn the proper way to structure a JS app, forget about Durandal, for widgets and smaller stuff try Backbone or Knockout, but keep your Angular strong.

        public static decimal Inverse(this decimal d)
        {
            return d == 0 ? 0 : 1 / d;
        }

And instead of using divison, now you use multiplication. Much safer!

a=b/c;

//same way
a=b*c.Inverse()

That’s it!