Data Binding

最新推荐文章于 2024-08-14 21:18:20 发布
最新推荐文章于 2024-08-14 21:18:20 发布
阅读量327 收藏
点赞数
分类专栏： AngularJS学习笔记 文章标签： angularjs binding 数据绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xupeng1986/article/details/41201303
版权

先搭建一下卡法环境，

先去官网下载最新的1.3.2的AngularJS版本: https://angularjs.org/（BUild栏选择Uncompressed）

先把源码copy进我的webstorm（把所有的类库都放在vendor文件夹下的angular下（文件名为：angularjs.js））

好了， 这样在body的最后就可以加载AngularJS了：

<script type="test/javascript" src="../../vendor/angular/angularjs.js"></script>


ng-app

ng-app指令告诉AngularJS应该管理页面中的哪一块
 
 
  • 放在body里面，此时管理整个body里所有的元素（可能是AngularJS的指令，也可能是其他的东西)
  • 在AngularJS中用“{{}}”在view中显示内容，如果body中没有注明ng-app,就会被认为是HTML元素了。

 
 

  
  
  
  



  
  
AngularJS的表达式

 
 

 
 
  • AngularJS的表达式通过$parse服务解析执行
  • 与javascript表达式的区别：

 
 
    1. 属性求值：所有的属性的求值是对于scope的，而javascript是对于window对象的。
    2. 宽容性：表达式求值，对于undefined和null，AngularJS是宽容的，但是javascript会产生NullPointEcxeptions
    3. 没有控制流程的语句：在AngularJS中不能做一下任何的事情：条件分支，循环，抛出异常。
    4. 过滤器：我们可以就将表达式的结果传入过滤链（filter chains）
    
 
 

 
 
  • <!-- AngularJS的表达式-->

 
 
    1. 
   
   
    2. {{100+100}} 输出结果为200
    3. {{name}}此时name代表的是变量而不是字符串
    4. {{"name"}}此时为字符串	
    
 
 
<pre name="code" class="html"><!DOCTYPE html>
 
 
 
 
 
  
<pre name="code" class="html"><html>
 
  
 
 
 
 
 
  
<pre name="code" class="html"><head>
 
  
 
 
 
 
 
  
<pre name="code" class="html">    <meta charset="UTF-8">
 
  
 
 
 
 
 
  
<pre name="code" class="html"></head>
 
  
 
 
 
 
 
  
<pre name="code" class="html"><body ng-app>
 
  
 
 
 
 
 
  
<pre name="code" class="html">    <input type="text" />
 
  
 
 
 
 
 
  
<pre name="code" class="html">    {{100+100}}
 
  
 
 
 
 
 
  
<pre name="code" class="html">    {{name}}
 
  
 
 
 
 
 
  
<pre name="code" class="html">    {{100}}
 
  
 
 
 
 
 
  
<pre name="code" class="html">    <script type="test/javascript" src="../../vendor/angular/angularjs.js"></script>
 
  
 
 
 
 
 
  
<pre name="code" class="html"></body>
 
  
 
 
 
 
 
  
<pre name="code" class="html"></html>
 
  
 
 
 

 


<pre style="font-family: Menlo; background-color: rgb(255, 255, 255);"><span style="background-color: rgb(239, 239, 239);"><span style="font-family: Arial; line-height: 26px;"><span style="color: rgb(51, 51, 51);"><span style="font-size: 32px;">ng-model</span></span></span></span>
 

 

 
 
   
 
 
<pre name="code" class="html"><!DOCTYPE html>
 
 
 
 
<pre name="code" class="html"><html>
 
 
 
 
<pre name="code" class="html"><head>
 
 
 
 
<pre name="code" class="html">    <meta charset="UTF-8">
 
 
 
 
<pre name="code" class="html"></head>
 
 
 
 
<pre name="code" class="html"><body ng-app>
 
 
 
 
<pre name="code" class="html">    <!--
 
 
 
 
<pre name="code" class="html">    view==> 1234
 
 
 
 
<pre name="code" class="html">    model==>1234
 
 
 
 
<pre name="code" class="html">    we do have three views(line14,15 and 16),
 
 
 
 
<pre name="code" class="html">    then the data is two way binding now!!
 
 
 
 
<pre name="code" class="html">    -->
 
 
 
 
<pre name="code" class="html">

 
 
 
 
<pre name="code" class="html">    <input type="text" ng-model="name"/>
 
 
 
 
<pre name="code" class="html">    {{name}}
 
 
 
 
<pre name="code" class="html">    <input type="text" ng-model="name"/>
 
 
 
 
<pre name="code" class="html">    <script type="test/javascript" src="../../vendor/angular/angularjs.js"></script>
 
 
 
 
<pre name="code" class="html"></body>
 
 
 
 
<pre name="code" class="html"></html>
 
 
 

 



<div>
</div>


 



 


                

        

        

    

  


    

      

        

            

              
                
                  xupeng1986
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Data Binding 详解(一)-从零开始

				
			

			

				

					俊墨客
				

				

					08-23
					
					1433
					
				

			

		

		

			
				
知是行之始，行是知之成。
文章配套的 Demo：https://github.com/muyi-yang/DataBindingDemo
Demo 支持 Java 和 Kotlin 双语言，master 分支为 Java 语言代码，kotlin 分支为 Kotlin 语言代码。

DataBinding介绍
2015 年的 Google IO 大会上，Android 团队发布了一个数据绑定框架（Data Binding Library），它是为了解决数据和 UI 的绑定问题，同时也是对 MVVM 模型的一.

			
		

	



                

              
                



	

		

			

				
					
Android 界面库 (二) 之 Data binding 详细介绍

				
			

			

				

					子云心的博客
				

				

					06-25
					
					1453
					
				

			

		

		

			
				
Data binding 是官方推荐的视图数据绑定方案，它可以减少了手动编写代码来实时同步 UI 和数据的工作量，使开发更加高效，它的自动同步机制也减少了人为同步时容易产生的错误情况，而且可以更容易地维护和扩展代码，因为 UI 逻辑和数据逻辑被明确分离。

			
		

	



                


  
              

                


	

		

			

				
					
Data Binding简析

				
			

			

				

					彬_小彬的博客
				

				

					07-29
					
					851
					
				

			

		

		

			
				
Data Binding 是 Android 提供的一种框架，用于将 UI 元素与应用的数据源绑定在一起，从而减少手动调用和手动更新 UI 的繁琐工作。Data Binding 可以直接在 XML 文件中声明绑定，从而让布局和逻辑更加分离。以下是 Data Binding 的工作原理及其基本使用方法。

			
		

	





	

		

			

				
					
Android Data Binding 详细介绍与使用

				
			

			

				

					guodashen007的博客
				

				

					11-01
					
					1954
					
				

			

		

		

			
				
构建环境


	首先，确保能使用Data Binding，需要下载最新的 Support repository。否则可能报错，如图：

	
	
	
	在模块的build.gradle文件中添加dataBinding配置

	
android {
    ....
    dataBinding {
        enabled = true
    }
}


	
	注意：如果app依赖了一个使...

			
		

	



		

			
		



	

		

			

				
					
Data Binding 详解(二)-布局和绑定表达式

				
			

			

				

					俊墨客
				

				

					08-23
					
					932
					
				

			

		

		

			
				
知是行之始，行是知之成。
文章配套的 Demo：https://github.com/muyi-yang/DataBindingDemo
Demo 支持 Java 和 Kotlin 双语言，master 分支为 Java 语言代码，kotlin 分支为 Kotlin 语言代码。

本章将讲解在 Data Binding 中的布局及布局中如何使用表达式。
支持的表达式
在布局中支持很多表达式和关键字：
Mathematical + - / * %
String concatenation +
Logical.

			
		

	





	

		

			

				
					
Data binding和View binding

					
最新发布

				
			

			

				

					weixin_43508502的博客
				

				

					08-14
					
					344
					
				

			

		

		

			
				
Data Binding 和 View Binding 是 Android 开发中两种用于简化界面（UI）与数据之间交互的技术。它们各自有其独特的用途和优势。

			
		

	





	

		

			

				
					
Data Binding 详解(六)-双向数据绑定

				
			

			

				

					俊墨客
				

				

					08-23
					
					1402
					
				

			

		

		

			
				
知是行之始，行是知之成。
文章配套的 Demo：https://github.com/muyi-yang/DataBindingDemo
Demo 支持 Java 和 Kotlin 双语言，master 分支为 Java 语言代码，kotlin 分支为 Kotlin 语言代码。

前面讲到的各种数据绑定都是单向绑定，都是由数据驱动 UI 变化，当 UI 发生变化时并不会引起数据的改变。当 UI 的变化需要反应到数据中时，我们一般采取向 View 设置相应的监听器，然后在监听器中修改相应的数据。这种即由数据.

			
		

	





	

		

			

				
					
Data Binding 指南

				
			

			

				

					随遇而安的博客
				

				

					05-27
					
					6423
					
				

			

		

		

			
				
这篇博客主要讲解一下，android数据绑定库Data Binding的使用。

			
		

	





	

		

			

				
					
Android Data Binding

				
			

			

				

					不要錯過才珍惜
				

				

					02-16
					
					1100
					
				

			

		

		

			
				
Data Binding 的优势有什么呢？有下面几点：
 - 去掉了 Activity 和 Fragment 中的 UI 相关代码
 - 让 XML 变成 UI 的唯一真实来源
 - 不再需要 findViewById
 - 性能超过了手写代码，并且更加安全，不会因为 id 错而导致 crash
 - 所有的 UI 修改代码保证执行在主线程

			
		

	





	

		

			

				
					
Android   Data Binding 在 library module 中遇到错误及解决办法

				
			

			

				

					08-31
				

			

		

		

			
				
在使用Android Data Binding时，有时会遇到在library module中出现错误的情况。这通常是由于Data Binding在编译过程中生成的binding类与library module的特定规则不兼容导致的。本文将深入探讨这个问题并提供解决...

			
		

	





	

		

			

				
					
Flex Data Binding详解

				
			

			

				

					10-29
				

			

		

		

			
				
Flex Data Binding是Adobe Flex框架中的核心特性之一，它允许开发者创建数据驱动的应用程序，通过将UI组件的属性与数据模型的属性直接关联，实现实时的数据同步。在Flex中，数据绑定确保当数据源发生变化时，相关的...

			
		

	





	

		

			

				
					
模块和控制器

				
			

			

				

					xupeng1986的专栏
				

				

					11-20
					
					1351
					
				

			

		

		

			
				
什么是Module
大部分的应用都有一个主方法（main）y

			
		

	





	

		

			

				
					
$scope里的$apply、$digest方法

				
			

			

				

					xupeng1986的专栏
				

				

					11-18
					
					1288
					
				

			

		

		

			
				
什么是scope
官方文档的解释：
scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of 

			
		

	





	

		

			

				
					
购物车--购买数量问题

				
			

			

				

					xupeng1986的专栏
				

				

					11-20
					
					1099
					
				

			

		

		

			
				
购买数量问题

			
		

	





	

		

			

				
					
ng-bind

				
			

			

				

					xupeng1986的专栏
				

				

					11-18
					
					926
					
				

			

		

		

			
				
//{{name}}
//{{age}}

			
		

	





	

		

			

				
					
$provider里factory、service方法

				
			

			

				

					xupeng1986的专栏
				

				

					11-22
					
					584
					
				

			

		

		

			
				
总觉得英文文档写的比较直观：


$provide

- service in module auto

The $provide service has a number of methods
 for registering components with the $injector. Many of these functions are also exposed on an

			
		

	





	

		

			

				
					
Android Data Binding深度解析与实战

				
			

			

				

					
				

			

		

		

			
				
"Android Data Binding数据绑定详解，包括其优势、环境搭建步骤以及基础展示案例。"  Android Data Binding是Google在2015年I/O大会上推出的一种强大的框架，它旨在简化Android应用中的UI逻辑，减少Activity中的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值