AngularJS学习笔记（1）

最新推荐文章于 2022-12-09 16:14:24 发布

thystar

最新推荐文章于 2022-12-09 16:14:24 发布

阅读量463

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/47986257

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1. 简介：

参考：http://www.runoob.com/angularjs/angularjs-intro.html

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

实例：

<!DOCTYPE html>
<html>

<head lang="en" >
    <meta charset="UTF-8">
    <title></title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">

</head>
<!--声明管理边界-->
<body style="padding:10px;" ng-app="todoList" 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>
    <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 type="text/javascript">
    var app = angular.module('todoList',[]);
    app.controller('TaskCtrl', function($scope) {
        $scope.task="";
        $scope.tasks=[];
        $scope.add = function () {
            $scope.tasks.push($scope.task)
        }
    });
</script>

</html>