【angularjs】数据绑定

忘是亡心i 2024-02-19 16:10 82阅读 0赞

#### 文章目录 ####

*  基础：
 *  数据绑定：
 *  总结：

因为公司的需要，开始学习angularjs。  
准备：  
webform开发工具。  
anguljs 1.7.js

## 基础： ##

> ng-app: 指令告诉angular应该管理页面中那一部分。  
> 正如下面代码中的例子，ng-app 在body标签中，那么angular管理body标签内的所以的内容。

执行页面如此：  
![在这里插入图片描述][20190118200723336.png]  
如果我们不写ng-app的话，，结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FpbWluZzY2_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据绑定</title>
    
        
        <script src="../angularjs/js/angular.js"></script>
    </head>
    <body ng-app="">
        <input type="text">
        
        {
       {1000}}
        
        {
       {100+100}}
        
        {
       {name}}
        
        {
       {"name"}}或者{
       {'name'}}
    </body>
    </html>

输出结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FpbWluZzY2_size_16_color_FFFFFF_t_70 1]

## 数据绑定： ##

我们对页面的代码进行稍微的改动，从而数据绑定：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据绑定</title>
    
        
        <script src="../angularjs/js/angular.js"></script>
    </head>
    <body ng-app="">
        ng-model 表示这个输入框对应的model是name，那么value值的变化，直接影响到这个model值
        <input type="text" ng-model="name" value="">
        
      
        {
       {name}}
    
    </body>
    </html>

执行结果如下：  
当我们在文本框中动态的输入文本时，那么后面的结果也会动态的变化。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FpbWluZzY2_size_16_color_FFFFFF_t_70 2]

## 总结： ##

angularjs和JavaScript的区别：  
1、属性求值：所有的属性求职都是对于scope的，而JavaScript是对于window对象的。  
2、宽容：表达式求值，对于undefined和null，angular是宽容的，但是对于JavaScript会产生nullpointerexception=  
3、没有流程控制语句：在angular表达式中，不能进行一下操作：条件分支，循环，抛出异常。  
4、过滤器：我们可以将表达式的结果传入过滤器链（filter chains）

[20190118200723336.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/95e4dbae800c4914a444e39d6a451dcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FpbWluZzY2_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b8e74556fa73484da2b2531427f0ab80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FpbWluZzY2_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f3d0cff1315540d8a4ab724b3f914b19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FpbWluZzY2_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0b68d53eb09b4221abbb920747fb4528.png