angularjs示例

来源：互联网发布：悟空遥控器有线网络编辑：程序博客网时间：2024/05/19 16:07

1.Angularjs的四个核心思想

依赖注入

模块化

双向绑定

语义化标签

2.示例

建立如下工程目录：

|-angularjs web

|-css

|-foundation.min.css

|-js

|-angular.min.js

|-index.html

index.html的内容如下：

<!DOCTYPE html><html lang="en" ng-app="todoList"><head>    <meta charset="UTF-8">    <title>todoList</title>    <link rel="stylesheet" href="css/foundation.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-if="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">    angular.module('todoList',[])    .controller('TaskCtrl',function ($scope) {        $scope.task = "";        $scope.tasks = [];        $scope.add = function () {            $scope.tasks.push($scope.task);        }    });</script></html>

0 0