组件化入门

最新推荐文章于 2022-03-20 22:14:26 发布

原创最新推荐文章于 2022-03-20 22:14:26 发布 · 180 阅读

CC 4.0 BY-SA版权

网页结构和组件化：
首先我们思考一下在常规网页开发时，网页的结构大概是什么样的？
（1）上中下、左中右、上下、左右
（2）上中下结构：上、下结构保持不变，中间部分内容发生变化
组件化：将页面中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用

类似于JS中的函数，封装了一部分处理代码，通过函数调用就可以重复使用这些代码。

案例一：

<body ng-app="myApp">
<my-comp></my-comp>
</body>

<script>
    var app = angular.module("myApp", []);

    // 封装一个简单的组件
    app.component("myComp", {
        template:"<h1>组件化封装的内容<small>这是一个副标题</small></h1>"
    });
</script>

案例二：

<body ng-app="myApp">
<page-header></page-header>
<page-slide></page-slide>
<page-footer></page-footer>
<script>
    var app = angular.module("myApp", []);

    app.component("pageHeader", {
        template:"<h2>尊敬的用户{{username}}，欢迎访问本系统</h2>",
        controller:function($scope) {
            $scope.username = "tom";
        }
    });

    app.component("pageSlide", {
        template:"<h2>这是一个侧边栏导航</h2>"
    });

    app.component("pageFooter", {
        template:"<h2>这是一个网页底部代码</h2>"
    });
</script>
</body>

过滤器及自定义过滤器

超级超级详细的介绍，请看下方代码：

<body ng-app="myApp">
<div ng-controller="myCtrl">
    <div ng-bind="name"></div>
    <div ng-bind="name | myfilter"></div>
</div>
<script>
    var app = angular.module("myApp", []);
    /*app.filter(name, fn):用于定义一个自定义过滤器
     * name:过滤器名称
     * fn:过滤器处理函数
     * */
    app.filter("myfilter", function() {
        /*
         * 过滤器中，直接return function(value) {}
         * 通过闭包函数来实现数据处理，固定语法结构！
         * value参数：第一个参数，用于接收要处理的数据：数据就是过滤器管道符前面变量中的数据
         */
        return function(value) {/*闭包函数中的value就是过滤器接收到的数据|就是准备过滤的数据*/
            /*
             * 这一部分主要是用来进行数据处理的
             */
            value = value.toUpperCase();
            /* 过滤器中数据处理完成，一定要返回输出*/
            return value;
        }
    });
    app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });
</body>

<body ng-app="myApp">
<div ng-controller="myCtrl">
    <div>
        <h3>排序输出</h3>
        排序关键词：<input type="text" ng-model="keyword">
        排序顺序：<input type="checkbox" ng-model="sort">倒序
        <br />
        <ul>
            <li ng-repeat="u in users | orderBy:keyword:sort">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>
    <div>
        <h3>字符串大小写转换过滤器</h3>
        <div ng-bind="name"></div>
        <div ng-bind="name | uppercase"></div>
        <div ng-bind="name | lowercase"></div>
    </div>
    <div>
        <h3>长度限制过滤器</h3>
        长度：<input type="text" ng-model="length"><br />
        位置：<input type="text" ng-model="index">
        <br />
        <ul>
            <li ng-repeat="u in users | limitTo:length:index">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>
    <div>
        <h3>JSON过滤器</h3>
        <p>
            把数据中的对象，转换成JSON字符串的格式输出展示到页面上
            经常能用于代码程序调试，使用较少！
        </p>
        <span ng-bind="users|json"></span>
    </div>
    <div>
        <h3>过滤输出</h3>
        关键词：<input type="text" ng-model="keyword">
        <br />
        <ul>
            <li ng-repeat="u in users | filter:keyword">
                <span ng-bind="u.userID"></span>****
                <span ng-bind="u.username"></span>****
                <span ng-bind="u.nickname"></span>
            </li>
        </ul>
    </div>
    <div>
        <h3>日期时间过滤器</h3>
        <div>
            原始输出：<span ng-bind="date"></span>
        </div>
        <div>
            日期格式化：<span ng-bind="date | date"></span>
        </div>
        <div>
            日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数
            y/M/d/h/m/s/E 年/月/日/时/分/秒/星期
            <br />
            <span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span><br />
            <span ng-bind="date | date:'yyyy年MM月dd日'"></span><br />
            <span ng-bind="date | date:'hh:mm:ss'"></span><br />
        </div>
    </div>
    <hr>
    <h3>货币格式过滤器</h3>
    <div>
        原始输出数据的方式：<span ng-bind="price"></span>
    </div>

    <div>
        通过拼接输出数据的方式：￥<span ng-bind="price"></span>.00
    </div>
    <hr/>
    <div>

        <p>
            对于要展示的货币数据【原始数据就是数字】
            按照指定的货币格式进行输出
        </p>
        货币过滤器输出：<span ng-bind="price | currency"></span><br />
        货币过滤器输出：<span ng-bind="price | currency:'人命币￥'"></span><br />
        货币过滤器输出：<span ng-bind="price | currency:'￥':3"></span><br />
    </div>

</div>

<script>
    var app = angular.module("myApp", []);

    app.controller("myCtrl", ["$scope", function($scope) {
        $scope.price = 499.1213;
        $scope.date = new Date();
        $scope.name = "John Smith";
        $scope.users = [
            {userID:1, username:"cat", nickname:"tom"},
            {userID:2, username:"xiaofan", nickname:"张小凡"},
            {userID:3, username:"xiannv ", nickname:"李仙女"},
            {userID:4, username:"eran", nickname:"高而安"},
            {userID:5, username:"chunjie", nickname:"张纯洁"},
            {userID:6, username:"yueliang", nickname:"曾月亮"},
            {userID:7, username:"yue", nickname:"聂月月"},
            {userID:8, username:"jingyu", nickname:"小金鱼"},
            {userID:9, username:"shaoguo", nickname:"郑少国"},
            {userID:10, username:"pokong", nickname:"破空"},
            {userID:11, username:"lanpangzhi", nickname:"蓝胖纸"}
        ]
    }]);
</script>
</body>