angularJS 的简单使用

因为项目需要最近在看 angularJS。angularJS 是一个前端的 JavaScript 框架，AngularJS 使开发现单一页面应用程序（SPAs：Single Page Applications）变得更加容易：

• AngularJS 把应用程序数据绑定到 HTML 元素。
• AngularJS 可以克隆和重复 HTML 元素。
• AngularJS 可以隐藏和显示 HTML 元素。
• AngularJS 可以在 HTML 元素"背后"添加代码。
• AngularJS 支持输入验证。

如果要开发的是单页应用，AngularJS是不错的选择。类似Gmail、Google Docs、Twitter和Facebook这样的应用。但是如果像游戏开发之类对DOM进行大量操纵或者单纯需要极高运行速度的应用，AngularJS就不是一个很好的选择了。

angularJS 的指令

AngularJS通过ng-directives 扩展了 HTML，指令以ng-为前缀,如：

• ng-app 指令：定义一个 AngularJS 应用程序。
• ng-controller 指令定义了应用程序控制器。
• ng-model 指令：把元素值（比如输入域的值）绑定到应用程序。
• ng-bind 指令：把应用程序数据绑定到 HTML 视图。
• ng-init 指令：初始化应用程序数据。
• ng-hide 指令：隐藏或显示 HTML 元素。
• ng-form指令： HTML 表单继承控制器表单。
  angularJS的全部指令

angularJS 的表达式

AngularJS 表达式写在双大括号内：{{ expression }}，可以把数据绑定到 HTML（这与 ng-bind 指令有异曲同工之妙），还可以在表达式书写的位置"输出"数据。同JavaScript 表达式一样，AngularJS 表达式可以包含文字、运算符和变量。
如： {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
实例代码：

    

        名:  

        姓:  

        

        姓名: {{firstName + " " + lastName}}

    
    

运行结果：

实例运行结果.PNG

应用解析：

• 1.由 ng-app 定义AngularJS 应用程序，应用程序在
  内运行。
• 2.ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器，控制器控制着应用程序的业务逻辑。
• 3.myCtrl 函数是一个 JavaScript 函数。
• 4.AngularJS 使用$scope 对象来调用控制器。
• 5.在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
• 6.控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
• 7.控制器在作用域中创建了两个属性 (firstName 和 lastName)。
• 8.ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

简单应用

下面就写一个简单的小应用，运行结果如下：

目标代码运行结果.PNG

主要功能为实现一个列表，显示一些个人信息，可以增删改，第一数列代表操作的行数，一次之操作一行。数据保存在js 的内存中，没有数据库的交互。
首先要在html的 标签中导入使用的库( Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架，提供了许多精美的界面以及组件，使用非常方便，并且是开源的)：

下面是布局：
布局分为3部分：

• 1 显示列表的界面；
• 2 显示添加数据的界面；
• 3 显示修改数据的界面；

        

             
            

                添加  
                删除  
                修改  
            
         
            

                

                    

                        
select
                        
id
                        
name
                        
gender
                        
age
                        
birth
                        
hobby
                        
team
                    
                
                


                    

                        

                        
{{$index+1}}

                        

                        

                        

                        

                        

                        

                    
                    

                        
没有查询到匹配的数据信息
                    
               
                
            
                 
            

                  
                

                    

                  
                        

                            
                                
                            
                            
添加信息
                        
                  
                        

                            姓名：
                  
                            

                            性别：
                            
                            男
                            女
                            其他
                        
                        年龄：
                        

                        生日：
                        

                        爱好：
                        

                        组别：
                        

                    

                    

                                            

                        关闭

                        确定
                    
                
            
        
          
        

            

                

                    

                        
                            
                        
                        
修改信息
                    
                    

                        姓名：

                        

                        性别：
                        
                            男
                            女
                            其他
                        

                        年龄：
                        

                        生日：
                        

                        爱好：
                        

                        组别：
                        

                    
                    

                        关闭
                        确定
                    
                
            
        
    

以下是angularJS的主要代码：

(function(){
    'use strict';
    var myApp = angular.module('myApp', []);
          //声明控制器“myCtrl”
    myApp.controller("myCtrl",function($scope, $http){
                //保持数据的数组对象
        $scope.datas=[
        {'name':"王1",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
        {'name':"王2",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
        {'name':"王3",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
        {'name':"王4",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
        {'name':"王5",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
        {'name':"王6",'gener':"男",'age':28,'birthday':"2012-02-01",'hobby':"tennis,football",'team':"team2"}
        ];
        $scope.index=$scope.datas.length-1;
    //显示添加画面
    $scope.showAddItemModal = function(){
                //通过标签的 id 找到前面布局中隐藏的添加画面，并显示出来
        $('#add_item_modal').modal('show');
    }
    //添加数据
    $scope.addItem = function(){
        var i = $scope.datas.length;
        $scope.datas[i]={
                      //通过$scope获取html页面中提交的表单中的数据
            name:$scope.add_name,
            gener:$scope.add_gener,
            age:$scope.add_age,
            birthday:$scope.add_birthday,
            hobby:$scope.add_hobby,
            team:$scope.add_team,
        };
        $('#add_item_modal').modal('hide');
    };
    //显示修改画面
    $scope.showEditItemModal = function(){
        if(isNaN($scope.selected)){
            alert("请选择要修改的项！")
        }else{
            $('#edit_item_modal').modal('show');
//此处的$scope.edit_name会将数据保存传给html界面，并可以通过表达式直接获取参数
            $scope.edit_name = $scope.datas[$scope.selected].name;
            $scope.edit_gener = $scope.datas[$scope.selected].gener;
            $scope.edit_age = $scope.datas[$scope.selected].age;
            $scope.edit_birthday = $scope.datas[$scope.selected].birthday;
            $scope.edit_hobby = $scope.datas[$scope.selected].hobby;
            $scope.edit_team = $scope.datas[$scope.selected].team;
        }
    };
      //修改数据函数
    $scope.modifyItem = function(){
        $scope.datas[$scope.selected]={
            name:$scope.edit_name,
//直接使用$scope.edit_gener 即可获取html界面上的数据
            gener:$scope.edit_gener,
            age:$scope.edit_age,
            birthday:$scope.edit_birthday,
            hobby:$scope.edit_hobby,
            team:$scope.edit_team,
        };
        $('#edit_item_modal').modal('hide');
    };
//删除所选项数据
    $scope.delItem = function(){
        if(isNaN($scope.selected) ){
            alert("请选择要删除的项!");
        }else{
            if(confirm("是否删除?") ){
                $scope.datas.splice($scope.selected,1);
            }
        }
    };
});

}());

总结

• angularJS 的功能和很强大，这里只是使用的angularJS的双向数据绑定数据，它还有许多其他的优点，如模板，路由，模块化，服务，过滤器，依赖注入等等功能，以后还需要继续学习；
• 示例中用到了许多bootstrap的东西，bootstrap也是一个功能很强大的前端框架，他提供了丰富的布局模版以及精美的组件，使用起来也很方便，还是开源的。以后有机会可以单独写一篇文章。
• 由于项目需要，所以接触了一些关于前端的知识，现在也只是会做一些简单的界面，有很多原理还是不懂，将来想打算弄一个自己的网站，总会用的到。