首页 > > 网页制作 > Javascript >

angular.js-1初识

2018-06-24 02:10:21来源：未知阅读 ()

初识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>