AngularJs

最新推荐文章于 2020-07-18 20:10:08 发布

QuietHRH

最新推荐文章于 2020-07-18 20:10:08 发布

阅读量229

点赞数

分类专栏：项目技术文章标签： mvc

本文链接：https://blog.csdn.net/QuietHRH/article/details/82987955

版权

项目技术专栏收录该内容

30 篇文章 0 订阅

订阅专栏

xmind

1 angularJs

1 AngularJS四大特征

1.1.1 MVC 模式

Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。

Model:数据,其实就是angular变量($scope.XX);

View: 数据的呈现,Html+Directive(指令);

Controller:操作数据,就是function,数据的增删改查;

理解 $scope：

** $s c o p e * * 的使用贯穿整个 A n g u l a r J S A p p 应用, 它与数据模型相关联, 同时也是表达式执行的上下文 . 有了 * *$ scope** 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $s c o p e * *, 同样的 * *$ scope发生改变时也会立刻重新渲染视图.

$rootScope 全局变量

$scope 局部变量

1.1.2双向绑定

AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。

1.1.3依赖注入

依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象，都可以根据形参名称实现DI.

1.1.4模块化设计

高内聚低耦合法则

1)官方提供的模块 ng、ngRoute、ngAnimate

2)用户自定义的模块 angular.module(‘模块名’,[ ])

2 指令

ng-app 指令作用是告诉子元素以下的指令是归angularJs的,angularJs会识别的

ng-app 指令定义了 AngularJS 应用程序的根元素，也就是起作用的范围

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。

ng-init 指令我们如果希望有些变量具有初始值，可以使用ng-init指令来对变量初始化，也可以在页面加载后初始化方法，相当于onload事件。

ng-controller 指令用于指定所使用的控制器。

ng-click 指令是最常用的单击事件指令，再点击时触发控制器的某个方法

ng-repeat 指令用于循环数组变量。

3 服务

理解 $http:

封装了AJAX

<!--导包-->
<script src="../plugins/angularjs/angular.min.js"></script>
<!--分页js-->
<script src="../plugins/angularjs/pagination.js"></script>
<!--分页css-->
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

		var app = angular.module("jj",[]);
		app.controller("brandController",function ($scope,$http) {
            //查询所有的品牌列表
			$scope.findAll=function () {
				$http.get('../brand/findAll.do').success(
				    function (response) {
						$scope.list=response;
                    }
				)
            }
        })

分页代码

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="../plugins/angularjs/angular.min.js"></script>
	<script src="../plugins/angularjs/pagination.js"></script>

	<script>
		var app = angular.module("jj",['pagination']);
		app.controller("brandController",function ($scope,$http) {
            //重新加载列表
            $scope.reloadList=function () {
                $scope.findPage($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.findPage=function (page,rows) {
                $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
                    function (response) {
                        $scope.list=response.rows;
                        $scope.paginationConf.totalItems=response.total;
                    }
                )
            }

            //添加品牌
			$scope.save=function () {
				$http.post('../brand/add.do',$scope.entity).success(
				    function (response){
						if(response.success){
						    $scope.reloadList();
						}else{
						    alert(response.message);
						}
                    }
				)
            }
        })
	</script>
    
</head>

<body  ng-app="jj" ng-controller="brandController" >
    <table id="dataList" >
        <thead>
            <tr>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>									     
                <th class="sorting">品牌首字母</th>									   
            </tr>
        </thead>
        <tbody ng-repeat="entity in list">
            <tr>		                              
                <td>{{entity.id}}</td>
                <td>{{entity.name}}</td>
                <td>{{entity.firstChar}}</td>
                <td class="text-center"></td>
            </tr>
         </tbody>
    </table>
    <tm-pagination conf="paginationConf"></tm-pagination>
</body>

	@RequestMapping("/findPage")
    public PageResult findPage(int page,int rows){
        return brandService.findPage(page,rows);
    }

	@Override
    public PageResult findPage(int pageNum, int pageSize) {
        PageHelper.startPage(pageNum,pageSize);
        Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);
        return new PageResult(page.getTotal(),page.getResult());
    }

QuietHRH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs

1 angularJs1 AngularJS四大特征1.1.1 MVC 模式Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。Model:数据,其实就是angular...
复制链接

扫一扫