AngularJS应用入门:ng-app与ng-model深度解析
需积分: 0 3 浏览量
更新于2024-06-30
收藏 42KB DOCX 举报
"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,以保持良好的架构实践。
123 浏览量
211 浏览量
150 浏览量
2015-09-22 上传
123 浏览量
161 浏览量
116 浏览量
116 浏览量
248 浏览量

maXZero
- 粉丝: 32
最新资源
- Node.js基础代码示例解析
- MVVM Light工具包:跨平台MVVM应用开发加速器
- Halcon实验例程集锦:C语言与VB的实践指南
- 维美短信API:团购网站短信接口直连解决方案
- RTP转MP4存储技术解析及应用
- MySQLFront客户端压缩包的内容分析
- LSTM用于PTB数据库中ECG信号的心电图分类
- 飞凌-MX6UL开发板QT4.85看门狗测试详解
- RepRaptor:基于Qt的RepRap gcode发送控制器
- Uber开源高性能地理数据分析工具kepler.gl介绍
- 蓝色主题的简洁企业网站管理系统模板
- 深度解析自定义Launcher源码与UI设计
- 深入研究操作系统中的磁盘调度算法
- Vim插件clever-f.vim:深度优化f,F,t,T按键功能
- 弃用警告:Meddle.jl中间件堆栈使用风险提示
- 毕业设计网上书店系统完整代码与论文