在单页应用程序angularJs中选择菜单时调用控制器

Call a controller when a menu is selected in single page application - angularJs

本文关键字：菜单 调用 控制器 选择 单页 应用程序 angularJs      更新时间：2023-09-26

我用angular js创建了一个简单的单页应用程序。我有一个索引页面，其中定义了路由并调用了ng视图。

Index.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="SPA.Views.index" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
    <head runat="server">
    <title>SPA</title>
    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
</head>
<body data-ng-controller="Index as ind">
    <form id="form1" runat="server">
        <!-- HEADER AND NAVBAR -->
        <header>
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/">Angular Routing Example</a>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="" data-ng-click="openDashboard()"><i class="fa fa-home"></i> Dashboard</a></li>
                        <li><a href="" data-ng-click="openAbout()"><i class="fa fa-shield"></i> About</a></li>
                        <li><a href="" data-ng-click="openContact()"><i class="fa fa-comment"></i> Contact</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">
            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>
        </div>
    </form>
    <!-- load angular and angular route via CDN -->
    <%--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>--%>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="../Controllers/app.js"></script>
</body>
</html>

App.js:

var app = angular.module('app', ['ngRoute']);
// configure our routes
app.constant('routes', [
    {
        url: '/',
        config: {
            templateUrl: 'dashboard.aspx',
            menuItem: 'MainPage'
        }
    },
    {
        url: '/about',
        config: {
            templateUrl: 'about.aspx',
            menuItem: 'aboutPage'
        }
    },
    {
        url: '/contact',
        config: {
            templateUrl: 'contact.aspx',
            menuItem: 'contactPage'
        }
    }
]);
app.config(['$routeProvider', 'routes', '$controllerProvider', function ($routeProvider, routes, $controllerProvider) {
    //$controllerProvider.allowGlobals();
    app._controller = app.controller;
    // Provider-based controller.
    app.controller = function (name, constructor) {
        $controllerProvider.register(name, constructor);
        return (this);
    };
    routes.forEach(function (route) {
        $routeProvider.when(route.url, route.config);
    });
}]);
var controllerId = 'Index';
app.controller(controllerId, function ($scope, $location) {
    var ind = this;
    $scope.openDashboard = function () {
        $location.path('/');
    }
    $scope.openOpportunity = function () {
        $location.path('/opportunity');
    }
    $scope.openContact = function () {
        $location.path('/contact');
    }
})

我为每个菜单创建了三个单独的aspx页面，并创建了单独的.js文件（其中为每个页面定义了控制器）。

当页面加载时，它默认调用仪表板页面，并将错误作为抛出

错误：[ng:areq]http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=dashboardController&p1=不是%20a%20函数%2C%20得到%20未定义的

这里，dashboardController是在Dashboard页面中定义的控制器的名称。

Dashboard.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dashboard.aspx.cs" Inherits="SPA.Views.dashboard" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="../Controllers/dashboard.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div data-ng-controller="dashboardController">
            {{message}}
        </div>
    </form>
</body>
</html>

关联的控制器文件如下（dashboard.js）：

(function () {
    var app = angular.module('app');
    var controllerId = 'DashboardController';
    app.controller(controllerId, function ($scope) {
        $scope.message = "Hello!!";
    });
})();

其他页面也有相同的代码，并且在选择菜单时也会出现上述错误。

当我尝试调用index.aspx中的"dashboard.js"文件时，它正确地显示了页面。

但我不想一开始就调用所有的js文件，因为将来我会在每个页面中使用大量的数据来显示，因此这可能会减慢应用程序的速度。

请告诉我，当调用特定页面时，我应该如何通过调用控制器来获得输出。

提前感谢。。。

错误非常明显-声明未定义dashboardController。您正试图以的身份呼叫控制器DashboardController

<div data-ng-controller="dashboardController"> <!-- lowercase d -->



var controllerId = 'DashboardController'; // -- capital D

忘记var并将控制器名称小写。此外，移除var app = angular.module('app');。您正在覆盖先前的模块定义，App.js中已有该定义。dashboard.js的全部内容应为以下

app.controller('dashboardController', function ($scope) {
    $scope.message = 'Hello!!';
});
相关文章：