day4

Posted 2020-11-21 myicons

浅析angularjs

angularjs定义：

angularjs是一种动态的web应用设计结构框架，提供给大家一种新的开发方式。此方式可以让

开发者方便的扩展html语言，以弥补在构建动态web应用时静态文本的不足。

 

注释：动态web应用定义:web应用程序时一个包含多个页的网站，这些页 的部分内容或全部内容

是未确定的，只有当访问者请求web服务器中的某个页时才会最终确定该内容。由于页面的内容会

根据访问者的操作请求的不同而变化，因此这种页也叫动态页。而web应用也是为解决诸如此类的

问题而产生。

 

模板：

在angularjs中，模板相当于html文件，被浏览器解析到dom中去，angularjs遍历这些dom,也就是说angularjs把模板当dom来操作，去生成一些指令来完成对view的数据绑定。

 

指令：

可以用来创建自定义的标签，也可以用来装饰元素或操作dom属性。

 

本项目框架特点：

前后端分离，后端只需要提供数据即可，路由、业务、执行逻辑和模板渲染都在前端完成。

html和js分离，即为展示和逻辑的分离。

减少js代码、减少Dom元素查找，事件绑定等。

angulrjs简单实用方式：

首先在页面引入angular.js文件，angularjs通过被称为指令的新属性来扩展html，带有ng-前缀，

也可以称之为指令属性。它是绑定在dom元素上的函数，可调用方法、定义行为、绑定controller

以$scope、操作dom等。

当浏览器启动开始解析html时，dom元素上的指令也会跟随其他属性一样被解析。

ng-model :

在angularjs中，只需要使用ng-model指令就可以把应用程序绑定到html元素，实现model和view的

双向绑定。

ng-model把相关处理事件绑定到指定标签上，这样当数据发生变化时就不用再手工处理相关事宜的情况下对数据进行修改。

原理：angularjs加载完成之后会启动，首先找到ng-app指令，找到后认为ng-app里面的所有内容都归angularjs管理，接着找到子层标签里所有的指令，然后就可以找到ng-model，找到后会生产数据模型，然后挂在根作用域上面。然后下面所有的标签都可以读取ng-model.

 

 

https://www.jianshu.com/p/492b9d4f016b