Question

第二天我开始学习angularJS。我知道了

在应用程序中，ng-app对于应用程序的所有或其定义都是相同的。
ng-app可以有超过1 ng的控制器。
根据控制器名称，我们可以将控件移动到其实现。
应用程序可能有多个div标签，每个div可能有不同的控制器。

从上面的描述中，我在下面写了一些示例代码来测试：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body  ng-app="expressions" >

<div ng-controller="NGExpressionController">

<h1>This is AngularJS Expression example.......</h1>

<p>On String expression...</p>
Name: <input ng-model="name" type="text"></input></br>
Your name is {{name}}

</div>


<div ng-controller="NGExpressionControllerTwo">

<h1>This is AngularJS Expression example.......</h1>

<p>On String expression...</p>
Name: <input ng-model="adddress" type="text"></input></br>
Your name is {{address}}

</div>

<script>

    angular.module('expressions', []).controller('NGExpressionController',function($scope){
        $scope.name="Test Name";
    });


</script>

<script>

    angular.module('expressions', []).controller('NGExpressionControllerTwo',function($scope){
    $scope.address="Kolkata";   
    });
</script>

</body>
</html>

但是上面的代码显示如下错误：

https://docs.angularjs.org/error/ng/areq?p0=NGExpressionController&p1=not%20a%20function,%20got%20undefined

我哪里错了？我的理解是错误的还是代码实现是错误的......任何形式的帮助都会有很大的帮助。

Answer 1

你实施了两次（2 <script>个标签），这意味着他不再认识第一个。

工作Plnkr：https://plnkr.co/edit/eeFddCQSBg5Lm7SOyZH0?p=preview

<script>

angular.module('expressions', []).controller('NGExpressionController',function($scope){
    $scope.name="Test Name";
}).controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";   
});

使用<script>加载controllers从来都不是一个好习惯，但由于它只是你第二天的学习Angular，我会把它留下来:)无论如何，你可以随时使用https://www.codeschool.com/你可以边做边学。

Answer 2

首先你的代码有错误，因为错误地定义了模块，

    <script>
     angular.module('expressions',[])
      .controller('NGExpressionController',function($scope){
          $scope.name="Test Name";
      })
      .controller('NGExpressionControllerTwo',function($scope){
          $scope.address="Kolkata";   
      });
   </script>

创建应用程序时，您必须定义一次模块，并在定义模块后通过正确调用模块对象来使用该模块，用于创建模块使用

   angular.module('yourModuleName',[])

再次使用该模块

 angular.module('yourModuleName')

不需要[]，Square barckets，它用于定义该模块的依赖关系，并且在放置它时会导致重新初始化模块，并且您将丢失先前定义的模块属性，

1 ：ng-app指令会初始化一个角度应用，它将可用于整个应用。无论如何，我们可以在一个应用程序link

中手动创建（引导）多个角度应用程序

2 ：一个ng-app可以拥有多个控制器，我们可以创建我们的控制器，并根据需要将它们与任何dom元素绑定。

   <div ng-controller="NGExpressionController">
   {{name}}
     <div ng-controller="NGExpressionControllerTwo">
     {{address}}
     </div>
   </div>

3 ：基于定义的控制器，我们可以为相应的dom元素操纵逻辑或函数

4 ：显然是的，您可以嵌套控制器以使用$ scope继承。，一定要明智地使用它们...... 快乐的编码...

单页中不同<div>的多个ng控制器

2 个答案: