Angular基础(1)

ng-click:告诉了 AngularJS HTML 成分被点击后供给实践的操作。

ng-disabled:设置表单输入字段的 disabled 属性(input, select, 或
textarea)。 如若 ng-disabled 中的表明式再次来到 true 则表单字段将被剥夺。

  • 双向数据绑定 ——
    达成了把model与view完全绑定在壹道,model变化,view也更换,反之亦然。

  • 模板 ——
    在AngularJS中,模板也正是HTML文件被浏览器解析到DOM中,AngularJS遍历这一个DOM,也正是说AuguarJS把模版当做DOM来操作,去生成一些限令来实现对view的数据绑定。

  • MVVM ——
    吸收了古板的MVC设计情势针但又并不施行古板意义上的MVC,更类似于MVVM(Moodel-View-ViewModel)。

  • 依傍注入 ——
    AngularJS具备内建的依靠注入子系统,能够帮助开辟人士更易于的开垦,明白和测试应用。

  • 指令 ——
    可以用来创设自定义的价签,也得以用来点缀成分也许操作DOM属性。

ng-controller:用于为你的利用加多调节器。在调控器中,你能够编写制定代码,制作函数和变量,并运用
scope 对象来拜会。

控制器

当今大家就用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,我们就足以操作功用域内任何大家想要获取的目的数据。

 

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

AngularJS有四个至关重要骨干个性,如下介绍:

<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-bind:告诉 AngularJS 使用给定的变量或表明式的值来替换 HTML
成分的内容。

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

ng-class:用于给 HTML 成分动态绑定三个或多个 CSS 类。

AngularJS表达式

AngularJS框架的着力职能之1 ——
数据绑定,由四个花括号{{}}组成,能够把数量绑定到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-change:告诉 AngularJS 在 HTML 成分值改换时索要实行的操作。

命令介绍:

ng-change 指令须要搭配 ng-model 指令使用。

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

Angular.js应用的动态性和响应工夫,都要归功于指令属性,常见的有:ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

ng-model:绑定了 HTML 表单成分到 scope 变量中。倘使 scope 中不存在变量,
将会创立它。

AngularJS通过称为指令的新属性来扩充的HTML,带有前缀ng-,大家也能够称呼“指令属性”,它正是绑定在DOM成分上的函数,能够调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。

相关文章