(二)angular.js


姓名: {{ firstName + " " + lastName }}


一、标签了解

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

1、ng-app=" "  指令初始化一个 AngularJS 应用程序。

2、ng-init="变量=值;变量='值'"  初始化变量的值,有多个变量时,中间用分号隔开;指令初始化应用程序数据

3、ng-model="变量"  定义变量名;指令把元素值(比如输入域的值)绑定到应用程序。

4、ng-bind="变量"  绑定变量名,获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值,比如:{{变量}}。

(一)表达式

ng-app:是一个特殊的指令,在一个HTML文档中只出现一次。如果出现多次也只有第一个生效,告诉子元素该指令属于angular.js

1、数字

计算出的结果:{{first * tow}}

计算出的结果:550
2、字符串

姓名: {{ firstName + " " + lastName }}

姓名: John Doe

(二)指令

1、ng-model:数据绑定,把数据绑定到应用程序中

在输入框中输入这世界最帅人的名字

录入名字:{{firstname}}

2、 ng-repeat:重复一个元素的HTMl
  • {{x}}
结果:
  • spring
  • mybatis
  • JDBC
  • 循环一个数据

    循环对象:

    • {{ x.name + ', ' + x.country }}

    3、数据流双向绑定

    
    名字: 
    

    你输入了: {{name}}

    三、angular scope(作用域)

    概念:是一个javascript对象,带有属性和方法,这些属性和方法在视图和控制器中是可以使用。

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

    当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

    scope简述:

    视图(view):即HTML.

    模型(model):视图中可以使用到的数据。

    控制器(controller):即javascript函数,可以添加个修改属性。

    {{greeting}}

    四、angular 控制器

    作用:也就是控制应用程序的数据

    额外:应用程序是由ng-app去定义的

    ng-controller='ff';属性是angular指令,用于定义一个控制器。

    angularJS通过$scope对象来调用控制器的,

    1、

    AngularJS 控制器
    名: 
    姓:

    姓名: {{firstName + " " + lastName}}

    应用解析:
    AngularJS 应用程序由 ng-app 定义。应用程序在  内运行。
    ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
    myCtrl 函数是一个 JavaScript 函数。
    AngularJS 使用$scope 对象来调用控制器。
    在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
    控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
    控制器在作用域中创建了两个属性 (firstName 和 lastName)。
    ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

    2、控制器方法




    本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

    相关文章

    立即
    投稿

    微信公众账号

    微信扫一扫加关注

    返回
    顶部