CODEWITHSUNDEEP
javascriptangularjsbreezesingle-page-application
Jason Armstrong
Jason Armstrong

Reputation: 3

Angular Breeze setup

Hello new to angular and breeze. I am able to get my angular code to run along with navigation to different pages. I need to add breeze, but when I add it to my MainController it breaks everything and the developer tools do not specify that anything is wrong in the console. I would like to at-least get my app to work with the breeze dependency working. My index page is calling all the correct scripts for breeze and is in the correct order. This is my setup for the Main controller:

(function () {

    var app = angular.module('app', ['breeze.angular']);
    var breeze = function (breeze) { };
    app.run(['breeze', breeze]);   // Ensure that breeze is minimally configured by loading it when the app runs
    var MainController = function ($scope) {
    };
    app.controller("MainController", MainController);

}());

This is my index.html page(simple sample I used from a tutorial):

 <!DOCTYPE html>
    <!-- define angular app -->
    <html ng-app="app">
        <head>
            <!-- Styles -->
            <link href="Content/bootstrap.min.css" rel="stylesheet" />
            <link href="content/css/font-awesome.css" rel="stylesheet" />
            <link href="Content/breeze.directives.css" rel="stylesheet" />

            <!-- Third party Scripts -->
            <script src="Scripts/angular.min.js"></script>
            <script src="Scripts/angular-route.min.js"></script>
            <script src="Scripts/breeze.debug.js"></script>
            <script src="Scripts/breeze.angular.js"></script>
            <script src="Scripts/breeze.directives.js"></script>

            <!--app library-->
            <!--route-->
            <script src="app/route/route.js"></script>
            <!--services-->
            <!--<script src="app/service/dataService.js"></script>-->
            <script src="app/service/dataDropdown.js"></script>
            <script src="app/validator/validator.js"></script>
            <!--jsControllers-->
            <script src="app/jsControllers/BillingController.js"></script>
            <script src="app/jsControllers/Homecontroller.js"></script>
            <script src="app/jsControllers/IncentiveController.js"></script>
            <script src="app/jsControllers/MainController.js"></script>
        </head>

    <!-- define angular controller -->
    <body ng-controller="MainController">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand">Forecast</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/home"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="/incentives"><i class="fa fa-home"></i> Incentives</a></li>
                    <li><a href="/billing"><i class="fa fa-home"></i> Billing</a></li>
                </ul>
            </div>
        </nav>
        <div id="main">

            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>

        </div>

        <footer class="text-center">
            This is the footer

        </footer>

    </body>
    </html>

Upvotes: 0

Views: 281

Answers (2)

Ward
Ward

Reputation: 17863

I just added a plunker that is pretty close to the minimum Breeze/Angular setup.

It starts like this:

var app = angular.module('app', ['breeze.angular']);

app.controller('Main', Main)
   .factory('dataservice', ['breeze', '$q', dataservice]);

Compare the plunker script.js to your code and you'll see several differences. Notice that I postpone breeze/angular configuration until it is first needed in the dataservice. I like that approach better now than throwing it into app.run.

I don't know why you wrote:

var breeze = function (breeze) { };

I guess you're trying to have something to put in the app.run(...) that triggers execution of the "breeze" service in the "breeze.angular" module. Maybe JavaScript got confused by that (it looks like recursion); it confused me.

Upvotes: 2

Miguel Delgado
Miguel Delgado

Reputation: 133

You don't mention if you work with Visual Studio but if so, this may help:

For me it's worked to start with the Hottowel Angular and Hottowel Angular Breeze Nuget packages. They seamlessly integrate Entity Framework, Breeze, Angular and Bootstrap.

Also, check out the samples for Breeze To Do's. They will work very well with the architecture you select.

Upvotes: 0

Related Questions