Is it possible Asp.Net MVC + Breeze + Angular working together?

Question

I am working in a new project based on Asp.Net MVC + Breeze + Angular.

I wanted to use the pre-created views and MVC controllers for the account (login, logout, recover password, etc.) Additionally I want to add mini SPA pages using Breeze and Angular.

Is it possible?

Breeze implements its route config file which overrides existing route of mvc app so I can't use both of them either use breeze routing ot mvc routing.

You can actually have all the routings used together. Just is a mess. I tend to use Angular in my MVC sites to give me mini SPAs. It works great! Why do you need to use Breeze and Angular? — Callum Linington, Nov 07 '14 at 09:16
I am starting with Breeze, I do not know much about it, but it seems that it is a good "glue" between Asp.Net and angular projects, bringing rich data management to Javascript clients (client LINQ, cache, etc.) — Dabiel Kabuto, Nov 07 '14 at 09:24
Yeah seems like a good library, I've not really used it before. You can definately have routing with angular and mvc. They happen in to places, MVC deals with server side routing, and Angular deals with Client side routing. — Callum Linington, Nov 07 '14 at 09:31

score 0 · Answer 1 · answered Nov 07 '14 at 09:39

So to get you started. Here is an Tip I created to help with all those Angular script woes.

In your page you can do this in the scripts at the bottom to add angular module to your page:

@section Scripts {

    <script>
        angular.module('miniSpa', ['ngRoute']).config(['$routeProvider', function ($routeProvider) {
            $routeProvider.when('/#main', { controller: "spaController", templateUrl: '/Partials/Home/Main.html' });

            $routeProvider.otherwise({ redirectTo: '/#main' });
            }])
            .controller('spaController', ['$scope', spaController]);

        function spaController($scope) {
            $scope.hello = "Hello";
        }
    </script>
}

If you just want Angular for data-binding, which I do quite often:

<div ng-app="page">  
    <div ng-controller="pageController">
        <h1>{{ hello }}</h1>
    </div>
</div>

@section Scripts {
    <script>
         angular.module('page', [])
             .controller('pageController', ['$scope', pageController]);

         function pageController($scope) {
              $scope.hello = "hello";
         }
    </script>
}

Is it possible Asp.Net MVC + Breeze + Angular working together?

1 Answers1