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>
<!-- AngularJS 控制器和指令将在此元素及其子元素中生效 -->
</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,以保持良好的架构实践。
相关推荐










maXZero
- 粉丝: 32
最新资源
- 山东大学单片机实验教程之LCD 1602显示实验详解
- Dockerized Debian/Ubuntu deb包构建器:一站式解决方案
- 数字五笔:电脑上的手机笔划输入法
- 轻松实现自定义标签输入,Bootstrap-tagsinput组件教程
- Android页面跳转与数据传递的入门示例
- 又拍图片下载器:批量下载相册图片的利器
- 探索《Learning Python》第五版英文原版精髓
- Spring Cloud应用演示:掌握云计算开发
- 如何撰写奖学金申请书的完整指南
- 全面学成管理系统源码:涵盖多技术领域
- LiipContainerWrapperBundle废弃指南:细粒度控制DI注入
- CHM电子书反编译工具:一键还原内容
- 理解PopupWindows回调接口的实现案例
- Osprey网络可视化系统:开源软件平台介绍
- React组件:在谷歌地图上渲染自定义UI
- LiipUrlAutoConverterBundle不再维护:自动转换URL和邮件链接