AngularJS - ng-app 如果不为空则不工作答案

【问题标题】：AngularJS - ng-app not working if not empltyAngularJS - ng-app 如果不为空则不工作
【发布时间】：2016-03-25 08:36:39
【问题描述】：

这个问题可能是Angular.JS的一个非常非常基础的问题。可能之前StackOverFlow 几乎有人问过这个问题，但是我找不到问题，所以我不得不问这个问题。

我是 Angular.JS 的新手，我正在尝试使用 Angular.JS 创建一个基本表单，它将根据给定的输入验证电子邮件地址。

对我有用的是-

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

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

但是我试图给我的 Angular 应用程序起一个这样的名称-ng-app="my_try_app" 所以我的代码是这样的-

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


<form ng-app="my_try_app" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

你发现它不起作用。

所以，我的问题是-

给我的 Angular 应用命名的方法是什么？
为什么在我的情况下它不起作用？

提前感谢您的帮助。

【问题讨论】：

您必须为您的视图定义应用程序。
你能不能给我一个详细的答案，请@hadiJZ
看看这个答案，它解释了关于模块和控制器定义的一些事情stackoverflow.com/a/26797874/930170

标签： javascript angularjs

【解决方案1】：

您必须为您的视图定义应用程序。像这样。

angular.module("my_try_app",[]);

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


<form ng-app="my_try_app" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

【讨论】：

那么，如果我定义一个应用名称，它应该在JS文件中定义，对吧？
最好在js文件中定义。但你可以在 html 的 script 标签中定义它。
我不是在问，有没有办法在 HTML 中做到这一点，就像这段代码中的其他元素一样？

【解决方案2】：

请查看下面的 angulaJS 文档： https://docs.angularjs.org/api/ng/directive/ngApp 基本上，“ng-app”在引导阶段使用，它帮助 angular 初始化你的模块。（确定应该受到角度影响的 HTML 代码的边界。）

例如：姓名： ng-app 指令告诉 AngularJS <div> 元素是 AngularJS 应用程序的“所有者”。在提到的示例代码中，angularJS 被配置为在默认模式下工作。因此 ng-app 是可选的，即 null/empty。

但是，如果您希望使用 ng-app="my_try_app" 引导您的应用程序/HTMl，则可以按照以下任何方式进行操作

在脚本标签或单独的 Js 文件中定义一个角度控制器并使用 <script src> 导入，

例如。在您的 HTML 文件中添加以下内容
```
<script>
var app = angular.module('my_try_app', []);
app.controller('myTryCtrl', function($scope) {
$scope.text= "a@a.t.com";    
});
</script>
```
对于较大的应用程序，即具有多个视图，引导角度使用.. angular.bootstrap(document,["my_try_app"]);

希望这会有所帮助。

【讨论】：