设置裸机 angular 1 个应用

Question

我正在尝试设置一个小型应用程序来学习如何设置一个 angular 1 项目（是的，1。我们在办公室使用 1，我想学习它）。

它部分有效，但是当我添加另一个控制器时，它就崩溃了。我的项目如下所示：

app.js:

angular.module('app', [  
    'app.controllers',
    'ds.clock'
]);

clockController.js:

angular.module('app.controllers', []).controller('clockController', 
    function($scope) {
        "use strict";

        $scope.Name = "Angular";
});

index.html（缩写）：

 <body ng-app="app"> 


    <div ng-controller="clockController" style="float:right;width:20%x;margin:auto">

{{Name}}

    <div>
        <div><ds-widget-clock show-analog></ds-widget-clock></div>
    </div>

显示了我的时钟以及示波器上的 'Name' 属性。

但是，现在我尝试添加一个额外的控制器：

tickerController.js

angular.module('app.controllers').controller('tickerController', 
    function($scope) {
        'use strict';

        $scope.Name = 'ticker'; });

我还在<head>中添加了一个link:

<script src="js/app.js"></script>
<script src="js/clockController.js"></script>
<script src="js/tickerController.js"></script>

当然还有 index.html

中的额外 div

  <div ng-controller="tickerController" >

        {{ $scope.Name }}

    </div>

    <div ng-controller="clockController"........

但现在我遇到了以下错误：

angular.js:14700 错误：[$controller:ctrlreg] 名称为 'clockController' 的控制器未注册。

我的页面大部分都是空白的。

现在如何进行？

Answer 1

看来您的尝试有误。再创建一个模块，向模块注册控制器并将其作为模块的一部分包含在内。那应该有效。其他解决方案：

angular.module('app.controllers', [app.clockController])
.controller('clockController', function($scope) {
    "use strict";

    $scope.Name = "Angular";
});

这也应该有效。

设置裸机 angular 1 个应用

Setting up a bare bone angular 1 app

javascript

angularjs

angular1.6