angular知识的概述

最新推荐文章于 2022-01-29 10:13:52 发布

lincloudder

最新推荐文章于 2022-01-29 10:13:52 发布

阅读量430

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/qinzhimeng/article/details/53520175

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、概述：

AngularJS 是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。

AngularJS有五个主要核心特性，如下介绍：

双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。
模板 —— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。
MVVM —— 吸收了传统的MVC设计模式但又不是传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。( M数据层 View试图 C控制)
依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性

前后端分离——后端只提供数据接口，路由，模板渲染等都在前端完成html和js分离,展示和逻辑分离
减少JS代码,减少DOM元素查找，事件绑定等代码
适合API开发

AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”，是用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM指定行为，或者改变它。

AngularJS通过称为指令的新属性来扩展的HTML，带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。

AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”，它本质上只是一个当编译器编译到相关DOM时需要执行的函数，可以写在元素的名称里，属性里，css类名里，注释里。

当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析HTML，寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性函数，它们就会被收集起来、排序，然后按照优先级顺序被执行。

Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：

ng-app:指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-init:指令为 AngularJS 应用程序定义了 初始值。
ng-model:指令 绑定 HTML 元素 到应用程序数据。
ng-bind: 表达式把数据绑定到 HTML
ng-repeat:指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
ng-click:绑定事件
ng-show:显示
ng-hide:隐藏
ng-class:相当于JS的className

代码演示1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='angular.min.js'></script>
</head>
<!--ng 简写angular ng-app告诉angular来管理页面的代码-->
<body ng-app="" ng-init="maopao='小强'" >
    <!-- 绑定数据 第一种方法 这种绑定数据的方法 js必须放在前面 否则刷新会出现div的内容-->
    <!--ng-model: 用来获取文本框的值,是于input的value值进行了绑定。-->
    <input type="text" ng-model="maopao">
    <!--<div>-->
        <!--{{maopao}}-->
    <!--</div>-->
    <!--绑定数据 第二种方法 这种绑定数据的方法 js可以放在后面 不会出现div的内容-->
    <div ng-bind="maopao"></div>
    <div ng-bind="maopao"></div>
</body>
<!--
    ng-model原理:
    1.angular加载完成之后会启动,首先找ng-app指令
    2.找到后认为ng-app里面的所有内容都贵angular来管
    3.找到子层标签里的所有指令,就可以找到ng-model
    4.找到之后生成数据模型,然后挂载根作用域上面.
    5.然后下面所有标签都可以读取ng-model的值
-->
</html>

lincloudder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular知识的概述

一、概述： AngularJS 是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。AngularJS有五个主要核心特性，如下介绍：双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。模板 ...
复制链接

扫一扫

专栏目录