《中级前端5.1》AngularJS 简介——核心思想,demo

AngularJS是为了克服HTML在构建应用上的不足而设计的。AngularJS主要考虑的是构建CRUD的WEB应用。
AngularJS是一个比较完善的前端MVVM框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能。

 

AngularJS 简介

AngularJS的核心思想来自于后端语言，是一种比较前卫的设计模式。

优点在于“依赖注入”和“双向绑定”可以不用写大量代码就可以实现非常复杂的功能；可以不用在像jQuery那样操作复杂的DOM，只需要改变数据模型就行，极大加快了开发。

 

 

第一个 AngularJS Web 应用

本课时通过讲解 AngularJS 框架的搭建、双向绑定的使用，编写第一个 AngularJS Web 应用程序，给大家一个对 AngularJS 的整体认知。

<!DOCTYPE html>
<html ng-app="todoList">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <title>todoList</title>
</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 type="text/javascript" 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>

 

页面效果：

引用了angular1.3.6版本，和bootstrap样式

posted @ 2016-01-14 22:23  暖风叔叔  阅读(1087)  评论(0)    收藏  举报