angularJS基础使用(一)

时间 2019-11-09

原文原文链接

低烧还有想感冒的难受,就很少说什么了,甚是烦躁javascript

没有建mvc结构js文件(主要是为了方便,不用切换文件),不过在script中已经分层编写js了,只须要将相应的base,controller,service保存到相应创建的js文件,而后在html中引入便可(先引入父级js,再引入子级js,先引入service.js,再引入controllerjs)css

若是不习惯看三元,都有相应的通常逻辑判断代码/方法html

$location没有写demo,按照代码那样从url是能够获取到想要的数据的java

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>

    <!--响应式页面的分页样式-->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"><!--为:<div class="pagination">提供样式-->

    <!--angular.js-->
    <script type="text/javascript" src="../js/angularjs/angular.min.js"></script>
    <!--分页-->
    <link rel="stylesheet" href="../js/angularjs/pagination.css">
    <script type="text/javascript" src="../js/angularjs/pagination.js"></script>
    <!--自定义js:base/Controller/service-->

    <script type="text/javascript">
        // base.js
//        var app = angular.module('myApp', []);

        // base_pagination.js
        // 分页(pagination是angular已经封装好的组件)
        var app = angular.module('myApp', ['pagination']);

        // customService.js
        app.service('myService', function($http) {

            this.findOne = function() {
                return $http.get("../user/add.do");
            }

            // 分页查询
            this.findPage = function(page, rows, searchEntity) {
                return $http.post('../user/findPage.do', searchEntity);
            }

        });

        // baseController.js
        app.controller('baseController', function($scope) {
            $scope.searchEntity = {};
            // 初始化分页参数集合
            $scope.paginationConf = {
                currentPage: 1, // 当前页码
                totalItems: 10, // 总记录数
                itemsPerPage: 10,   // 每页显示数据条数
                prePageOptions: [10, 20, 30, 40, 50],   // 选择每页显示数据条数
                // 更改页码时,自动触发事件
                onChange: function() {
                    $scope.reloadList($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
                }
            }
        });

        // angular过滤器(信任html代码)与ng-bind-html结合使用
        app.filter('trustHtml', ['$sce', function($sce) {
            return function(data) {
                return $sce.trustAsHtml(data);
            }
        }]);

        // 页面添加分页组件
        // <tm-pagination conf="paginationConf"></tm-pagination>

        // customController.js
        app.controller('myController' ,function(myService, $scope, $controller, $location) {
//            alert(1);
            $scope.list = [{id : 1, hobby : '篮球'}, {id : 2, hobby : '游泳'}, {id : 3, hobby : '跑步'}];
            // 加载页面/分页查询
            $scope.reloadList = function(page, rows){
                // page:当前页码,rows:本次查询数据条数,searchEntity:用来封装查询条件
                myService.findPage(page, rows, $scope.searchEntity).success(function(response) {
                    $scope.pages = response.pages;
                    $scope.paginationConf.totalItems = response.total;
                });
            }

            // 事件(event)
            $scope.checkedIsSelect = function($event) {
//                alert($event.target.checked);
                $scope.checkedIds = [];
                $event.target.checked ? ($scope.selectAll=true, addIdsAll($scope.checkedIds, $scope.list)): $scope.selectAll=false;// 三元简化代码
                /*if($event.target.checked) {
                    $scope.selectAll=true;

                    $scope.checkedIds.push(1);
                    $scope.checkedIds.push(2);
                } else {

                    $scope.selectAll=false;
                }*/
            }
            addIdsAll = function(ids,list) {
                for (var i = 0; i < list.length; i++) {
                    ids.push(list[i].id);
                }
            }

            $scope.checkedIds = [];
            $scope.checkSelect = function($event, id) {
                operateIds($event, $scope.checkedIds, id, $scope.list);
//                $event.target.checked ? addId($scope.checkedIds, id,): delId($scope.checkedIds, id,);// 三元简化代码
                /*if ($event.target.checked){
                    addId($scope.checkedIds, id);
                } else{
                    delId($scope.checkedIds, id);
                }*/

            }

            operateIds = function($event, ids, id, list) {
                $event.target.checked ? (ids.push(id),ids.length == list.length ? $scope.selectAll=true: $scope.selectAll=false): (ids.splice(ids.indexOf(id), 1),$scope.selectAll=false);
            }
            // 不使用$scope,则方法只能在js中使用,不能在页面中调用
            addId = function(ids, id) {
                ids.push(id);
                if(ids.length == 2)
                    $scope.selectAll=true;
            }
            delId = function(ids, id){
                var idx = ids.indexOf(id);
                ids.splice(idx, 1);
                $scope.selectAll=false;
            }

            $scope.isSelect = function(ids, id) {
                return ids.indexOf(id) > -1 ? true: false;// 三元简化代码
                /*if(idx > -1){
                    return true;
                } else {
                    return false;
                }*/
            }

            // 过滤
            $scope.html = "<font color='red'><b>你好</b></font>";
            $scope.hello = "你好";
            // 继承
            $controller('baseController', {$scope:$scope});
            // 获取url上的属性值
            $scope.id = $location.search()['id'];
            // 监听属性变化
            $scope.$watch('name', function(newVal, oldVal) {
//                alert(newVal);
            });

            $scope.findOne = function() {
                myService.findOne().success(function (response) {
//                    alert('success');
                }).error(function (response) {
//                    alert('error');
                });
            }

        });

    </script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findOne()">
    <div class="pagination" style="margin-left: 50px"><!--使用bootstrap的样式-->
        <sapn>angular $watch demo</sapn>
        <div ng-bind="name"></div>
        <input ng-model="name" ng-init="name='旺财'"><br><hr>
        <span>解决插值加载时显示angular插值表达式</span><br>
        <span ng-bind="hello"></span><br><hr>
        <span>解决信任html代码,即以html代码识别,而不是以文本原样输出</span><br>
        <span ng-bind-html="html|trustHtml"></span><br><hr>
        <span>checkbox复选框的全选与反选</span>
        已选择的爱好id:<span>{{checkedIds}}</span>
        <div>
            <span>请选择您的兴趣爱好</span>
            <!--复选框全选与反选-->
            <table>
                <tr>
                    <td>
                        <input type="checkbox" ng-checked="selectAll" ng-click="checkedIsSelect($event)">
                    </td>
                    <td>全选</td>
                </tr>
                <!--angular遍历list集合-->
                <tr ng-repeat="item in list">
                    <td>
                        <input type="checkbox" ng-checked="isSelect(checkedIds, item.id)" ng-click="checkSelect($event, item.id)">
                    </td>
                    <td ng-bind="item.hobby"></td>
                </tr>
            </table>
        </div>
        <hr>
        <span>angular分页条</span>
        <!--angular分页插件-->
        <tm-pagination conf="paginationConf"></tm-pagination>
    </div>
</body>
</html>

1. AngularJS基本使用
2. Angularjs基础(三)
3. Angularjs基础(八)
4. angularjs的基础
5. AngularJS基础
6. AngularJS基础语法
7. AngularJS理论基础
8. AngularJS基础知识
9. angularJS基础总结
10. AngularJS的基本使用
更多相关文章...
• Kotlin 基础语法 - Kotlin 教程
• Scala 基础语法 - Scala教程
• Kotlin学习（一）基本语法
• Java Agent入门实战（一）-Instrumentation介绍与使用