demo01-Angularjs 常用指令

Angularjs 中常用名词 也就是所说的常用指令

HTML5 允许扩展的属性 以data-开头
AngularJS 属性以ng-开头 也可使用data-ng来让网页对HTML5有效，例如
ng-app等同于data-ng-app

 1. ng-app 定义应用程序的根元素
 2. ng-bind 绑定 HTML 元素到应用程序数据
 3. ng-clicked 定义元素被单击时的行为
 4. ng-controller 为应用程序定义控制器对象
 5. ng_disabled 绑定应用程序数据到 HTML 的 disabled 属性
 6. ng_init 为应用程序定义初始值
 7. ng_model 绑定应用程序数据到HTML元素
 8. ng-repeat 为控制器中的每个数据定义一个模板
 9. ng-show 显示或隐藏HTML元素

ng-app ng-bind ng-model {{}} 案例演示

ng-bind 指令 等同于{{}}

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>

<div ng-bind="name"></div>
 {{name}}

ng-init 指令为 AngularJS 应用程序定义了 初始值

<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>

ng-controller

<div ng-controller="firstCtrl">

        姓名：{{name}}
        性别：{{sex}}
        年龄：{{age}}

        <br>
        <ul>
            <li ng-repeat="person in persons">
                姓名: {{person.name}}
                年龄: {{person.age}}
            </li>
        </ul>
        
    </div>

var demo01 = angular.module("demo01App", []);
demo01.controller('firstCtrl', function ($scope) {

    $scope.name = "Edward";
    $scope.sex = "male";
    $scope.age = 25;

    $scope.persons = [
        {name: "张三", age: 15},
        {name: "李四", age: 25},
        {name: "王五", age: 18}
    ];

})