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

最新推荐文章于 2024-01-27 09:34:11 发布

御灵龍

最新推荐文章于 2024-01-27 09:34:11 发布

阅读量167

点赞数

分类专栏：框架前端文章标签： $scope 参数绑定entity

本文链接：https://blog.csdn.net/qq_33852347/article/details/86558269

版权

框架同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

一、 AngularJS

是一款前端框架！
核心： MVC，模块化，自动双向数据绑定，依赖注入等。

AngularJS的四大特征

MVC模式

在这里插入图片描述

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

双向绑定

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

依赖注入

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

模块化设计

高内聚低耦合

官方提供的模块：ng,ngRoute,ngAnimate
用户自定义的模块： 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”,[]);

参数一：模块名称
参数二： 依赖的其他模块注意：如果没有依赖其他模块，也需要制定空数组

app.controller(“myctrl”,function ($scope){ …}

参数一：控制器名称
参数二：控制器要做的事情

<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参数绑定：

使用ng-model来绑定参数
传递参数必须和接收参数实体一一对象，否则不能接受参数。

对应关系：ng-model="entity.username"

entity对应后台接受参数对象
username对象后台接受参数对象中属性。

2.2 $scope作用域

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

$scope作用域的特点：

绑定在$scope作用域中的变量及对象，才能在html中调用使用。
在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
评论
D55-项目一（02）AngularJS（$scope,参数绑定）和品牌列表展示

AngularJS是一款前端框架！核心： MVC，模块化，自动双向数据绑定，依赖注入等。AngularJS的四大特征MVC模式Model：数据，其实就是angular变量{$scope.XXX}View: 数据的呈现，html+directive(指令)Controller: 操作数据，就是function，数据的增删改查。双向绑定声明式编程：用于构建用户界面以及...
复制链接

扫一扫