Question

我今天开始研究Angularjs并遇到一个我无法解决的问题。

我添加了第一个控制器，但它无法正常工作。添加控制器会破坏我的整个应用程序。

<html ng-app>
<head>
</head>
<body>
    <div ng-controller="test"></div>

    <input type="text" ng-model="name" /> {{ name }}

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

    <script>

    function test($scope) {

        $scope.people='';

    }

    </script>

</body>
</html>

如果我拿出来：

<div ng-controller="test"></div>

一切正常。我已经添加了那行nothings了。我知道我的控制器没有做任何事情，我不使用示波器。这是因为我打破了一个更大的例子。

但是，控制器存在并将其添加到我的视图中不会导致问题。

可能这只是一个小错误，但我找不到它！

我正在遵循本指南：https://youtu.be/i9MHigUZKEM?t=30m6s。

感谢您的帮助！

Answer 1

您需要创建一个模块才能工作！ AngularJS在模块上运行。

angular.module('myApp', []);

<html ng-app="myApp">...</html>

Answer 2

您可能会关注稍微过时的指南。全局控制器声明（function test($scope) {）从未真正用于Angular，但它们在快速入门指南中很受欢迎，并且经常在生产应用程序中使用。在Angular 1.3中，为了消除这种做法，进行了一次重大改变。

从Angular 1.3开始，必须使用角度模块完全声明您的控制器。

<html ng-app="myApp">

JS中的

：

var app = angular.module('myApp', []);

app.controller("test", ["$scope", function($scope){
....
}]);

Answer 3

Angular使用你的ng-app声明引导自己，但你还没有创建你的＆＃34; test＆＃34;控制器（您正在尝试使用function test();，但这不是正确的语法）。

您需要做的第一件事是创建一个模块：

var app = angular.module('MyApp', [])

在HTML中设置ng-app='MyApp'。现在你有了一个在DOM中注册的模块，它可以包含你的控制器。

要创建控制器，请在模块声明下面写下：

app.controller('test', ['$scope', function($scope){
    $scope.people = '';
}]);

这使用内联声明来命名控制器，定义其依赖项（$ scope）并将这些依赖项注入控制器的主函数。

理想情况下，您将这些全部拆分为不同的文件（模块声明和配置的常见起点为app.js，控制器的controller.js等。）

使用AngluarJS ng-controller的第一步

3 个答案: