angular基础知识以及样例demo

Angular 基础知识以及demo样例

1. 四大特征

这些特点同服务段springmvc 完全一致
1. mvc 设计模式
2. 双向绑定
3. 依赖注入
4. 模块化设计

2. 初始化指令，双向绑定

<!--angular 在body内部都会被识别-->
<body ng-app ng-init="mycore='100'"> 

    <!--双向绑定 model 代表数据-->

    你考试的总分是： <input ng-model="mycore" /> <br />

    {{mycore}}分，还需要配继续努力
</body>

3. 控制器

<head>
    <Meta charset="UTF-8">
    <script src="angular/angular.min.js"></script>
    <script src="angular/jquery-2.2.3.min.js"></script>
    <title></title>  


    <script>
        /*定义了一个模块*/
        var app = angular.module('mycore',[])

        /*模块控制器 $scope model view 直接的媒介*/
        app.controller('myController',function($scope){

            $scope.add=function(){

                return parseInt($scope.yuwen)+parseInt($scope.shuxue);
            }
        });
    </script>


</head>

<!--angular 在body内部都会被识别-->
<body ng-app="mycore" ng-controller="myController" > 


    语文分数:<input ng-model="yuwen" /> <br />
    数学分数:<input ng-model="shuxue" /> <br /> 

    总共分数： {{add()}}  

</body>

上图代码变量个人理解
- 定义angular模块为app
- app.controller ( 控制器名称，function(&scope)) 在控制器的内部可以定义一堆方法
- $scope.add 定义一个名称为add方法
- $scope 相当于是一个类
  - $scope.yuwen 相当于类中的成员变量变
  - $scope.add 相当于类中的方法名臣
  - function(&scope) 依赖注册这个实体

4. 循环数组-基本数据类型

<!DOCTYPE html>
<html>
<head>
    <Meta charset="UTF-8">
    <script src="angular/angular.min.js"></script>
    <title></title>     
    <script>            
        var app = angular.module('mycore',[]);

        app.controller("mycontroller",function($scope){

            //$scope.list=[99,1,11,9,23,99,3]; /*数据不可以重复，内部存储同时int string类型*/

            $scope.pp=["北京","你","好",22,66,11];  //定义在控制器中
        })          
    </script>               
</head>

<!--angular 在body内部都会被识别-->
<body ng-app="mycore" ng-controller="mycontroller" ng-init="findAll()"> 

    <table>         
        <tr> <td>数学</td></tr>           
        <tr ng-repeat="item in pp">
            <td>{{item}}</td>
        </tr>           
    </table>
</html>

$scope.pp=[“北京”,”你”,”好”,11]; //定义在控制器中
ng-repeat=”item in pp” // item代表每一个成员变量，{{item}}

5. 循环数组对象-基本数据类型

内部的数据类型类似于字符串，最后一个对象的数据“，” 不用加， name属性没有加双引号
```
$scope.list=[          
    {name:'张三',shuxue:100,yuwen:93},{name:'张三',{name:'王五',shuxue:77,yuwen:56}
]
```

遍历获取集合中对象的属性值，每个item都代表是一个对象

<tr ng-repeat="item in list">

    <td>{{item.name}}</td>
    <td>{{item.shuxue}}</td>
    <td>{{item.yuwen}}</td>
</tr>

6. 内置服务

其实这个内置服务就是在angular中封装了aJax，从而实现同服务端的交互

var app = angular.module("app",[]);

        //$scope,$http同时都被依赖注入，控制器内部的所有方法都可以调用
        app.controller("mycontroller",function($scope,$http){

            $scope.findAll=function(){
                //服务端的内部交互
                $http.get('data.json').success(
                    //如果response返回的json字符串，list内部存储的数组对象
                    //如果response 返回的是一个object，list就是一个对象
                    //如果response 返回的是基本数据类型， list就是一个基本数据类型
                    function(response){

                        $scope.list=response;
                    }
                )
            }
 })

7. 自定义服务

自定义服务就是将控制层中内置服务提取到service层，可以做到高内聚，低偶合，可以理解为一个抽取的过程，在control层调用服务的时候别忘记，进行注入，最简单的理解就是让多个control层去调用相同的服务

var app = angular.module("app",[]);

        app.service('myservice',function($http){
            //内置服务注册的时候要用this
            this.find=function(){

                return $http.get('data.json');
            }
        })

                                            //服务不要忘记注入
        app.controller("mycontroller",myservice){
            //控制层定义方法的时候要用$scope
            $scope.findALL=function(){

                myservice.find().success(

                    function(response){

                        alert("response")
                        $scope.list=response;
                    }
                )
            }
        })

8. 控制器继承

就是将控制层内相同的代码进行向上抽取

第一步建立父控制器,这些控制器的内容在其他控制层也被用到，因此向上抽取而成立

//基本控制层
app.controller('baseController',function($scope){
    //重新加载列表 数据
    $scope.reloadList=function(){
        //切换页码
        $scope.search( $scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
    }
    //分页控件配置
    $scope.paginationConf = {
        currentPage: 1,totalItems: 10,itemsPerPage: 10,perPageOptions: [10,20,30,40,50],onChange: function(){
        $scope.reloadList();//重新加载
    }
    };
    $scope.selectIds=[];//选中的 ID 集合
    //更新复选
    $scope.updateSelection = function($event,id) {

    if($event.target.checked){//如果是被选中,则增加到数组

        $scope.selectIds.push( id);

    }else{
    var idx = $scope.selectIds.indexOf(id);

        $scope.selectIds.splice(idx,1);//删除
    }
    }
})

第二步修改子类控制器

//1.这个控制器需要注入
app.controller('brandController',$controller,brandService){
    //2. 就这么个格式集成父类控制器
    $controller('baseController',{$scope:$scope});//继承

    //读取列表数据绑定到表单中
    $scope.findAll=function(){

    brandService.findAll().success(

    function(response){

        $scope.list=response;
    }
    );
}

2017.9.23 增加 内容

判断逻辑

在前端代码增加判断的业务逻辑，当等于3时候不会显示下面的 button内容

在ng-click中执行方法用“ ； ”隔开

<span ng-if="grade!=3">

<button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(entity)">查询下级</button>

</span>

下拉选择框的实现

*ng-options 属性可以在表达式中使用数组或对象来自动生成一个 select 中的 option 列表。 ng-options 与 ng-repeat 很相似，很多时候可以用 ng-repeat 来代替 ng-options。但是 ng-options 提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。

<select class="form-control" 
        ng-model="entity.goods.category1Id" 
        ng-options="item.id as item.name for item in itemCat1List">
</select>

监控变量值的变化

$watch 方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。

$scope.$watch('entity.goods.category1Id',function(newValue,oldValue) {
                                                 //oldValue 未变化的值
                                                 //newValue 变化后的值
    //根据选择的值，查询二级分类

    itemCatService.findByParentId(newValue).success(

    function(response){

    $scope.itemCat2List=response;

    }
   );
    });