角度微风设置

Angular Breeze setup

本文关键字：设置 微风      更新时间：2023-09-26

你好，新来的是棱角分明的微风。我可以让我的角度代码与导航一起运行到不同的页面。我需要添加微风，但当我将其添加到MainController时，它会破坏一切，开发人员工具不会指定控制台中有任何错误。我想至少让我的应用程序在微风依赖的情况下工作。我的索引页面正在调用breeze的所有正确脚本，并且顺序正确。这是我对主控制器的设置：

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

这是我的index.html页面（我在教程中使用的简单示例）：

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

我刚刚添加了一个plunker，它非常接近Breeze/Angular的最小设置。

它是这样开始的：

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

将plunker脚本.js与您的代码进行比较，您会发现一些差异。请注意，我将微风/角度配置推迟到dataservice中首次需要它。我现在更喜欢这种方法，而不是把它扔到app.run中。

我不知道你为什么写：

var breeze = function (breeze) { };

我猜您正试图在app.run(...)中放入一些东西，以触发在"breeze.angular"模块中执行"breeze"服务。也许JavaScript对此感到困惑（看起来像递归）；这让我很困惑。

您没有提到是否使用Visual Studio，但如果使用，这可能会有所帮助：

对我来说，从热毛巾角和热毛巾角微风Nuget包开始就很成功。它们无缝集成了EntityFramework、Breeze、Angular和Bootstrap。

此外，请查看Breeze To Do的样品。它们与您选择的体系结构配合得非常好。

相关文章：