初识angular体验(四)-创新互联

亲们,大家好,又到了我们angular每周分享的时间啦,从这周开始呢我准备把angular的基础知识给大家讲解下,欢迎大家随时留言,一起讨论问题!

主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设公司、程序开发、微网站、微信平台小程序开发等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的成都网站建设、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。

首先给大家介绍下双向数据绑定,angular的数据绑定是数据模型(model)与视图(view)组件的自动同步。angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时,视图就能反映这种改变,反之亦然。

下面我们先来看一段代码:

<div ng-app="hd" ng-controller="ctrl">
    <div>`name`</div>
</div>
<script>
    var m = angular.module('hd', []);
    //双向数据绑定
    m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = '学习angular';//model   server
    }]);
</script>

以上代码的运行结果是学习angular。

解读:这里的"{{}}"相当于"ng-model"指令,其实就是一种绑定,但是仅从这个例子,不能说实现了双向数据绑定。这里是将angular的数据模型(Model)的值绑定到了视图(View)上了。

上面介绍的不能算是双向数据绑定,下面引出真正的双向绑定,那么双向数据绑定有何应用场景,什么样的情况需要数据模型与视图能够相互映射相互影响呢,可能是你没有察觉,现在很多的网站都能看到这种思想带来的极大便捷,比如说表单,在填写或提交表单时,界面上会根据用户的操作做出及时的相应,这就是一种双向数据绑定的最有力的应用场景。

注意:这个例子很好地诠释了什么是双向绑定。

<div ng-app="hd" ng-controller="ctrl">
    <div>`name`</div>
    <input type="text" ng-model="name">
</div>
<script>
    var m = angular.module('hd', []);
    //双向数据绑定
    m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = '学习angular';//model   server
    }]);
</script>

运行结果如下

初识angular体验(四)

首先在html中声明了两个标签:一个输入框input和一个div块级标签。

显然采用了两种绑定的方式:{{}}和ng-model,但是功能都是数据绑定,与js文件中控制器中的$scope.name进行了绑定。所以,通过js中$scope.name的赋值会使得前台Html中input和div同时显示"学习angular"。

在输入框中的任何输入都会及时的反应在下面的div中,这也说明了在Html中改变数据也会及时的映射到后台数据模型,真正的实现了双向数据绑定。

本想在本篇再介绍下angular的其它东西,限于时间和篇幅,留在下篇吧,如果觉得有用,记得点赞哦!!!

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。

本文名称:初识angular体验(四)-创新互联
网站网址:https://www.cdcxhl.com/article14/dposde.html

成都网站建设公司_创新互联,为您提供响应式网站网站排名域名注册品牌网站制作虚拟主机App开发

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站优化排名