一、 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>

D55-項目一（02）AngularJS（$scope,參數綁定）和品牌列表展示

一、 AngularJS

AngularJS的四大特徵

MVC模式

雙向綁定

依賴注入

模塊化設計

AngularJS入門

表達式

數據的雙向綁定

控制器

初始化指令

事件指令

遍歷指令 ng-repeat

內置服務 $http

二、品牌列表的展示

2.1 參數綁定原理

2.2 $scope作用域

2.3 查詢品牌列表(基於pageHelper的分頁查詢)

2.4 品牌列表的條件查詢

前臺頁面展示

七月[jsp,sql]

將圖片導出到excel表格中

D55-項目一（02）AngularJS（$scope,參數綁定）和品牌列表展示

八月【sql】

Linux查詢、清除常用操作

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結