安古拉杰的基本特征分析(一)

目前，angularjs框架基本用于前端项目。之前不知道这个框架，因为最近接手的项目，打算好好研究一下。我过去在pc端工作，但现在我接管了移动端项目。移动端的UI框架用ion+vordova代替bootstrap。我主要在ios安卓的app界面工作。我对爱奥尼亚了解不多，所以我需要花时间去熟悉它。安古拉杰学会了小白。欢迎大神指正。

什么是AngularJs？

简单来说，就是一个javascript的框架，通过脚本标签添加到网页中。也就是说，当我们使用angularjs时，我们需要引入以下代码。

script src=' http :http://code . anglarjs . org/angular-1 . 0 . 1 . min . js '/script通常建议将脚本放在body元素的底部，这样可以提高网页的加载速度。因为html加载不受脚本加载的限制。

AngularJs的功能？

AngularJS使开发现代SPAs变得更加容易：单页应用程序(SPAS)。AngularJS将应用程序数据绑定到HTML元素。AngularJS可以克隆和重复HTML元素。AngularJS可以隐藏和显示HTML元素。AngularJS可以在HTML元素后面添加代码。AngularJS支持输入验证。

和现在一样，移动终端基本上采用单页比较，这是利用角度路由转换进行的。像我们现在的项目一样，我们也使用单个页面。也就是在主页面，也就是跳转页面都是在主页面进行的。截图如下：

AngularJs表达式

AngularJS表达式用双大括号写成：{{ expression }}。

AngularJS表达式将数据绑定到HTML，类似于ng-bind指令。

AngularJS将“输出”写入表达式的数据。

AngularJS表达式与JavaScript表达式非常相似：它们可以包含文字、运算符和变量。

！doctype html！-标记angularjs以处理整个html页面并指导应用程序-html ng-app head metaarset=' utf-8 '脚本src=' http :3358 code . angular js . org/angular-1 . 0 . 1 . min . js '/脚本/流浆网(流浆网)3360 { { ' ting ' ' feng ' } }/ppnumber : { { 5 { 5 } }/pdivng-init=' person={ name 3360 '冯婷名字

Html主要通过ng指令进行扩展。angularjs指令是一个以ng为前缀的html属性，它包含了mvc、模块化、指向性和数据绑定四个特征

这个指令初始化angularjs应用程序变量。例如，以下列表：

！doctype html！-标记angularjs以处理整个html页面并指导应用程序-html ng-app head metaarset=' utf-8 '脚本src=' http :3358 code . angular js . org/angular-1 . 0 . 1 . min . js '/脚本/流浆网-init=' name='冯婷' ' pname is : span-bind=' name '/span/p/div/body/html ng-app 3:此指令指示一般放在html后面，ng-app指令也可以本地使用。例如，在div ng-app中，angularjs脚本只在这个div中运行，这意味着从这里开始所有内容都由angularjs管理。

Ng-model:该指令涉及将元素值(如输入框值)绑定到应用程序中。

Ng-bind:这个指令是将应用数据绑定到html视图中。有了相应的说明，就可以使用angularjs来操作html页面了。具体怎么用，我们来看看代码。

此时使用ng-model绑定setname模型变量，在输入框中输入值时，对应的setname会发生变化。可以自我编码进行测试。

$scope的解释

什么是$scope？效果如何？怎么用？

简单地说，作用域是一个POJO(普通的javascriptobject对象)，它类似于一个具有属性和方法的对象。作用域是一个POJO(普通javascriptobject)，它类似于一个带有属性和方法的对象。scope提供watch()，watch()和apply()工具方法。angularjs的mvc是在$scope的帮助下实现的。

特点：1。它是表达式的执行环境(或范围)

2.scope是一个树形结构，它与dom标签平行，并且包含一个scope，它与dom标签平行，并且在顶层包含一个rootscope。

3.scope继承了父作用域和父rootscope的属性和方法。

4.$scope可以传播事件，类似于dom，可以向上或向下传播。

5.$scope不仅是mvc的基础，也是双向绑定的基础。

AngularJs的组件

模板：用来显示应用程序视图的html和css文件。Angularjs可以在html中构建自己的html标签！与ajax不同，控制器：不需要编写监听器或dom控制器，因为它已经内置到angularjs中。优点：易于编写、测试、维护和理解。

模型数据：模型是从angularjs域对象的属性中导出的。模型的数据可能是js对象、数组或基本类型，但它们都属于angularjs范围的对象。

如何理解angularjs中的范围？

也就是说，一个范围可以看作是模板、模型和控制器的结合体。angularjs使用范围，并且在模板、数据模型和控制器中也有信息。这些可以帮助分离模型和视图，但是它们是真正同步的！对模型的任何更改都将立即反映在视图上，对视图的任何更改也将立即反映在模型中。

视图：在angularjs中，视图是模型通过html模板渲染后的映射。也就是说，只要模型发生变化，angularjs就会实时更新关节点，然后更新视图。

或者粘贴代码，更直观！

！doctype html ng-app=' hello angular ' head meta charset=' utf-8 ' script src=' http :http://code . angular js . org/angular-1 . 0 . 1 . min . js '/script script//module varmy module=angular . module(' hello angular '-控制模板helloagularmodule。控制器(' hello angular '，['$ scope '，函数hello angular ($ scope) {$ scope。value={ name : ' jiangting ' }；}]);/剧本/床头柜！-MVC look angular-div ng-controller=' hello angular '-控制器是hello angularp { { value }。姓名}}，你好！/p/div！-angular modulation-/body/html我们先来看看controller的应用，也就是controller，也就是控制器对数据进行操作、绑定并显示在HTML页面上。

AngularJS模块定义了AngularJS应用程序。

角度控制器用于控制角度应用程序。

ng-app指令定义应用程序，ng-controller定义控制器。让我们用上面的列表来看看：

AngularJS模块定义应用程序：

var myModule=angular . module(' helloanarural '，[])；-控制模板HelloAngularangularjs控制器控制应用：

my module . controller(' helloanGular '，['$scope '，函数helloanGular($ scope){ $ scope . value={ name : ' jiangting ' }；}]);了解前端mvc

关于控制器属性：

1.不要试图拿走控制器。控制器通常只负责一个小视图

2.不要在控制器中直接操作dom，这不是它的责任。

3.不要过滤控制器中的数据。ng有过滤服务

4.不要格式化控制器中的数据。ng有一个非常有用的表单控件

5 .控制器不会相互调用，但控制器之间的交互将通过事件和过滤服务来进行。4.不要在控制器中格式化数据，ng有有用的表单控件。5.控制器不会相互调用，但控制器之间的交互将通过事件进行，并通过作用域调用。

让我们来看看如何定制指令系统。代码如下：

！doctype html ng-appownerta charset=' utf-8 ' script src=' http :http://code . anglarjs . org/angular-1 . 0 . 1 . min . js '/script script//指令系统varmymodule=angular . module(' my module '，[])；myModule.directive('hello '，function(){ return { restrict : ' E '，template: ' divHi everyone！/div '，-这里我们插入一个html标记replace : true } })；在/script/head body hello/hello/body/html directive中，后面返回三个参数，其中模板引用了插入的html标记。现在，我将自己编写一个html代码，并看看如何将其更改为angularjs。

原始静态html代码如下：

Ullispanew1/spanjusta测试页1/p/lilistanew2/spanjusta测试页2/p/Li/ul，修改为angularjs，内容如下：

！doctype html ng-apptooneta charset=' utf-8 ' script src=' http :http://code . anglarjs . org/angular-1 . 0 . 1 . min . js '/script script/$ scope是控制器的作用域。//angularjs作用域：可视为模板。应用程序启动后，将创建一个根范围，控制器的范围是根范围的典型后继者。function news ctrl($ scope){ $ scope . news=[{ ' content ' : ' new 1 '，' introduction ' : '只是测试页1'}，{'content':'new2 '，' introduction ' : '只是测试页2 ' }]；$ scope。phones={ length : ' 4 '//单个属性不能点状，多个属性用逗号隔开}；}/script/head body ng-controller=' news ctrl ' ulling-repeat=' news中的news ' { { new。内容} } p { {新建。introduction } }/p/Li/ul/body/html以上是对(我)介绍的AngularJs基本特征的分析，希望能给大家一些启发。非常感谢您对我们网站的支持！