AngularJS 与 Bootstrap 的结合实例

最新推荐文章于 2024-07-06 14:09:27 发布
最新推荐文章于 2024-07-06 14:09:27 发布
阅读量2.4k 收藏 1
点赞数 1
分类专栏： angularjs 文章标签： bootstrap angularjs html 实例 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsl0530hsl/article/details/78010505
版权
本文通过一个实例展示了如何将AngularJS与Bootstrap结合，创建HTML页面，如demo_BGMP.html和user_list.html，并构建项目目录结构，实现了项目首页及用户管理列表页面的功能，提供了项目实际效果的展示。
摘要由CSDN通过智能技术生成

这里只列出 一部分实例，其实功能需要自行添加：

首先，搭建整个项目的页面结构：

创建 HTML 页面：demo_BGMP.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>后台管理界面</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            min-width: 250px;
        }
        #left_menu {
            height: 90%;
        }
        #left_menu .navbar-collapse {
            padding-left: 0;
        }
        #left_menu .collapse {
            margin-left: 20px;
        }
        #right_content {
            padding: 0;
        }
        #right_content .row {
            padding: 0;
            margin-left: -13px;
            margin-right: -13px;
        }
        @media (min-width: 768px) {
            #left_menu {
                width: 250px;
                position: absolute;
                top: 50px;
            }
            #right_content {
                height: 877px;
                margin: 53px 0 0 250px;
            }
            #right_content .row {
                padding: 0;
                margin: 0;
            }
            #right_content .breadcrumb {
                margin-left: 2px;
            }
        }
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you views the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="../js/jquery-2.1.3.min.js"></script>
    <script src="../js/angular/angular.min.js"></script>
    <script src="../js/angular/route.js"></script>
    <script src="../js/angular/routeParams.js"></script>
    <script src="../js/angular/shallowCopy.js"></script>
    <script src="../js/angular/ngView.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $("#home_label").click(function (e) {
                e.preventDefault();
                $("li ul", "#menu_col").collapse('hide');
            });
        });
        angular.module('myApp', ["ngRoute"]).controller('myCtrl', function($scope) {
            $scope.message = {
                num : 44
            };

            $scope.searchFun = function () {
                console.log($scope.searchInput);
            };
            $scope.funList = [
                {
                    id: "system_menu",
                    name: "系统功能",
                    iconClass: [
                        "glyphicon glyphicon-cog",
                        "glyphicon glyphicon-chevron-right"
                    ],
                    subFunList: [
                        {
                            id: "sys_log",
                            name: "系统日志",
                            iconClass: [
                                "glyphicon glyphicon-align-left"
                            ],
                            subFunList: [
                                {
                                    id: "log_list",
                                    name: "日志列表"
                                }
                            ]
                        },
                        {
                            id: "user_manager",
                            name: "用户管理",
                            iconClass: [
                                "glyphicon glyphicon-user"
                            ],
                            subFunList: [
                                {
                                    id: "user_list",
                                    name: "用户列表"
                                }
                            ]
                        },
                        {
                            id: "star_manager",
                            name: "会员管理",
                            iconClass: [
                                "glyphicon glyphicon-star-empty"
                            ],
                            subFunList: [
                                {
                                    id: "star_list",
                                    name: "会员列表"
                                }
                            ]
                        },
                        {
                            id: "role_manager",
                            name: "角色设定",
                            iconClass: [
                                "glyphicon glyphicon-check"
                            ],
                            subFunList: [
                                {
                                    id: "role_list",
                                    name: "角色列表"
                                }
                            ]
                        },
                        {
                            id: "auth_manager",
                            name: "权限设定",
                            iconClass: [
                                "glyphicon glyphicon-lock"
                            ],
                            subFunList: [
                                {
                                    id: "auth_list",
                                    name: "权限列表"
                                }
                            ]
                        },
                        {
                            id: "page_manager",
                            name: "界面设置",
                            iconClass: [
                                "glyphicon glyphicon-list-alt"
                            ],
                            subFunList: [
                                {
                                    id: "page_list",
                                    name: "界面列表"
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "product_menu",
                    name: "产品功能",
                    iconClass: [
                        "glyphicon glyphicon-gift"
                    ],
                    subFunList: [
                        {
                            id: "sys_log_1",
                            name: "系统日志",
                            iconClass: [
                                "glyphicon glyphicon-align-left"
                            ],
                            subFunList: [
                                {
                                    id: "log_list_1",
                                    name: "日志列表"
                                }
                            ]
                        },
                        {
                            id: "user_manager_1",
                            name: "用户管理",
                            iconClass: [
                                "glyphicon glyphicon-user"
                            ],
                            subFunList: [
                                {
                                    id: "user_list_1",
                                    name: "用户列表"
                                }
                            ]
                        },
                        {
                            id: "star_manager_1",
                            name: "会员管理",
                            iconClass: [
                                "glyphicon glyphicon-star-empty"
                            ],
                            subFunList: [
                                {
                                    id: "star_list_1",
                                    name: "会员列表"
                                }
                            ]
                        },
                        {
                            id: "role_manager_1",
                            name: "角色设定",
                            iconClass: [
                                "glyphicon glyphicon-check"
                            ],
                            subFunList: [
                                {
                                    id: "role_list_1",
                                    name: "角色列表"
                                }
                            ]
                        },
                        {
                            id: "auth_manager_1",
                            name: "权限设定",
                            iconClass: [
                                "glyphicon glyphicon-lock"
                            ],
                            subFunList: [
                                {
                                    id: "auth_list_1",
                                    name: "权限列表"
                                }
                            ]
                        },
                        {
                            id: "page_manager_1",
                            name: "界面设置",
                            iconClass: [
                                "glyphicon glyphicon-list-alt"
                            ],
                            subFunList: [
                                {
                                    id: "page_list_1",
                                    name: "界面列表"
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "lm_menu",
                    name: "栏目功能",
                    iconClass: [
                        "glyphicon glyphicon-th-list",
                        "glyphicon glyphicon-chevron-right"
                    ],
                    subFunList: [
                        {
                            id: "sys_log_2",
                            name: "系统日志",
                            iconClass: [
                                "glyphicon glyphicon-align-left"
                            ],
                            subFunList: [
                                {
                                    id: "log_list_2",
                                    name: "日志列表"
                                }
                            ]
                        },
                        {
                            id: "user_manager_2",
                            name: "用户管理",
                            iconClass: [
                                "glyphicon glyphicon-user"
                            ],
                            subFunList: [
                                {
                                    id: "user_list_2",
                                    name: "用户列表"
                                }
                            ]
                        },
                        {
                            id: "star_manager_2",
                            name: "会员管理",
                            iconClass: [
                                "glyphicon glyphicon-star-empty"
                            ],
                            subFunList: [
                                {
                                    id: "star_list_2",
                                    name: "会员列表"
                                }
                            ]
                        },
                        {
                            id: "role_manager_2",
                            name: "角色设定",
                            iconClass: [
                                "glyphicon glyphicon-check"
                            ],
                            subFunList: [
                                {
                                    id: "role_list_2",
                                    name: "角色列表"
                                }
                            ]
                        },
                        {
                            id: "auth_manager_2",
                            name: "权限设定",
                            iconClass: [
                                "glyphicon glyphicon-lock"
                            ],
                            subFunList: [
                                {
                                    id: "auth_list_2",
                                    name: "权限列表"
                                }
                            ]
                        },
                        {
                            id: "page_manager_2",
                            name: "界面设置",
                            iconClass: [
                                "glyphicon glyphicon-list-alt"
                            ],
                            subFunList: [
                                {
                                    id: "page_list_2",
                                    name: "界面列表"
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "block_menu",
                    name: "模块功能",
                    iconClass: [
                        "glyphicon glyphicon-calendar",
                        "glyphicon glyphicon-chevron-right"
                    ],
                    subFunList: [
                        {
                            id: "sys_log_3",
                            name: "系统日志",
                            iconClass: [
                                "glyphicon glyphicon-align-left"
                            ],
                            subFunList: [
                                {
                                    id: "log_list_3",
                                    name: "日志列表"
                                }
                            ]
                        },
                        {
                            id: "user_manager_3",
                            name: "用户管理",
                            iconClass: [
                                "glyphicon glyphicon-user"
                            ],
                            subFunList: [
                                {
                                    id: "user_list_3",
                                    name: "用户列表"
                                }
                            ]
                        },
                        {
                            id: "star_manager_3",
                            name: "会员管理",
                            iconClass: [
                                "glyphicon glyphicon-star-empty"
                            ],
                            subFunList: [
                                {
                                    id: "star_list_3",
                                    name: "会员列表"
                                }
                            ]
                        },
                        {
                            id: "role_manager_3",
                            name: "角色设定",
                            iconClass: [
                                "glyphicon glyphicon-check"
                            ],
                            subFunList: [
                                {
                                    id: "role_list_3",
                                    name: "角色列表"
                                }
                            ]
                        },
                        {
                            id: "auth_manager_3",
                            name: "权限设定",
                            iconClass: [
                                "glyphicon glyphicon-lock"
                            ],
                            subFunList: [
                                {
                                    id: "auth_list_3",
                                    name: "权限列表"
                                }
                            ]
                        },
                        {
                            id: "page_manager_3",
                            name: "界面设置",
                            iconClass: [
                                "glyphicon glyphicon-list-alt"
                            ],
                            subFunList: [
                                {
                                    id: "page_list_3",
                                    name: "界面列表"
                                }
                            ]
                        }
                    ]
                },
                {
                    id: "other_menu",
                    name: "其他功能",
                    iconClass: [
                        "glyphicon glyphicon-fire",
                        "glyphicon glyphicon-chevron-right"
                    ],
                    subFunList: [
                        {
                            id: "sys_log_4",
                            name: "系统日志",
                            iconClass: [
                                "glyphicon glyphicon-align-left"
                            ],
                            subFunList: [
                                {
                                    id: "log_list_4",
                                    name: "日志列表"
                                }
                            ]
                        },
                        {
                            id: "user_manager_4",
                            name: "用户管理",
                            iconClass: [
                                "glyphicon glyphicon-user"
                            ],
                            subFunList: [
                                {
                                    id: "user_list_4",
                                    name: "用户列表"
                                }
                            ]
                        },
                        {
                            id: "star_manager_4",
                            name: "会员管理",
                            iconClass: [
                                "glyphicon glyphicon-star-empty"
                            ],
                            subFunList: [
                                {
                                    id: "star_list_4",
                                    name: "会员列表"
                                }
                            ]
                        },
                        {
                            id: "role_manager_4",
                            name: "角色设定",
                            iconClass: [
                                "glyphicon glyphicon-check"
                            ],
                            subFunList: [
                                {
                                    id: "role_list_4",
                                    name: "角色列表"
                                }
                            ]
                        },
                        {
                            id: "auth_manager_4",
                            name: "权限设定",
                            iconClass: [
                                "glyphicon glyphicon-lock"
                            ],
                            subFunList: [
                                {
                                    id: "auth_list_4",
                                    name: "权限列表"
                                }
                            ]
                        },
                        {
                            id: "page_manager_4",
                            name: "界面设置",
                            iconClass: [
                                "glyphicon glyphicon-list-alt"
                            ],
                            subFunList: [
                                {
                                    id: "page_list_4",
                                    name: "界面列表"
                                }
                            ]
                        }
                    ]
                },
            ];
            $scope.breadList = [];
            $scope.clickFun = function (funId) {
                var tempList = [];
                $scope.funList.forEach(function (fun, idx, list) {
                    fun.subFunList.forEach(function (subFun, ind, subList) {
                        if (subFun.id == funId) {
                            tempList.push({
                                id: fun.id,
                                name: fun.name,
                                isActive: false
                            });
                            tempList.push({
                                id: subFun.id,
                                name: subFun.name,
                                isActive: false
                            });
                            tempList.push({
                                id: subFun.subFunList[0].id,
                                name: subFun.subFunList[0].name,
                                isActive: true
                            });
                        }
                    });
                });
                $scope.breadList = tempList;
            }
        }).config(["$routeProvider", function ($routeProvider) {
            console.log($routeProvider)
            $routeProvider.when("/", {template: $("#main_page")})
                .when("/user_manager", {templateUrl: "views/user_list.html"})
                .otherwise({redirectTo:'/'});
        }]);
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" id="home_label"><span class="glyphicon glyphicon-home"></span>&nbsp;后台管理</a>
            </div>
            <div id="navbar" class="collapse navbar-right navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#"><span class="badge" style="background-color: #b92c28">{{message.num}}</span></a></li>
                    <li><a href="#about"><span class="glyphicon glyphicon-off"></span>&nbsp;注销</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>

    <nav class="navbar navbar-default" id="left_menu">
        <div class="navbar-default navbar-collapse" id="menu_col">
            <ul class="nav nav-sidebar">
                <li>
                    <div class="input-group" style="margin: 5px 10px;">
                        <input type="text" ng-model="searchInput" class="form-control" placeholder="Search"/>
                        <span class="input-group-btn">
                            <button type="button" ng-click="searchFun()" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                        </span>
                    </div>
                </li>
                <li ng-repeat="fun in funList">
                    <a href="#{{fun.id}}" data-toggle="collapse"><span class="{{fun.iconClass[0]}}"></span>&nbsp;{{fun.name}} <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
                    <ul class="nav collapse" id="{{fun.id}}">
                        <li ng-repeat="subFun in fun.subFunList" ng-click="clickFun(subFun.id)"><a href="#!/{{subFun.id}}"><span class="{{subFun.iconClass[0]}}"></span>&nbsp;{{subFun.name}}</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container-fluid" id="right_content">

        <div class="breadcrumb ">
            <li ng-repeat="bread in breadList" class="{{bread.isActive ? 'active' : ''}}">
                <span ng-switch="{{bread.isActive}}">
                    <span ng-switch-when="true">{{bread.name}}</span>
                    <span ng-switch-when="false"><a href="#{{bread.id}}">{{bread.name}}</a></span>
                </span>
            </li>
        </div>

        <div ng-view></div>
        <div id="main_page">
            <h2>This is the welcome page!</h2>
        </div>

    </div>
</body>
</html>
功能页面

这里只做一个样本，以用户管理的列表页面为例：
创建 HTML 页面： user_list.html

<div id="user_list_page">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">普通用户</div>
                <div class="panel-body">
                    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                <table class="table table-bordered table-hover table-striped table-responsive">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr><td>1</td><td>normal</td><td>Otto</td><td>@mdo</td></tr>
                    <tr><td>2</td><td>normal</td><td>Otto</td><td>@mdo</td></tr>
                    <tr><td>3</td><td>normal</td><td>Otto</td><td>@mdo</td></tr>
                    <tr><td>4</td><td>normal</td><td>Otto</td><td>@mdo</td></tr>
                    <tr><td>5</td><td>normal</td><td>Otto</td><td>@mdo</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">星级用户</div>
                <div class="panel-body">
                    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                <table class="table table-bordered table-hover table-striped table-responsive">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="active"><td>1</td><td>active</td><td>Otto</td><td>@mdo</td></tr>
                    <tr class="success"><td>2</td><td>success</td><td>Otto</td><td>@mdo</td></tr>
                    <tr class="info"><td>3</td><td>info</td><td>Otto</td><td>@mdo</td></tr>
                    <tr class="warning"><td>4</td><td>warning</td><td>Otto</td><td>@mdo</td></tr>
                    <tr class="danger"><td>5</td><td>danger</td><td>Otto</td><td>@mdo</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">未认证用户</div>
                <div class="panel-body">
                    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                <table class="table table-bordered table-hover table-striped table-responsive">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="active"><td>1</td><td>active</td><td>Otto</td><td>@mdo</td></tr>
                    <tr class="success"><td>2</td><td>success</td><td>Otto</td><td>@mdo</td></tr>
                    <tr class="info"><td>3</td><td>info</td><td>Otto</td><td>@mdo</td></tr>
                    <tr class="warning"><td>4</td><td>warning</td><td>Otto</td><td>@mdo</td></tr>
                    <tr class="danger"><td>5</td><td>danger</td><td>Otto</td><td>@mdo</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-5 col-sm-push-6">
            <nav aria-label="Page navigation" class="pull-right">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">{{message.num}}</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
项目目录结构

这里写图片描述

项目实际效果

项目首页效果图
这里写图片描述

项目其他功能性页面效果图如下：
(以用户管理的列表页面为例，点击菜单页的[用户管理])
这里写图片描述

雾里看花叹朦胧
关注
专栏目录
基于AngularJs框架的BootStrap模板整合
03-03
基于AngularJs框架的BootStrap模板整合，精美后台模块，功能强大。
利用Angularjs和Bootstrap前端开发案例实战
11-26
我们将利用Angularjs 和 Bootstrap，开发一个前端应用实例，通过这一次简单的项目实战，引领大家进入AngularJS前端开发的殿堂，并向大家介绍一下几个知识点：  1.MVC 基础，通过项目实例，让大家初步体会MVC设计模式的应用。  2.构建我们第一个AngularJS应用，通过一个实际用例的开发，大家可以对前端开发获得一定的感性认识。  3.初步了解AngularJS三个最重要的组成部件，他们分别是Model, View, 和Controller.  4.初步了解AngularJS的Scope对象的使用。  MVC模式的基本介绍: MVC是一种UI架构模式，它的目的是将应
Angular 和 BootStrap Web 开发第三版（三）
最新发布
龙哥盟
07-06 599
在本章中，我们探讨了 NG Bootstrap——两个免费提供给我们在 Angular 应用程序中使用的第三方组件库中的第一个。我们将在下一章中探讨第二个，Angular Material。我们学习了如何安装 NGB，然后在应用程序中创建了一个游乐场，这样我们就有了一个可以玩耍（即实验）这些第三方组件的地方，包括临时通过路由将游乐场与菜单连接起来，以便轻松访问我们的游乐场。虽然我们本可以在集成这些组件到应用程序的预期用途之前创建一个完全独立的项目来玩耍，但通常更方便的是在现有基础设施中创建一个游乐场。
AngularJs bootstrap demo
shendeguang的专栏
08-18 526
1.github上有一个比较好的纯净AngularJs app的种子，可以去github下载，地址：https://github.com/glitchtank/angular-seed-master。 2.我们把下载的angular-seed-master-master.zip解压到某个文件夹，然后会看到这个app的项目组织，如下：     app：这个文件夹中包含了跟我们ap
angularjs+bootstrap后台管理样例
二次开发需求博客
11-07 3910
 angularjs+bootstrap可以做出很漂亮的管理系统出来，https://wrapbootstrap.com/可以付费购买，下文会提供一个免费的，要讲解如何从0到1把ng前端结构搭出来是很漫长的教程，本文仅仅介绍一下这个免费后台模版的结构，然后重点讲解如何改写这个结构。  开始阅读之前，假设读者已经ng入门并且对于ui.router,bootstrap有一定了解。 下载链
在angular里面使用jQuery和bootstrap
涂涂
08-13 5710
第一步： 1.在你的项目目录下面：npm install jquery --save --save是将jQuery加入package.json里面 2.在项目目录下面npm install bootstrap --save 安装完成后： "bootstrap": "^3.3.7", "core-js": "^2.4.1", "jquery": "^3.2.1", 第二步
AngularJS 与Bootstrap实现表格分页实例代码
10-21
总结起来，AngularJS和Bootstrap结合使用，可以方便地创建具有交互性和响应式的表格分页功能。`ng-repeat`指令用于数据绑定和重复渲染，`ng-click`和`ng-class`用于处理用户交互和样式控制。虽然这个示例是“假分页...
AngularJs中Bootstrap3 datetimepicker使用实例
10-20
当将AngularJS与Bootstrap3 datetimepicker结合时，可以创建一个功能丰富的日期时间选择控件，提供更好的用户体验。 知识点一：AngularJS简介 AngularJS是一个由Google维护的开源JavaScript框架。它主要用于构建...
angularjs+bootstrap实现自定义分页的实例代码
10-19
至此，我们已经了解了如何使用AngularJS和Bootstrap结合实现自定义分页。这个过程涉及到的主要知识点包括： 1. AngularJS模块和控制器的创建与使用。 2. 使用`ng-repeat`指令来动态渲染数据列表。 3. 使用`ng-model...
利用Angularjs和bootstrap实现购物车功能
10-21
总的来说，这个购物车实现结合了AngularJS的动态数据处理能力和Bootstrap的快速UI开发优势。通过这个实例，开发者可以学习到如何在实际项目中运用这两个工具，以及如何处理购物车的基本功能，如添加、删除商品，计算...
bootstrapjs_如何一起正确使用BootstrapJS和AngularJS
culiu9261的博客
07-18 227
bootstrapjsBootstrap and Angular are tools that a great number of people use. Often times, they are used together in projects. And why shouldn't they be? They are both incredible tools that have chang...
angularjs+bootstrap+SSM简单示例
12-14
这是本人作为实践开发的一个java web项目，采用当前比较热门的开发框架，包含UI框架，用户管理，分页功能，查询，模态窗口，利用angularjs实现图片上传，消息提示框等功能，可以用作web项目的框架来使用，帮助学习angularjs和bootstrap前段和SSM后台框架的程序员，只是一个示例代码
AngularJs+Bootstrap前端框架
10-08
基于angularjs+bootstrap的前端框架，内置全套angularjs插件及bootstrap插件
ssm+bootstrap+angularJs案例
08-24
spring springmvc mybatis bootstart angularjs简单案例，入门级
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
10-22
主要给大家介绍基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动的实例代码，非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧
Bootstrap + AngularJS 实现简单的数据过滤----字符查找
汉南最後の読書人
07-27 803
代码： find.html 字符查找 body{ font-size: 12px; } ul{ list-style-type: none; width: 408px; margin:0px; padding: 0px; } ul li { float: left; padding:
angularJs弹性盒模型+bootstrap开发案例
泠泠似水
05-31 731
angularJs结合微信的弹性盒模型+bootstrap开发前端并实现数据增加，删除功能。<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> <script src="underscore-min.js"></script>
自定义分页查询． 基于 BootStrap + AngularJS
slash_的博客
03-25 439
page.jsbosfore_app.controller("ctrlRead", ['$scope', '$http', function($scope, $http) {    $scope.currentPage = 1;    $scope.pageSize = 4;    $scope.totalCount = 0;    $scope.totalPages = 0;    $scope...
BootStrap+AngularJS分页显示
qq_41950682的博客
07-17 162
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;BootStrap+AngularJS分页显示 &lt;/title&gt;         &lt;script type="text/javascri
深入理解AngularJS与Bootstrap集成详解与实战
本文是一篇深入介绍AngularJS与Bootstrap集成的文章，旨在帮助开发者更好地理解和应用这两个流行...通过学习和实践，开发者可以将AngularJS的动态特性与Bootstrap的美观与易用性结合起来，提升自己的Web应用开发能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值