JavaScript教程之angular.js-1初识

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之angular.js-1初识

初识AngularJS

AngularJS 为了克服HTML在构建页面上的不足，通过新的属性和表达式扩展了 HTML（AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML）。

1.四个核心思想：依赖注入，模块化，双向绑定，语义化标签

2.优点：简化代码，加快开发，不用像jQuery那样操作复杂的DOM代码，只需改变数据模型即可。

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

1、ng-app=" " 指令定义angularJS的使用范围，声明angularJS管理边界

2、ng-model="变量" 定义变量名；

3.AngularJS 表达式写在双大括号内：{{ expression }}，表达式把数据绑定到 HTML，将在表达式书写的位置"输出"数据。表达式可以包含文字、运算符和变量等

4.AngularJS 模块（Module） 定义了 AngularJS 应用。用ng-app指令指明了应用

定义方法：angular.module('自己命名', []);

5.AngularJS 控制器（Controller） 用于控制 AngularJS 应用。用ng-controller 指明了控制器。

控制方法：.controller('控制器名字', function($scope) { $scope.变量= "值";}); $scope应用程序指向的HTML元素

<!DOCTYPE html>
<html lang="en" ng-app="todolist"><!--ng-app指令声明angularJS管理边界，命名为todolist-->
<head lang="en">
    <meta charset="UTF-8">
    <title>todolist</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body style="padding: 10px;" ng-controller="TaskCtrl">
    <div class="input-group">
        <input ng-model="task" type="text" class="form-control"/>
        <span class="input-group-btn">
            <button class="btn btn-default" ng-click="add()">提交</button>
        </span>
    </div>
    <h4 ng-hide="tasks.length==0">任务列表</h4>
    <!--此处用ng-if="tasks.length>0"也可以，区别是ng-hide不论表达式成功与否，h4标签都会先在生成出来，但ng-if不会-->
    <ul class="list-group">
        <li ng-repeat="item in tasks track by $index" class="list-group-item">
            {{item}}
            <a ng-click="tasks.splice($index,1)">删除</a>
        </li>
    </ul>
</body>
<script src="js/angular.min.js"></script>
    <script>
        var ap = angular.module('todolist',[]);//在js中要声明todolist,使用angular.module
                ap.controller('TaskCtrl',function($scope){//需要控制angularJS内容，使用控制器.controller,控制器名字为TaskCtrl,需在HTML中绑定
                    //自带变量$scope
                    $scope.task="";//使用ng-model="task"。ng-model指令把元素值（比如输入域的值）绑定到应用程序
                    $scope.tasks=[];//使用ng-repeat="item in tasks"
                    $scope.add=function(){
                        $scope.tasks.push($scope.task);//将task中内容添加到tasks数组中，js数组中不允许添加相同内容,通过track by $index用下标解决
                    }
                })
    </script>
</html>

此例用anjularjs简单实现了一个todolist,具备增加删除功能。

其中用到的指令：ng-app，定义应用程序的根元素

ng-controller，定义应用的控制器对象

ng-model，绑定 HTML 控制器的值到应用数据

ng-repeat，ng-repeat="expression" 指令用于循环输出指定次数的 HTML 元素，集合必须是数组或对象，expression表达式定义了如何循环集合，此例通过数组下标

ng-if，ng-if 不同于ng-hide，其是从 DOM 中移除元素

ng-hide，隐藏或显示 HTML 元素

ng-click，定义元素被点击时的行为

栏目列表