Question

我已经看过了SO而没有任何帮助。

这是我的app.js

var app = angular.module("qMainModule", ["ngRoute"])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider
        .when("/", {
            templateUrl: 'templates/anonHome/anonHome.html',
            controller: 'templates/anonHome/anonHomeController'
        })
        .when("/about", {
            templateUrl: 'templates/anonHome/anonAbout.html',
            controller: 'templates/anonHome/anonAboutController'
        })
        .when("/services", {
            templateUrl: 'templates/anonHome/anonServices.html',
            controller: '/templates/anonHome/anonServicesController'
        })
        .when("/contact", {
            templateUrl: 'templates/anonHome/anonContact.html',
            controller: '/templates/anonHome/anonContactController'
        })
        .when("/register", {
            templateUrl: 'templates/anonHome/anonRegister.html',
            controller: '/templates/anonHome/anonRegisterController'
        })
        .when("/login", {
            templateUrl: 'templates/anonHome/anonLogin.html',
            controller: '/templates/anonHome/anonLoginController'
        })

        $locationProvider.html5Mode(true);
    })



app.controller("qMainController", function ($scope) {
    $scope.Title = " Welcome to Qiao";
    $scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
    $scope.copyrightMessage = "Qiao ";
    $scope.copyrightYear = new Date();
});

路由按预期工作，并且正在显示部分模板，但部分模板控制器未被识别为函数。

布局模板看起来像这样

<!DOCTYPE html>
<html ng-app="qMainModule">
<head ng-controller="qMainController">
    <base href="/" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Qiao :: {{Title}}</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="../css/modern-business.css" rel="stylesheet" />
   <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <script src="/scripts/angular.js"></script>
    <script src="../scripts/angular-route.js"></script>
    <script src="/app/app.js"></script>
    <script src="templates/anonHome/anonHomeController.js"></script>



  <!--  <link href="../styles/qiao.css" rel="stylesheet" /> -->


</head>
<body ng-controller="qMainController">
    <div ng-include="qNavigationTemplatePath">

    </div>

     <!-- Page Content -->
    <div class="container">
        <ng-view></ng-view>
    </div>

    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12" ng-controller="qMainController">
                Copyright &copy; {{copyrightMessage}} {{copyrightYear | date:'yyyy'}}
            </div>
        </div>
    </footer>

    <div >
        <!-- jQuery -->
        <script src="js/jquery.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Script to Activate the Carousel -->
        <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
        </script>

    </div>
</body>
</html>

部分模板如下所示：

<script src="anonHomeController.js"></script>

<div ng-controller="anonHomeController">

    <h1>{{Title}}</h1>

</div>

及其控制器就是这个

function anonHomeController($scope) {
    $scope.Title = " Welcome to Qiao";
    $scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
    $scope.copyrightMessage = "Qiao ";
    $scope.copyrightYear = new Date();
};

问题：如何让Angular识别并使用部分模板的控制器？

Answer 1

您已为每个视图创建了一个常规JS函数的控制器，这是不正确的。它应该像

app.controller("anonHomeController", function ($scope) {
    $scope.Title = " Welcome to Qiao";
    // rest of the controller code 
});

并且文件应该是anonHomeController.js在您在配置中定义的路径。您也不需要在视图的标题中包含scipt标记。检查一些示例here

Answer 2

您无需在app.js中添加完整路径来定义控制器。

如果您在同一个文件中定义了控制器，那么这应该可以完成这项任务：

$routeProvider
        .when("/", {
            templateUrl: 'templates/anonHome/anonHome.html',
            controller: 'xyzController'
        });

app.controller("xyzController", function ($scope) {
 // controller function here
});

如果您希望控制器位于外部文件中，则必须执行以下操作：

1. Define the controllers module: 

    angular.module('app.controllers', [])
    .controller("homeController", function(){....})

将此文件命名为controllers.js

2. Now your main app.js should include this:

    angular.module('app', [
            'app.controllers',
        ])

在您的主html文件中包含controllers.js

Answer 3

在定义控制器时，不要使用任何目录路径。

来自docs - https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

controller - {（string | Function）=} - 如果作为字符串传递，控制器fn应该与新创建的范围相关联，或注册控制器的名称。

请注意，注册的控制器永远不会有整个路径，它是函数定义本身或函数的名称（字符串）。您可能需要模块名称，如果您已经像这样导出，但它与目录路径不同。

您只需在index.html中使用<script>标记，其中包含您的所有功能。现在，如果你的函数只是简单的javascript，并且你不打算使用angular.module（＆＃39; app＆＃39;）控制器那里，请在app.js中使用它，Just angular.module（＆＃ 39; app＆＃39;）。控制器（＆＃39; anonHomeController＆＃39;，anonHomeController）;请注意，您的定义仍然可以保留在Javascript文件/some/path/totemplate/anonHomeController.js中。我建议你尝试一下，看看它是否有效。

app.js

    app.config(function ($routeProvider, $locationProvider) {
      $routeProvider
        .when("/", {
        templateUrl: 'templates/main/main.html',
        controller: 'MainCtrl'
      })

的index.html

<script src="controllers.js"></script>

controllers.js

function MainCtrl ($scope) {
  $scope.name = 'World';

}

A working plnkr here

AngularJs Controller在外部文件中并使用路由

3 个答案: