每天一个小知识点13（Angularjs总结一）

最新推荐文章于 2019-12-20 13:40:53 发布

原创最新推荐文章于 2019-12-20 13:40:53 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨AngularJS的核心概念，包括模型、视图、控制器的MVC模式，数据绑定功能，以及如何在HTML中引入AngularJS应用。通过具体案例展示AngularJS在构建动态Web应用中的优势与操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angularjs总结一

什么是Angularjs

完全使用 JavaScript编写的客户端技术。同其他历史悠久的 Web技术（ HTML、 CSS 和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。

AngularJS主要用于构建单页面Web应用。它通过增加开发人员和常见Web应用开发任务之间的抽象级别，使构建交互式的现代Web应用变得更加简单。

AngularJS使开发Web应用变得非常简单，同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能，例如：

解耦应用服务数据模型和视图 Ajax服务依赖注入浏览历史测试

和别的东西有什么不同呢在其他JavaScript框架中，我们被迫从自定义的JavaScript对象中进行扩展，并从外到内操作DOM。

而AngularJS则通过原生的Model-View-Controller（ MVC，模型?视图?控制器）功能增强了
HTML。结果表明，这个选择可以快捷和愉悦地构建出令人印象深刻并且极富表现力的客户端应用。

利用它，开发者可将页面的一部分封装为一个应用，并且不强迫整个页面都使用AngularJS进行开发。这个特质在某些情况下非常有用，比如你的工作流程中已经包含了另外一个框架，或者你只希望页面中的某一部分是动态的，而剩下的部分是静态的或者是由其他JavaScript框架来控制的。

入门案例：

<!DOCTYPE HTML>
<html ng-app>  //当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用
<head>
  <title></title>
</head>
<script type="text/javascript" src="js/angular1.2.3.js"></script>  //载入脚本
<body >
hello{{"world"}}  //使用双大括号标记{{}} 的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串 ‘World’
</body>
</html>

案例：在输入框中输入信息并动态显示出来：展示它的功能：数据绑定

<input ng-model="name" type="text" placeholder="请输入姓名">  
hello{{name}} //$scope.name=input.val();

数据绑定：

其实上边的例子就是我们使用 ng-model 指令将内部数据模型对象（$scope）中的name属性绑定到了文本输入字段上数据模型对象（model object）是指 $scope 对象。 $scope 对象是一个简单的 JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。

双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过脏值检查观察到这个变化，而如果数据模型改变了某个值，视图也会依据变化重新渲染。

它创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最重要的功能之一

要实现这个功能，只要在HTML页面中引用angular.js ，并在某个DOM元素上明确设置ng-app属性即可。 ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。

案例：

<div ng-app>//这里没有绑定在html上边去
   <input ng-model="name" type="text" placeholder="请输入姓名">
   <span >hello{{name}}</span>
</div>

注意：

Angular应用的解析---MVC模式

v---模板

模板是您用HTML和CSS编写的文件，展现应用的视图。您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！---和html css 混用

c---控制器

应用程序逻辑和行为是您用JavaScript定义的控制器。 AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

m---模型

模型是从AngularJS作用域对象的属性的引申。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。

画图理解---两个种情况：两个视图公用一个控制器这么解决？不同视图用不同控制器自动数据绑定使我们可以将视图理解为模型状态的映射。当客户端的数据模型发生变化时，视图就能反映出这些变化，并且不需要写任何自定义的代码，它就可以工作

ng-app 声明所有被它包含的元素都属于

AngularJS 应用一样， DOM 元素上的

ng-controller声明所有被它包含的元素都属于某个控制器

案例：时钟案例

<div ng-app>
<div ng-controller="MyController">
<h1>Hello {{ clock }}!</h1>
</div>
</div>
<script type="text/javascript">
function MyController($scope, $timeout) {
var updateClock = function() {
$scope.clock = new Date();
$timeout(function() {
updateClock();
}, 1);
};
updateClock();
};
</script>

控制器案例2：

<div ng-controller='HelloController'>
<p>{{test.text}}, World</p>
</div>
<script type="text/javascript">
function HelloController($scope) {
$scope.test = { text: 'Hello world' };
}
</script>

模块定义

其实我们早就在nodejs中就大量的使用了模块这个东西在AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个web应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。

AngularJS允许我们使用angular.module() 方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。 ——angular.module('app', []); 如果调用这个方法只传入了一个参数，那么就不是声明而是引用模块 angular.module('app'); 调用模块的方式

简单测试：

  <div>
<input ng-model="test"> //注意这里声明模块---注意这里是挂在根作用域(rootscope)下边的，所以ng-app下的所有东西都能获得
<p>{{test}},hello</p>//这里调用模块
</div>

作用域：

scope是整个AngularJS的核心组成部分 $scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。 $rootScope是所有$scope对象的最上层。

注意：$rootScope是AngularJS最接近于全局对象的函数，所以要是在它身上绑定了很多业务逻辑并不是很好的事情

$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。

$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样， $scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的传送器。

<h1 ng-controller="myController">{{name}}</h1>
<script type="text/javascript">
function myController($rootScope) {
$rootScope.name ="zhangsan";
}
</script>

<h1 ng-controller="myController">{{name}}</h1>
<script type="text/javascript">
function myController($scope) {   //没有把变量设置在跟上，而是用控制器显示的创建了一个隔离的子$scope对象，并且设置在了它之上
$scope.name ="zhangsan";
}
</script>

作用域的基本功能：

提供观察者以监视数据模型的变化；可以将数据模型的变化通知给整个应用，甚至是系统外的组件；可以进行嵌套，隔离业务功能和数据；给表达式提供运算时所需的执行环境。

开发AngularJS应用的大部分工作内容，就是构建作用域及其相关的功能

$scope的一生

创建：在创建控制器或指令时， AngularJS会用$injector创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。
链接：当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。
更新：当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化， $scope对象就会触发指定的回调函数。
销毁：当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己

生命周期

当Angular关心的事件发生在浏览器中时，比如用户在通过ng-model 属性监控的输入字段中输入，或者带有ng-click属性的按钮被点击时， Angular的事件循环都会启动。这个事件将在 Angular执行上下文中处理。每当事件被处理时， $scope就会对定义的表达式求值。此时事件循环会启动，并且Angular应用会监控应用程序内的所有对象

每天一个小知识点13（Angularjs总结一）

Angularjs总结 一

Angularjs总结一