Angularjs 如何在Angular 1.6中加载控制器（参数'；SimpleControl'；不是函数，未定义）_Angularjs_Model View Controller_Single Page Application

Angularjs 如何在Angular 1.6中加载控制器（参数'；SimpleControl'；不是函数，未定义）

angularjs model-view-controller

Angularjs 如何在Angular 1.6中加载控制器（参数'；SimpleControl'；不是函数，未定义）,angularjs,model-view-controller,single-page-application,Angularjs,Model View Controller,Single Page Application,我正在尝试学习AngularJS，我有View1，它使用simpleController，但是AngularJS（1.6）抛出了一个错误，我找不到正确的语法使它工作我的存储库是：错误：ng:areq。糟糕的论点。参数“simpleController”不是函数，未定义 View1包含… <div ng-controller="simpleController as ctrl"> <h2>View One</h2> <p>{{

我正在尝试学习AngularJS，我有

View1

，它使用

simpleController

，但是AngularJS（1.6）抛出了一个错误，我找不到正确的语法使它工作

我的存储库是：

错误：ng:areq。糟糕的论点。参数“simpleController”不是函数，未定义

View1
包含…

<div ng-controller="simpleController as ctrl">
    <h2>View One</h2>

    <p>{{ ctrl.testValue }}</p>
</div>

"use strict";

(function () {
    angular.module('demoApp').controller('simpleController', []);

    function simpleController() {
        var self = this;

        self.testValue = "Test Value";

        self.updateValue = function () {
            self.testValue = "Test Value Updated";
        };

        return self;
    };
});

"use strict";

var app = angular.module('demoApp', ["ngRoute"]);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/view1',
        {
            controller: 'simpleController',
            templateUrl: '../views/view1.html'
        })
        .otherwise({ redirectTo: '/view1' });
});

<!DOCTYPE html>
<html>

<head>
    <title>Sample Demo Application</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body ng-app="demoApp" class="container">
    <h1>Welcome to my Sample Application</h1>

    <a href="#!view1">View 1</a>

    <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="../app/initialise/routes.js"></script>
    <script src="../app/controllers/simpleController.js"></script>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

demoApp
由我的routes.js文件创建，该文件首先加载。

<div ng-controller="simpleController as ctrl">
    <h2>View One</h2>

    <p>{{ ctrl.testValue }}</p>
</div>

"use strict";

(function () {
    angular.module('demoApp').controller('simpleController', []);

    function simpleController() {
        var self = this;

        self.testValue = "Test Value";

        self.updateValue = function () {
            self.testValue = "Test Value Updated";
        };

        return self;
    };
});

"use strict";

var app = angular.module('demoApp', ["ngRoute"]);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/view1',
        {
            controller: 'simpleController',
            templateUrl: '../views/view1.html'
        })
        .otherwise({ redirectTo: '/view1' });
});

<!DOCTYPE html>
<html>

<head>
    <title>Sample Demo Application</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body ng-app="demoApp" class="container">
    <h1>Welcome to my Sample Application</h1>

    <a href="#!view1">View 1</a>

    <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="../app/initialise/routes.js"></script>
    <script src="../app/controllers/simpleController.js"></script>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

我的主页是我的“spa”主页，其中包含…

<div ng-controller="simpleController as ctrl">
    <h2>View One</h2>

    <p>{{ ctrl.testValue }}</p>
</div>

"use strict";

(function () {
    angular.module('demoApp').controller('simpleController', []);

    function simpleController() {
        var self = this;

        self.testValue = "Test Value";

        self.updateValue = function () {
            self.testValue = "Test Value Updated";
        };

        return self;
    };
});

"use strict";

var app = angular.module('demoApp', ["ngRoute"]);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/view1',
        {
            controller: 'simpleController',
            templateUrl: '../views/view1.html'
        })
        .otherwise({ redirectTo: '/view1' });
});

<!DOCTYPE html>
<html>

<head>
    <title>Sample Demo Application</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body ng-app="demoApp" class="container">
    <h1>Welcome to my Sample Application</h1>

    <a href="#!view1">View 1</a>

    <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <script src="../app/initialise/routes.js"></script>
    <script src="../app/controllers/simpleController.js"></script>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>


示例演示应用程序
欢迎使用我的示例应用程序

检查。控制器定义的第二个参数应该是函数而不是空数组

"use strict";

(function () {
    angular.module('demoApp').controller('simpleController', simpleController);

    function simpleController() {
        var self = this;

        self.testValue = "Test Value";

        self.updateValue = function () {
            self.testValue = "Test Value Updated";
        };

        return self;
    };
});

“严格使用”；
var app=angular.module（'demoApp'，[“ngRoute”]）；
app.config（函数（$routeProvider）{
$routeProvider
.when（“/view1”，
{
控制器：“simpleController”，
controllerAs:'ctrl'，
templateUrl:“/view1.html”
})
。否则（{重定向到：'/view1'}）；
});
（功能（）{
函数simpleController（）{
var self=这个；
self.testValue=“测试值”；
self.updateValue=函数（）{
self.testValue=“测试值已更新”；
};
回归自我；
};
角度。模块（'demoApp'）。控制器（'simpleController'，simpleController）；
})();

欢迎使用我的示例应用程序
视图一
{{ctrl.testValue}}
检查。控制器定义的第二个参数应该是函数而不是空数组
"use strict";

(function () {
    angular.module('demoApp').controller('simpleController', simpleController);

    function simpleController() {
        var self = this;

        self.testValue = "Test Value";

        self.updateValue = function () {
            self.testValue = "Test Value Updated";
        };

        return self;
    };
});


“严格使用”；
var app=angular.module（'demoApp'，[“ngRoute”]）；
app.config（函数（$routeProvider）{
$routeProvider
.when（“/view1”，
{
控制器：“simpleController”，
controllerAs:'ctrl'，
templateUrl:“/view1.html”
})
。否则（{重定向到：'/view1'}）；
});
（功能（）{
函数simpleController（）{
var self=这个；
self.testValue=“测试值”；
self.updateValue=函数（）{
self.testValue=“测试值已更新”；
};
回归自我；
};
角度。模块（'demoApp'）。控制器（'simpleController'，simpleController）；
})();

欢迎使用我的示例应用程序
视图一
{{ctrl.testValue}}
谢谢Shaun，这似乎解决了该错误，但我现在收到错误“error:$controller:ctrlreg。未注册同名控制器。未注册名为“simpleController”的控制器。”这是更改的结果吗，或者我做了一些不正确的事情？嗯，不确定这个错误是不是有点不熟悉。将尝试将您的代码粘贴到此处运行的示例中。@TomMcClean得到了它，所以有几件事，ng控制器不需要，只是在路由定义中需要Controllera，另一件事是IIFE没有被调用，所以在最后添加（）并修复了它。另外，非常感谢您为问题提供了完整的背景，而不是使其变得巨大，非常感谢：）感谢您花时间帮助这个Shaun，这是一个很大的帮助，我现在可以根据您的建议让它运行了！：）谢谢Shaun，这似乎已经解决了该错误，但我现在得到了错误“error:$controller:ctrlreg。未注册同名控制器。未注册名为“simpleController”的控制器。”这是更改的结果吗，或者我做了一些不正确的事情？嗯，不确定这个错误是不是有点不熟悉。将尝试将您的代码粘贴到此处运行的示例中。@TomMcClean得到了它，所以有几件事，ng控制器不需要，只是在路由定义中需要Controllera，另一件事是IIFE没有被调用，所以在最后添加（）并修复了它。另外，非常感谢您为问题提供了完整的背景，而不是使其变得巨大，非常感谢：）感谢您花时间帮助这个Shaun，这是一个很大的帮助，我现在可以根据您的建议让它运行了！：）