码迷,mamicode.com
首页 > 其他好文 > 详细

行如风 Angular 初识3

时间:2017-04-05 18:09:05      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:angular   web   

最近一直在学习AngularJs的内容,受益颇多,今天就继续为大家分享我的学习成果,上一篇博文主要说了一下关于MVC的事情,这个是学习Angular的基础,所以我觉得如果是小白的话非常有必要搞清楚三者之间的关系,废话不多说。

    Angualar的主要特征呢,前面说过是双向数据绑定,那么是怎么来实现的呢?

    先来说一下MVVMMVVM就是module-view-view-module(模型---视图---视图---模型),与之前的MVC不同的是MVVM是双向的,即模型改变视图会自动跟着变,视图改变模型也会跟着变,控制器同样起中间桥梁的作用。下面上一段代码,来举例说明:

<div ng-app="myApp" ng-controller="ctrl" >                  
        <div>{{name}}</div>
        <input ng-model="name">
</div>
<script type="text/javascript"src="js/angular.js" ></script>
<script> 
    var m=angular.module(‘myApp‘,[]);
    m.controller(‘ctrl‘,[‘$scope‘,function($scope){
        $scope.name="hello world!";
    }])
</script>

在上面的代码中ng-app是模块化指令,ng-controller是控制器指令,下面的所有数据的绑定和引用必须全部在当前模块"myApp"和控制器"ctrl"之内写入,否则的话Angular不会检测到对应的服务,{{name}}是控制器内的固定服务对象$scopename属性,表单里的值由ng-model="name"指令来绑定到视图上。

将上面这段代码CopyHTML里面去,在页面上会看到div和表单input里的值都是"hello world!",那么怎么知道视图的变化会影响到模型的变化呢?大家只要在页面里将input里面的值改变,会发现上面div里的值会相应作出同样的变化,这是因为,在改变表单里的值的同时,触发js的事件,js里的控制器$scope里的属性会跟着变化,同样当$scope里的值发生改变的时候,视图里绑定的值也会发生改变,所以当表单input里的值变化,$scope的属性改变,然后{{name}}也跟着变化,故大家会发现表单和div里的值会同时变化。这篇先到这里,大家一起努力~~Fingting!


本文出自 “学习改变命运” 博客,请务必保留此出处http://itzhongxin.blog.51cto.com/12734415/1913115

行如风 Angular 初识3

标签:angular   web   

原文地址:http://itzhongxin.blog.51cto.com/12734415/1913115

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!