AngularJs日常学习概述

这个周末在家待了两天，中午闲暇时继续分享Angularjs。今天主要分享Angularjs的大致介绍和数据绑定。现在我将直接进入主题。

1.基本概念：

AngularJS旨在克服HTML在构建应用程序时的缺点。对于伪静态的文本显示设计来说，HTML是一种很好的声明性语言，但是对于构建WEB应用程序来说，它很弱。因此，我做了一些工作(你可能认为这是一个技巧)来让浏览器做我想做的事情。通常，我们使用以下技术来解决静态网页技术在构建动态应用程序时的缺点。

2.版本

Angularjs 1。x:目前比较稳定的版本。Angularjs2.x:是基于typescript编写的。和1.x相比变化很大，偏向于移动终端的发展。angularjs4.x的最新版本是用ES6标准编写的

目前2.x版本没有在1.x的基础上升级，基本上是颠覆性的。目前有两个版本开始维护，2.x基本上重新架构了1.x版本，优化了很多东西，提倡组件化，在这方面和Vue、React类似。

3.核心特征

MVC(或MVVM)设计思想；

很多人会认为Angularjs是前端MVC框架。我觉得MVC只是一个设计思路，我觉得可以说里面有MVVM的影子，因为MVVM是在MVC的基础上升级的，增加了数据双向绑定的功能，但这只是我个人的看法，请大家指正。

双向数据绑定：

双向数据绑定不是AngularJs提出的，而是存在了很长时间。他们中的一些人在微软WPF使用了MVVM的思想，前端框架Knockoutjs有双向数据绑定的概念。

模块化和依赖注入

模块化和依赖注入是AngularJs的核心内容，也是Angular的亮点。

指令系统

指令系统也是Angular的核心。指令系统分为内置指令和自定义指令，其中我认为自定义指令功能非常强大，可以实现很多强大的功能。在解释说明时将详细解释细节。

4.擅长这个领域

1)单页应用程序(spa) 2) crud程序

可能有些公园的朋友可能对单页申请不是很了解。让我们举一个简单的例子。比如我们传统的多页应用MPA通过Iframe框架，多页应用的缺点是多次加载多个页面，单页应用通过Html段加载或切换。我们这里不太介绍MPA和SPA，大家可以用百度了解一下。

AngularJs适合CRUD应用系统，但不适合页面交互频繁的应用，或者图形页面和游戏系统不适合这个框架。

5.AngularJs应用程序组合

任何ng应用程序都由模块类型组成，如控制器、服务、指令、路由、过滤器等。在这里，我想用一个图表来表示这种关系：

6.组件

在AngularJS中，模块是一个核心存在，包括很多方面，比如控制器、配置、服务、工厂、指令、常量等等。

创建模块的模式：角度。模块(' myapp '，[])；

模块的使用：必要时添加ng-app(在html的某个标签上)

使用模块的好处：

1)保持全局命名空间干净；2)编写测试代码更容易；3)在不同的应用程序之间重用代码很容易。4)使用声明更容易理解。

7.在应用程序中使用AngularJs

1)在应用中使用angular时，首先在页面中参考Angular框架的js库代码。

Head meta charset='UTF-8 '标题主页/标题！-参考AngularJs库-脚本类型=' text/JavaScript ' src=' http :/lib/Angular-1 . 3 . 0 . 14/Angular . js '/script/head 2)在带angular scope的html元素上添加ng-app模块。如果需要添加控制器，请添加ng-controller。这不一定是在主体元素上，而是在任何元素上。这是指示使用Angular的应用程序边界。

body ng-app=' myapp ' ng-controller=' myCtrl '！-1.表达式绑定-h1 {{expression}}/h1！-2.指令绑定-H2 {{ngmodel}}/H2输入类型=' text' ng-model=' ngmodel '！-3，ng-bind bind-H3 ng-bind=' ng bind '/H3 H3 class=' ng-bind : ng bind '/H3！-4，ng-bind-html binding-H4 ng-bind-html=' html bind '/H4！-5.ng-bind-template-H5 ng-bind-template=' { { ngbind } }，{{1 1}}'/H5/body3。添加js代码，定义模块和控制器等。

Script //模块定义//第一个参数：应用程序名称，第二个参数：应用程序相关模块varapp=angular.module ('myapp '，[' ngsanitize '])；//控制器定义//第一个参数：控制器名称，第二个参数：匿名函数，传入作用域，增加了附加函数app.controller ('my ctrl '，function($ scope){ $ scope . expression=' hello expression '；$ scope . ng bind=' hello ng-bind '；$ scope . html bind=' font color=' red ' hello，html bind/font '；$ scope.subCtrl=' hello subCtrl});/script从上面的代码段中，可以看到如何定义模块和控制器，并对每个参数的含义进行了标注，这样就可以看一看了。

到时候把源代码分享给GitHub，就可以下载了。

今天，让我们和你分享很多内容。下次，让我们与您分享数据绑定和控制器相关的内容。感谢大家的支持，如果有问题欢迎大家指正。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。