初始AngularJS-优快云博客

本文介绍了AngularJS如何通过ng-directives扩展HTML，并详细解释了ng-app、ng-model、ng-bind等指令的作用。通过实例展示了如何使用AngularJS表达式在网页中动态更新数据，同时利用HTML5的data-属性与AngularJS属性相互配合实现更灵活的网页交互。

<!--

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

AngularJS 表达式写在双大括号内：{{ expression }}。

-->

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div data-ng-app="" data-ng-init="mySwitch=true">
        <input type="button" data-ng-disabled="mySwitch" data-ng-click="count=count+1" value="点啊"/>
        <input type="checkbox" data-ng-model="mySwitch" />
        <input type="text" data-ng-show="mySwitch" />
        <p data-ng-bind="mySwitch"></p>
        <p>{{count}}</p>
    </div>