AngularJS - 如果不是空的，ng-app 将无法工作

Question

这个问题可能是一个非常非常基础的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>

但是我试图给我的ng-app="my_try_app"应用程序命名是这样的 - 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>

你看到它不起作用。

所以，我的问题是——

1. 给我的 angular 应用命名的方法是什么？

2. 为什么在我的情况下它不起作用？

提前感谢您的帮助。

Answer 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>

Answer 2

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

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

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

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

   例如。 在您的 HTML 文件中添加以下内容

   <script> var app = angular.module('my_try_app', []); app.controller('myTryCtrl', function($scope) { $scope.text= "a@atcom"; }); </script>

2. 对于较大的应用程序，即具有多个视图，使用 .. angular.bootstrap(document,["my_try_app"]);

希望这可以帮助。