首页 > 代码库 > Angular

Angular

2024-07-16 01:10:46   229人阅读

AngularJS是用JS写的客户端 MVC 框架，它运行在浏览器中，并极大的帮助我们书写现代的、单页的、AJAX风格的web App。这是一个通用的框架，但当你用来开发CRUD类型的web app时更能显现出它的强大之处。


在说明AngularJS到底是什么之前 先看个小例子 一如既往的hello world~

<!doctype html>
<html>
<head>
    <script src=http://www.mamicode.com/"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js">> 

首先是在script标签中引入AngularJS文件  这里是用的是官网给出的CDN
 

body 中 ng-app用于启动AngularJS应用，ng-init则在模板初始化之前渲染模型
 

{{name}} 部分主要是使用了ng-init的值作为渲染素材
 


 

其中  可以抽象出一些重要特性：
 

自定义的 HTML 标签和属性可以给本来是静态的 HTML 文档增添动态行为。
 

两个花括号{{expression}}是一个用来输出模型值的表达式的定界符
 

所有的可以被框架所理解和解析的特殊的 HTML 标签和属性都是指令
 


 

AngularJS最厉害的功能莫过于数据的双向绑定了
 

身为业余前端  一直很苦恼怎么把后端数据绑定到前端展示上去
 

AngularJS简直就是梦幻一样的存在  看例子
 

<!doctype html>
<html>
<head>
    <script src=http://www.mamicode.com/"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js">> 

input标签中有一个ng-model  修改一下输入框中的文字 对 你看及了是吧 
 

文字在同步更新 而你并没有刷新页面 AngularJS检查到模型的改变&重绘DOM 这就是数据绑定 
 


 

目前我们所见的hello-world程序并不是分层的  数据初始化，逻辑，视图均在一个文件中完成
 

而AngularJS宣称是基于MVC模型（模型-视图-控制器）
 

不过  AngularJS提供了一些不同的构建方式，可以正确地构建更加复杂的应用
 

<!doctype html>
<html>
<head>
    <script src=http://www.mamicode.com/"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js">> 

这段程序和上面的程序功能上没有区别 但是移除了ng-init 添加了ng-controller并绑定了一个JS函数到scope
 


 

AngularJS中的scope对象在这里就是要将 域模型 暴露给视图
 

只需把属性设置给 scope 实例，就可以在模板渲染时得到这个值
 

scope也可以针对特定的视图来扩展数据和特定的功能
 


 

控制器的首要任务就是初始化scope对象  控制器都是普通的JS函数
 

提供模型初始化的值  扩展scope的UI行为
 


 

AngularJS中的模型也是普通JS对象
 


 


 


 


 



 


 


 

    


联系
我们