在这个简单的AngularJs页面中,控制器在哪里?

Where is the controller in this simple AngularJs page?

本文关键字:控制器 在哪里 简单 AngularJs      更新时间:2023-09-26

我被告知,每个带有ngApp指令的AngularJS页面都有一个控制器,提供$scope。在W3Schools网站给出的最早、最简单的例子中,代码中没有ngController标签:

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
    <p>Name : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>
</body>
</html>

这个页面显然可以工作——在W3Schools链接上试试——并且有作用域($scope.name)。是否总是存在隐式控制器?

谢谢,杰罗姆。

不,这里没有隐式控制器,在幕后是$rootScope

当你没有在angular ng-app中指定module时,它将在没有angular模块的页面上初始化angular。

但是由于你没有在这里提供ng-controller, Angular将创建$scope,它将使用$rootScope, &将在$rootScope内创建变量

因为每当你在页面上写ng-controller指令时。Angular在当前运行的作用域上使用$new(false)方法,从父scope创建一个新的作用域。在这种情况下,如果我们在这里引入ng-controller,那么它可能是$rootScope.$new()

编辑

您可以通过使用angular.injector

访问$rootScope来验证代码已添加到$rootScope

function checkScopeValues() {
  var app = angular.element(document.getElementById('test')).injector();
  var rootScope = app.get('$rootScope');
  alert("value from rootScope " + rootScope.name);
}
这里的

Plunkr

此页面上没有控制器。但是ng-controller并不是唯一创建$作用域的指令。ng-app也创建了$scope,这是name

上的$scope

控制器就是一些与作用域交互的代码。

这只是UI中一个简单的双向绑定,它实际上创建了控制器本身,并将$作用域绑定到你的指令中:但在现实世界中,你必须创建一个模块,然后将控制器注入其中。这只是让你对AngularJS有所了解,我在这里找到了jenkov的一个非常好的教程,它将指导你从头开始创建AngularJS应用程序链接到教程也可以在google上搜索一些AngularJs JsFiddle的例子,你可以找到很多帮助你入门的例子