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>  </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，以保持良好的架构实践。

</head>

angular.module('MyApp', []).controller('MyController', function ($scope,

$timeout) {

var updateClock = function () {

$scope.clock = new Date();

$timeout(function () {

updateClock();

}, 1000);

}

updateClock();

})

</script>

<ul>

当前时间：{{clock}}

</ul>

</body>

</html>

例如在这段代码里，就是指将控制器绑定在 MyApp 这个模块下。

效果是先将 clock 这个变量用 new Date()赋值，然后启用定时模块，每秒更新一

次时间。

（3）setInterval 代码里，$scope 代码的值将被更新，但不会反应在页面上。只

要向上面那样使用$timeout 才可以更新

按照我的理解，之所以会这样，是因为脏值检测的原因，单纯靠 setInterval 是不

会触发脏值检测的，那个监测是应该是 DOM

（三）js 和 html 分离

（1）分离前代码：

<!DOCTYPE html>

<head>

剩余17页未读，继续阅读

maXZero

粉丝: 32

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

AngularJs学习笔记：组件与工作原理详解

AngularJS学习笔记：CHM文件使用指南

邹业盛分享：AngularJS学习笔记与实战体验

AngularJS学习笔记

AngularJs学习笔记

angularjs学习笔记

AngularJS 学习笔记

angularjs学习笔记本

JS AngularJS 学习笔记

AngularJS 学习笔记.pdf

最新资源