VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript >
  • JavaScript教程之angular.js-1初识

初识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>
复制代码

此例用anjularjs简单实现了一个todolist,具备增加删除功能。

其中用到的指令:ng-app,定义应用程序的根元素

ng-controller,定义应用的控制器对象

ng-model,绑定 HTML 控制器的值到应用数据

ng-repeat,ng-repeat="expression" 指令用于循环输出指定次数的 HTML 元素,集合必须是数组或对象,expression表达式定义了如何循环集合,此例通过数组下标

ng-if,ng-if 不同于ng-hide,其是从 DOM 中移除元素

ng-hide,隐藏或显示 HTML 元素

ng-click,定义元素被点击时的行为


相关教程