AngularJS简单例子

双大括号标记{{}}绑定的表达式

<html ng-app>

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

最后,标签中的正文是应用的模板,在UI中显示我们的问候语:

Hello {{'World'}}!

结果:结果直接输出World

AngularJS双向数据绑定

<!doctype html>

<html ng-app>

    <head>

        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    </head>

    <body>

        Your name: <input type="text" ng-model="yourname" placeholder="World">

        <hr>

        Hello {{yourname || 'World'}}!

    </body>

</html>

{{yourname || 'World'}}!中的yourname将根据ng-model的值动态的改变,如果ng-model为空,则仅仅输出World

语法或指令

Ng-Bing, ng-init

 

<body ng-app>

      <b ng-init="name='crd'"></b>

      <div ng-bind="name">dsdfdsf</div>

  </body>

Div的值将输出crd 原值dsdfdsf被覆盖

 

HTML5 允许扩展的(自制的)属性,以 data- 开头。

AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

带有有效的 HTML5:

AngularJS 实例

<div data-ng-app="" data-ng-init="firstName='John'">

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

结果值同上

posted @ 2019-04-28 15:53  爱跳舞的程序员  阅读(557)  评论(0编辑  收藏  举报