AngularJS学习(一)

       在刚开始接触AngularJS的时候,并不觉得有什么吸引我的地方,因为它奇怪的编码方式让我感觉陌生,然而与它接触一段时间后,我感觉我喜欢上了这种简洁,干净的编码方式,虽然目前理解的并不是很深入,。。。如有不正确的地方,欢迎大家来喷!!!

AngularJS的原理

       Angularjs 是google开源的一套web前端框架,它的优势在于它的五大特性:双向数据绑定(Two Way Data-Binding),MVC(model-view-controller), 模型(model),指令(Directives),依赖注入(Dependency Inject)等等。

       下面通过一个小demo(index.html)了解一下Angularjs的运行机制:

          <!DOCTYPE html>

<html lang="en" ng-app = "myApp">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div class="hello" ng-controller="HelloCtrl">

Hello, {{name}}!

</div>

<script type="text/javascript" src="js/angular.js"></script>

<script type="text/javascript">

     angular.module("myApp", [])

     .controller('HelloCtrl', function($scope) {

         $scope.name = "World";

     });

</script>

</body>

</html>

在上面的例子中,当浏览起尝试去访问index.html时,依次会进行一下步骤:

> 加载html,然后解析成DOM;

>加载angular.js脚本;

>Angularjs等待DOMContentLoaded事件的触发;

>寻找ng-app指令,根据该指令确定应用程序的边界;

>使用ng-app指定的模块配置$injector;

>使用injector创建compile服务和$rootscope;

>使用compile编译DOM并把它链接到rootscope上;

>通过controllerl对scope里面的变量name进行赋值;

>对{{name}}表达式进行替换,模板显示

Hello, World!
这个只是在本地运行的一个示例,如果在实际应用中的话可以直接调用后端提供的接口,从而访问服务器端的数据
比如通过'DOMAINNAME + “/login”'接口,用户可以将用户名和密码传递到服务器并保存起来,以便接下来的访问。
AngularJS双向数据绑定
          angularjs才用并扩展了传统的HTML,通过双向数据绑定来适应动态内容,双向数据绑定允许模型和视图之间的自动同步;
如下代码,为“Hello World”增加一个输入栏(iput field);
          <body ng-app ng-init = "name = 'world'">
Say hello to: <input type="text" ng-model="name">
<h1>Hello, {{name}}!</h1>
           </body>
       在上面的代码中 ,ng-init是用来初始化数据的,除了ng-model外,input标签看起来也没什么特别的啦,但是当我们开始向输入框输入数据的时候,奇迹就发生了,每一次输入页面都会重新绘制,以显示你所输入的name,  我们无需编写代码去更新模板,也不用调用框架的API去更新模型。Angularjs智能的检测到了模型的变化,并随之更新了页面的DOM元素。
       AngularJS与传统模板不同的是:任何用户引发的视图的改变,都会映射在模板上,继而任何模型的改变也会映射到模板上。
AngularJS的优点与缺点
       优点:(1).  模板功能强大,并且是声明式的,它自带了丰富的Angular指令;
                  (2). 它是一个比较完善的MVC框架,包含模块,数据双向绑定,路由,模块化,服务,依赖注入等所有功能;(下一篇详细介绍这些功能)
             (3). 自定义Directive, 比jquery插件更灵活; 
                  (4). ng模块化引入了Java的一些东西(依赖注入),容易开发出可复用的代码,项目从刚开始到目前,UI变化很大,在摸索中迭代产品,但JS基本很少改动;
                  (5). Angularjs支持单元测试和e2e-testing。
       缺点: (1) . 验证功能错误信息显示比较薄弱,需要写很多模板标签;
                        
                  (2). ngView只能有一个,不能嵌套多个视图。

                       

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值