AngularJS入门的一个web开发实例

最新推荐文章于 2021-06-30 03:37:00 发布

锋芒藏剑

最新推荐文章于 2021-06-30 03:37:00 发布

阅读量558

点赞数

分类专栏： AngularJS 文章标签： angularjs web开发实例

本文链接：https://blog.csdn.net/he532622747/article/details/51754513

版权

AngularJS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

AngularJS入门的一个web开发实例

首先了解一下AngularJS，AngularJS它使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。
web实例：
下面是在一个div的input里输入内容，然后提交到表单里面去，运用到AngularJS里的绑定事件。并且在没有内容时，表单不显示，运用了AngularJS的判断。

<!DOCTYPE html>
<!--在html里声明ng-app是来说明AngularJS管理的边界-->
<html lang="en" ng-app="angularJs">
<head>
    <meta charset="UTF-8">
    <title>AngularJs</title>
    <!--导入这个包只是为了样式好看-->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<!--绑定了下面的controller-->
<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>
    <!--ng-if是后面的内容如果成立，则会运行，如果不成立，则包括<h4>也不会打印出来-->
    <!--另一种的判断方法是用ng-hide="tasks.length==0"这个表示的是长度为0则进行隐藏，但是这个还是会打印出<h4>-->
    <h4 ng-if="tasks.length>0">任务列表</h4>
    <ul class="list-group">
        <!--item相当于是在tasks里的循环变量，加上track by $index是为了让添加的内容可以重复-->
        <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>
<!--要运用AngularJS就必须要导入js文件-->
<script src="../static/lib/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
    /*声明了一个控制器，名字就是TaskCtrl，一定要在上面的代码的一个片段里绑定一下
    *$scope为自带的变量，$一定不能省略 */
    angular.module('angularJs',[])
            .controller('TaskCtrl',function ($scope) {
                /*$scope.task是与上面input里的task进行绑定*/
                $scope.task="";
                $scope.tasks=[];
                $scope.add=function () {
                    $scope.tasks.push($scope.task);
                }
            })
</script>
</html>