AngularJS应用入门：ng-app与ng-model深度解析

下载需积分: 0 | DOCX格式 | 42KB | 更新于2024-06-30 | 167 浏览量 | 举报

"AngularJS学习笔记1" AngularJS是一种广泛使用的前端JavaScript框架，用于构建动态Web应用程序。这篇笔记主要讨论了AngularJS中的ng-app指令以及与控制器相关的变更。 ng-app是AngularJS应用的启动指令，它定义了HTML文档中AngularJS作用域的起点。在AngularJS 1.3及更高版本中，为了减少根元素上的冗余内容，不再推荐直接在根节点（如html标签）上注册controller。这使得应用更加模块化和可维护。 1. ng-app的使用方法： - 可以在`<html>`标签、`<head>`标签或`<body>`标签中声明ng-app，来指定整个文档或特定部分作为AngularJS应用的范围。例如： ```html <html ng-app> ``` 或者 ```html <body ng-app> ``` - ng-app也可以应用于任何其他元素，但必须确保所有需要AngularJS处理的元素都在ng-app所指定的范围内。例如： ```html <div ng-app>  </div> ``` 2. ng-app的限制： - ng-app不能只应用于部分元素，例如单独的`<h1>`或`<input>`标签。如果一个元素和另一个元素需要共享数据，它们必须处于同一个带有ng-app的DOM元素之下。 - 下面的示例是无效的，因为两个ng-app创建了两个独立的作用域： ```html <div ng-app> <input ng-model="name" type="text" placeholder="Your name"> </div> <div ng-app> <h1>Hello {{name}}</h1> </div> ``` 3. ng-app的变种： - 当多个元素共享同一个ng-model时，它们之间的数据会自动同步。例如，两个输入框和一个显示值的`<h1>`标签： ```html <input ng-model="name" type="text" placeholder="Your name"> <h1>Hello {{name}}</h1> <input ng-model="name" type="text" placeholder="Your name"> ``` 在这个例子中，无论更改哪个输入框，`<h1>`和另一个输入框的值都会同步更新。 - 如果一个输入框的值直接绑定到另一个输入框的表达式，如`{{name}}`，它们之间的联动会有所不同： ```html <input ng-model="name" type="text" placeholder="Your name"> <input value="{{name}}" type="text" placeholder="Your name"> ``` 在这种情况下，未主动修改的输入框会镜像第一个输入框的值，但如果直接在第二个输入框中更改值，第一个输入框的双向绑定将不再影响第二个输入框。总结来说，ng-app是AngularJS应用的入口点，定义了应用的边界。正确地使用ng-app和ng-model可以帮助实现数据绑定和视图同步，但需要注意作用域的范围和数据的关联方式，以确保应用行为符合预期。在新版本的AngularJS中，应避免在根元素上直接注册controller，以保持良好的架构实践。