AngularJSAngular基础(一)

AngularJS有五单至关重要骨干特性,如下介绍:

  • 双向数据绑定 ——
    实现了将model与view完全绑定以同,model变化,view也扭转,反之亦然。

  • 模板 ——
    在AngularJS中,模板相当给HTML文件给浏览器解析到DOM中,AngularJS遍历这些DOM,也就是说AuguarJS把模版当做DOM来操作,去大成有命来形成对view的数码绑定。

  • MVVM ——
    吸收了民俗的MVC设计模式针但又连无履传统意义上的MVC,更类似受MVVM(Moodel-View-ViewModel)。

  • 仗注入 ——
    AngularJS拥有内建的因注入子系统,可以辅助开发人员更爱的付出,理解和测试用。

  • 指令 ——
    可以据此来创造于定义的价签,也可以为此来装点元素或操作DOM属性。

命介绍:

AngularJS通过叫指令的新属性来扩张的HTML,带有前缀ng-,我们吧可以叫做“指令属性”,它就是绑定以DOM元素上的函数,可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。

Angular.js应用的动态性和响应能力,都使归功给令属性,常见的发:ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

ng-app:用于告诉 AngularJS 应用时以此元素是根元素。

ng-model:绑定了 HTML 表单元素到 scope 变量中。如果 scope 中莫在变量,
将见面创造它。

ng-controller:用于为您的运用上加控制器。在控制器中,你可编制代码,制作函数和变量,并运用
scope 对象来做客。

ng-change:告诉 AngularJS 在 HTML 元素值改变时欲实行之操作。

ng-change 指令需要搭配 ng-model 指令以。

ng-change 事件就针对输入框值的真实修改,而不是经过 JavaScript 来修改。

ng-class:用于给 HTML 元素动态绑定一个要么多单 CSS 类。

ng-click:告诉了 AngularJS HTML 元素被点击后需要履行之操作。

<div ng-app="" ng-init="click=false">
    <button ng-click="click= !click">隐藏/显示</button>
     <div ng-hide="click">
         请输入一个名字:<input type="text" ng-model="name" />
        Hello  
     </div>
 </div>

ng-disabled:设置表单输入字段的 disabled 属性(input, select, 或
textarea)。 如果 ng-disabled 中之表达式返回 true 则表单字段用给剥夺。

ng-init:初始化应用程序数据,也就算是为AngularJS应用程序定义初始值。

ng-bind:告诉 AngularJS 使用给定的变量或表达式的价值来替换 HTML
元素的情。

AngularJS表达式

AngularJS框架的中坚功能之一 ——
数据绑定,由少数独花括号{{}}组成,可以拿数量绑定到HTML,类似Javascript代码片段,可以分包文字、运算符和变量,通常以绑定数据遭到之所以到,表达式可以绑定数字、字符串、对象、数组,写于对大括号内:{{
expression }}。

好望代码:

<div ng-app="" ng-init="name='Hello World'">
  {{ name }}
</div>
指令ng-bind和AngularJS表达式{{}}有异曲同工之妙,但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

<div ng-app="">
    请输入一个名字:<input type="text" ng-model="name" />
    Hello 
</div>

控制器

现在我们便就此ng-controller指令来创造一个简单易行的控制器定义,如下所示:

<div ng-app="" ng-controller="MyController">

请输入一个名字:<input type="text" ng-model="person.name"> 

Hello  

</div>    

<script>
function MyController($scope) {
   $scope.person = {
      name: "World"
   };
}
</script>

由此看来,我们经过ng-controller指令创建了一个JavaScript对象 ——
MyController并涵盖name属性,那参数$scope是什么啊,代表什么意思呢。

本咱们就来解答MyController对象参数 —— $scope。

$scope就是将一个DOM元素连结至控制器上之靶子,它提供一个绑定到DOM元素(以及其子元素)上的行上下文。它也是一个JavaScript对象,指向应用程序作用域内的具有HTML元素和执行上下文。作用域呢,就是当$scope的数量性关联到DOM上之,并且会于待调剂之当儿吃获取到。

使明确创建一个$scope对象,我们将让DOM元素设置一个controller对象,使用的凡ng-controller
指令属性。

所有$scope都照原型继承,这代表它们都能够看父$scope们,对另性质与方式,如果AngularJS在时下$scope上找不至,就见面暨父$scope上去摸,如果当父$scope上呢尚未找到,就会继续发展回溯,一直顶$rootScope上,这个$rootScope是无与伦比顶级的$scope,它对承诺着含有
ng-app指令属性之不得了DOM元素,也就是说根作用域关联的DOM就是ng-app指令定义之地方。

也就是说,拥有了$scope,我们虽足以操作作用域内其他我们怀念如果博得之靶子数据。

 

相关文章