anjularjs 第一天

    1.通过ng-app属性,告诉angular作用范围 <html ng-app="myapp">

    2.通过ng-controller属性,angular找到该属性内的html内容,并创建$scope对象传递该区域内的变量<body ng-controller="acon">,传给用户名为“acon”的函数。所以一个acon函数可以控制多个ng-controller值为acon的html区域。

    

    acon可以获取到它所需要的 $scope对象,而没有必要去创建它。

    没有必要自己调用 acon的构造方法,或者指定何时去调用它。

    

    3.ng-repeat

    <div ng-repeat="item in items">

        <span>{{item.title + $index + $first+ $last + $middle}}</span>

    </div>

    4.ng-bind 与 {{}}

    

    显示文本

    使用ng-bind 指令,你可以在UI 中的任何地方显示并刷新文本。它还有两种等价形式。

    第一种是使用花括号的形式,我们已经见过了:

        <p>{{greeting}}</p>

    还有一种方式就是使用基于属性的指令,叫做ng-bind :

        <p ng-bind="greeting"></p>

    对于输出的内容来说两种形式是等价的。如果模型变量greeting 被设置为“Hi there”,

    Angular 将会生成以下HTML :

        <p>Hi there</p>

    然后浏览器就会显示“Hi there”。

        那么,你为什么要使用一种方式替代另一种呢?我们创建双花括号插值语法的目的是为

    了阅读起来更加自然,并且需要输入的内容更少。虽然两种形式的输出内容相同,但是

    使用双花括号语法的时候,在Angular 使用数据替换这些花括号之前,第一个加载的页面,

    也就是应用中的index.html,其未被渲染好的模板可能会被用户看到。而使用第二种方

    法的视图就不会遇到这个问题。

        造成这种现象的原因是,浏览器需要首先加载HTML 页面,渲染它,然后Angular 才有

    机会把它解释成你期望看到的内容。

        好消息是,在大多数模板中你依然可以使用{{ }}。但是,对于index.html 页面中的数

    据绑定操作,建议使用ng-bind。这样一来,在数据加载完成之前你的用户就不会看到

    任何内容。


    5. ng-model

    

    <form ng-controller="SomeController">

        <input type="checkbox" ng-model="youCheckedIt">

    </form>

    这样做的含义是:

        1.当用户选中了复选框之后,SomeController 中$scope 的youCheckedIt 的属性

    就会变成true。而反选复选框会让youCheckedIt 变为false。

        2.如果你在SomeController 中把$scope.youCheckedIt 设置为true,那么UI 中的

    复选框将会变成选中状态。设置为false 将会反选复选框.


    6.ng-change 

    

<div ng-controller="StartUpController">

Starting:<input ng-change="computeNeeded()" ng-model="funding.startingEstimate">

Recommendation:{{funding.needed}}

</div>

    <script>

function StartUpController($scope){

        $scope.funding = {startingEstimate:0,needed:0};

$scope.computeNeeded = function(){

$scope.funding.needed = $scope.funding.startingEstimate * 10;

};

}

    </script>



    7.$watch 实现监听变量

    

    <div ng-controller="StartUpController">

Starting:<input ng-model="funding.startingEstimate">

Recommendation:{{funding.needed}}

    </div>

    <script>

function StartUpController($scope){

    $scope.funding = {startingEstimate:0,needed:0};

    $scope.computeNeeded = function(){

    $scope.funding.needed = $scope.funding.startingEstimate * 10;

    };

$scope.$watch(‘funding.startingEstimate‘,$scope.computeNeeded);

}

    </script>

    


    8.ng-submit 监听表单提交属性,提交时运行requestFunding,并组织浏览器向服务器post通信。

      ng-click 非表单

    <form ng-controller="StartUpController" ng-submit="requestFunding()">

Starting:<input ng-model="funding.startingEstimate">

Recommendation:{{funding.needed}}

<button stype="submit">sub</button>

    </form>


    9.ng-eventhandler  

    1。在所有浏览器中具有相同的行为。Angular 将会帮你屏蔽差异性

    2。不会在全局命名空间中进行操作。你所指定的表达式只能访问元素控制器作用域范围(ng-controller)内

        的函数和数据。

    3。

    对于你的系统是否会遭遇这种耦合,我们有一种简单的测试方法可以验证:我们能否为

    应用逻辑编写一个单元测试而不需要DOM 结构存在?

    是的,在Angular 中我们可以编写包含业务逻辑的控制器,而无须引用DOM。问题不是

    出在事件处理器上,而是之前我们编写JavaScript 的方式有问题。请注意,到目前为止

    我们所编写的所有控制器中,都没有在任何地方引用DOM 或者DOM 事件。所有定位

    元素和处理事件的工作都是在Angular 内部完成的。

    在编写单元测试的时候这一点很重要。如果你需要DOM,你就需要在测试用例中首先

    创建DOM,这就增加了测试的复杂性。并且,当你的页面发生变化时,还有更多的维

    护工作要做,你需要为测试用例同步修改DOM。最后,访问DOM 的操作非常慢。很慢

    的测试就意味着很慢的反馈,甚至很慢的交付。而Angular 的控制器测试就不会有这些

    问题。


    10.ng-show ng-hide 

    这两条指令的工作原理是:根据实际情况把元素的样式设置为display:block 来显示元

    素;设置为display:none 来隐藏元素



        

    


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。