D55-项目一(02)AngularJS($scope,参数绑定)和品牌列表展示

一、 AngularJS

  • 是一款前端框架!
  • 核心: MVC,模块化,自动双向数据绑定,依赖注入等。

AngularJS的四大特征

MVC模式

在这里插入图片描述

  • Model: 数据,其实就是angular变量{$scope.XXX}
  • View: 数据的呈现,html+directive(指令)
  • Controller: 操作数据,就是function,数据的增删改查。

双向绑定

  • 声明式编程: 用于构建用户界面以及编写软件构建
  • 指令式编程: 表示业务逻辑。

依赖注入

  • 对象创建时,无需手动创建。由框架自动创建并注入进来。

模块化设计

  • 高内聚低耦合
  1. 官方提供的模块:ng,ngRoute,ngAnimate
  2. 用户自定义的模块: angular.model(‘模块名’,[ ])

AngularJS入门

表达式

  • ng-app: 声明模块的指令 作用:定义angularjs的作用域
  • {{}} 表达式 作用:用于获取模型数据的值,并展示到页面上
 <!--引入angularjs资源 在head部分-->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<body>
<!--声明模块的指令 作用:定义angularjs的作用域-->
<div ng-app>
    <!--{{}} 表达式 作用:用于获取模型数据的值,并展示到页面上-->
    {{100+100}}
</div>
</body>
  • 结果:
    计算结果

数据的双向绑定

  • ** ng-model 绑定模型变量的指令**
<body ng-app>
<!--  ng-model 绑定模型变量的指令-->
请输入:<input type="text" ng-model="name" ><br>

<!-- {{}}表达式  作用:用户获取模型数据的值,展示在页面上 -->
输入的内容:{{name}}
</body>
  • 结果:
    输入什么,下面‘输入的内容’就展示什么
    在这里插入图片描述

控制器

  • var app = angular.module(“myapp”,[]);

  1. 参数一:模块名称
  2. 参数二: 依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
  • app.controller(“myctrl”,function ($scope){ …}

  1. 参数一:控制器名称
  2. 参数二:控制器要做的事情
<head>
    <meta charset="UTF-8">
    <title>控制器定义以及mvc模式和模块化开发演示</title>
    <!---->
    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>

    <script type="text/javascript">
        //定义模块  参数一:模块名称 参数二:依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
        var app = angular.module("myapp",[]);
        //定义控制器 基于模块定义控制器
        //参数一:控制器名称 参数二:控制器要做的事情
        //$scope 理解为全局的作用域对象  作用:用于js与html的数据交换桥梁
        app.controller("myctrl",function ($scope) {
            //为name模型变量初始化赋值
            $scope.name = "张三";
        });
    </script>
</head>
<!--声明模块的指定,作用:定义angularjs的作用范围-->
<body ng-app="myapp" ng-controller="myctrl">
<!--  ng-model 绑定模型变量的指令-->
请输入:<input type="text" ng-model="name"><br>
<!-- {{}}表达式  作用:用户获取模型数据的值,展示在页面上 -->
输入的内容:{{name}}
</body>
  • 结果:
    结果

初始化指令

  • ng-init :初始化指令
  • ng-model 绑定模型变量的指令
<head>
    <meta charset="UTF-8">
    <title>demo之初始化指令</title>

    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>

    <script type="text/javascript">
        //定义模块  参数一:模块名称 参数二:依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
        var app = angular.module("myapp",[]);
        //定义控制器 基于模块定义控制器
        //参数一:控制器名称 参数二:控制器要做的事情
        //$scope 理解为全局的作用域对象  作用:用于js与html的数据交换桥梁
        app.controller("myctrl",function ($scope) {
        });
    </script>
</head>
<!--声明模块的指定,作用:定义angularjs的作用范围-->
<body ng-app="myapp" ng-controller="myctrl" ng-init="name='李四'">
<!--  ng-model 绑定模型变量的指令-->
请输入:<input type="text" ng-model="name"><br>

<!-- {{}}表达式  作用:用户获取模型数据的值,展示在页面上 -->
输入的内容:{{name}}

</body>

在这里插入图片描述

事件指令

  • ng-click
  • ng-model 绑定模型变量的指令
//在控制器中添加如下方法
 //相加的方法
$scope.add=function () {
   //parseInt将数字字符串解析为number
    $scope.z=parseInt($scope.x)+parseInt($scope.y);
}
// 在声明模块中添加如下代码
<!--  ng-model 绑定模型变量的指令-->
请输入x:<input type="text" ng-model="x"><br>
请输入y:<input type="text" ng-model="y"><br>
<button ng-click="add()">相加</button>
<!-- {{}}表达式  作用:用户获取模型数据的值,展示在页面上 -->
输入的内容:{{z}}

遍历指令 ng-repeat

  • 还有ng-option遍历指令
<head>
    <meta charset="UTF-8">
    <title>遍历对象数组</title>

    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>

    <script type="text/javascript">
        //定义模块  参数一:模块名称 参数二:依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
        var app = angular.module("myapp",[]);
        //定义控制器 基于模块定义控制器
        //参数一:控制器名称 参数二:控制器要做的事情
        //$scope 理解为全局的作用域对象  作用:用于js与html的数据交换桥梁
        app.controller("myctrl",function ($scope) {
          //定义对象数组
            //json格式数组:[] json格式对象:{}
            $scope.list=[
                {name:"孙悟空",shuxue:"100",yuwen:"20"},
                {name:"猪八戒",shuxue:"20",yuwen:"200"},
                {name:"老三",shuxue:"30",yuwen:"201"},
            ];
        });

    </script>
</head>
<!--声明模块的指定,作用:定义angularjs的作用范围-->
<body ng-app="myapp" ng-controller="myctrl">
<table>
    <tr>
        <th>姓名</th>
        <th>数学</th>
        <th>语文</th>
    </tr>
    <!-- ng-repeat 遍历指令-->
    <tr ng-repeat="stu in list">
        <td>{{stu.name}}</td>
        <td>{{stu.shuxue}}</td>
        <td>{{stu.yuwen}}</td>
    </tr>
</table>

</body>

在这里插入图片描述

内置服务 $http

  • $http: 相当于发送ajax异步请求。
<head>
    <meta charset="UTF-8">
    <title>内置服务$http</title>
    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
    <script type="text/javascript">
        //定义模块  参数一:模块名称 参数二:依赖的其他模块 注意:如果没有依赖其他模块,也需要制定空数组
        var app = angular.module("myapp",[]);
        //定义控制器 基于模块定义控制器
        //参数一:控制器名称 参数二:控制器要做的事情
        //$scope 理解为全局的作用域对象  作用:用于js与html的数据交换桥梁
        app.controller("myctrl",function ($scope,$http) {
          //定义对象数组
            //json格式数组:[] json格式对象:{}
            $scope.findAll= function () {
                //success 请求成功后的回调函数
                $http.get("../brand/findAll.do").success(function (response) {
                    $scope.list=response;
                })
            }
        });
    </script>
</head>
<!--声明模块的指定,作用:定义angularjs的作用范围-->
<body ng-app="myapp" ng-controller="myctrl" ng-init="findAll()">
<table>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>首字母</th>
    </tr>
    <!-- ng-repeat 遍历指令-->
    <tr ng-repeat="brand in list">
        <td>{{brand.id}}</td>
        <td>{{brand.name}}</td>
        <td>{{brand.firstChar}}</td>
    </tr>
</table>
</body>

二、品牌列表的展示

2.1 参数绑定原理

  • 传统参数绑定: 从页面把参数直接传递给后台JavaBean,然后实现保存。
  • AngularJs参数绑定:
  1. 使用ng-model来绑定参数
  2. 传递参数必须和接收参数实体一一对象,否则不能接受参数。
  • 对应关系:ng-model="entity.username"
  1. entity对应后台接受参数对象
  2. username对象后台接受参数对象中属性。

2.2 $scope作用域

在这里插入图片描述
$scope作用域可以绑定方法,变量,对象等。

  • $scope作用域的特点:
  1. 绑定在$scope作用域中的变量及对象,才能在html中调用使用。
  2. 在angularjs指令调用方法中,此方法必须绑定在$scope作用域中。

2.3 查询品牌列表(基于pageHelper的分页查询)

  • 后台代码实现
    • BrandController
@RestController
@RequestMapping("/brand")
public class BrandController {
    // @Reference 基于dubbo注解,去注册中心引用(查找)服务
    @Reference
    private BrandService brandService;

    /**
     * 001
     * 查询所有品牌列表
     *
     * @return
     */
    @RequestMapping("/findAll")
    public List<TbBrand> findAll() {
        return brandService.findAll();
    }
   //分页查询
@RequestMapping("/findPage")
    public PageResult findPage(Integer pageNum, Integer pageSize) {
        return brandService.findPage(pageNum, pageSize);
    }

}
    • BrandServiceImpl
@Service
@Transactional
public class BrandServiceImpl implements BrandService{

    @Autowired
    private TbBrandMapper brandMapper;

    @Override
    public List<TbBrand> findAll() {
        return brandMapper.selectByExample(null);
    }

@Override
    public PageResult findPage(Integer pageNum, Integer pageSize) {
        //基于 pageHelper 实现分页查询 设置分页查询   (pageNum-1)*pageSize
        PageHelper.startPage(pageNum,pageSize);
        com.github.pagehelper.Page<TbBrand> page = (com.github.pagehelper.Page<TbBrand>) brandMapper.selectByExample(null);
        return new PageResult(page.getTotal(),page.getResult());
    }



 }

2.4 品牌列表的条件查询

  • 后台代码
    • BrandController
/**
     * 003
     * 按条件分页查询
     */
    @RequestMapping("/search")
    public PageResult seach(@RequestBody TbBrand brand, Integer pageNum, Integer pageSize) {
        return brandService.search(brand,pageNum,pageSize);
    }
    • BrandServiceImpl
 @Override
    public PageResult search(TbBrand brand, Integer pageNum, Integer pageSize) {
        //分页条件查询
        //设置分页条件
        PageHelper.startPage(pageNum,pageSize);

        //设置查询条件  规格名称模糊查询
        TbBrandExample example = new TbBrandExample();
        if(brand!=null){
            //获取品牌名称查询条件
            String brandName = brand.getName();
            //构建封装查询条件对象
            TbBrandExample.Criteria criteria = example.createCriteria();
            if(brandName!=null && !"".equals(brandName)){
                //说明输入了查询条件
                criteria.andNameLike("%"+brandName+"%");
            }

            //获取首字母,等值查询
            String firstChar = brand.getFirstChar();
            if(firstChar!=null && !"".equals(firstChar)){
                //说明输入了查询条件
                criteria.andFirstCharEqualTo(firstChar);
            }
        }
        com.github.pagehelper.Page<TbBrand> page = (com.github.pagehelper.Page<TbBrand>) brandMapper.selectByExample(example);

        return new PageResult(page.getTotal(),page.getResult());
    }

前台页面展示

  • 引入资源文件
<!--引入angularjs资源文件-->
	<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>

	<!--引入分页插件资源-->
	<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
	<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
  • 查询列表
//定义模块  参数一:模块名称  参数二:依赖的其他模块,注意:如果没有依赖其他模块,也需要指定空数组
        var app =angular.module("pinyougou",["pagination"]);
        //定义控制器  基于模块定义控制器
        //参数一:控制器名称  参数二:控制器要做的事情
        //$scope 理解为全局的作用域对象  作用:用于js与html数据交换的桥梁
        app.controller("brandController",function ($scope,$http) {
            //定义对象数组
            // json格式数组:[] json格式对象:{}
            //查询所有品牌列表
            $scope.findAll=function () {
                //alert(123)
                //success 请求成功后的回调函数
                //http://localhost:8081/brand/findAll.do
                $http.get("../brand/findAll.do").success(function (response) {
                    $scope.list=response;
                })
            }
            //分页配置
            $scope.paginationConf = {
                currentPage:1,  				//当前页
                totalItems:10,					//总记录数
                itemsPerPage:10,				//每页记录数
                perPageOptions:[10,20,30,40,50], //分页选项,下拉选择一页多少条记录
                onChange:function(){			//页面变更后触发的方法
                    $scope.reloadList();		//启动就会调用分页组件
                }
            };
            $scope.reloadList=function () {
                $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
            }
            //请求后端,完成分页查询
			$scope.findPage=function (pageNum,pageSize) {
				$http.get("../brand/findPage.do?pageNum="+pageNum+"&pageSize="+pageSize).success(function (response) {
					//赋值满足条件的总记录数
                    $scope.paginationConf.totalItems=response.total;
                    //当前页结果集
					$scope.list=response.rows;
                })
            }
 }           
  • 引入范围
    在这里插入图片描述
  • 循环遍历
<tr ng-repeat="pojo in list">
	 <td><input  type="checkbox"  ng-checked="isSelected(pojo.id)"></td>
	 <td>{{pojo.id}}</td>
	 <td>{{pojo.name}}</td>
	<td>{{pojo.firstChar}}</td>
</tr>
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论

打赏作者

御灵龍

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值