我的Angular JS应用程序中出现多个Controller抛出错误

I am a beginner in Angular JS. I know that below declaration is required in the js file to make angular JS Controller work.

我是Angular JS的初学者。我知道在js文件中需要以下声明来使角度JS控制器工作。

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

app.controller('ctrlOne', function(){
});

But recently got some code from internet where the declaration is not made for the app and controllers like above. But there are only controller function defined, still working fine but not in my case.

但最近从互联网获得了一些代码,其中没有为上面的应用程序和控制器做声明。但是只定义了控制器功能,仍然工作正常但不是我的情况。

function ctrlOne($scope){

};

function ctrlTwo($scope){

};

Please find my code below and output. Please correct me.

请在下面找到我的代码并输出。请指正。

<div ng-app>
    <input type="text" ng-model="data.message" />
    <h1>{{ data.message }}</h1>

    <div ng-controller="ctrlOne">
        <input type="text" ng-model="data.message" />
        <h1>{{ data.message }}</h1>
    </div>

    <div ng-controller="ctrlTwo">
        <input type="text" ng-model="data.message" />
        <h1>{{ data.message }}</h1>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="App.js"></script>

App.js:

function ctrlOne($scope){

};

function ctrlTwo($scope){

};

Please can any one help me to figure out where I went wrong. Your advice's are welcomed.

请任何人帮我弄清楚我哪里出错了。欢迎您的建议。

Please find JSFIDDLE Link : Have done above coding here

请找到JSFIDDLE链接:在这里做了以上编码

2 个解决方案

#1

Change your html to include myApp module name like so:

更改您的html以包含myApp模块名称,如下所示:

<div ng-app="myApp">
...
  <div ng-controller="ctrlOne">
      <input type="text" ng-model="data.message" />
      <h1>{{ data.message }}</h1>
  </div>
...
</div>

Angular needs to know what is the name of your root module. ng-app directive specifies just that:

Angular需要知道根模块的名称。 ng-app指令只指定:

Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.

使用此伪指令自动引导AngularJS应用程序。 ngApp指令指定应用程序的根元素,通常放在页面的根元素附近 - 例如在或标签上。

#2

There are two ways of initializing an angular app. One is to define ng-app in html or you can manually bootstrap angular app. You need to figure out where is the app getting initialized. Because in your html you are using ng-app=''. you should provide it with app name.

有两种初始化角度应用程序的方法。一种是在html中定义ng-app,或者你可以手动引导角度应用程序。您需要确定应用程序初始化的位置。因为在你的html中你使用的是ng-app =''。你应该提供应用名称。

#1