一、代码如果看了这个效果有兴趣想知道怎么做出来的话，那就继续往下看吧。话不多少，直接上代码。html代码：<!DOCTYPE html> <html ng-app="cart"> <head><meta charset="UTF-8"><title>购物车</title><link rel="stylesheet" href="../scripts/angular-1.4.0-rc.2/docs/components/bootstrap-3.1.1/css/bootstrap.min.css"><link rel="stylesheet" href="main.css"> </head> <body ng-controller="cartCtr"> <table class="table...
先给大家简单介绍angular.js和bootstrap基本概念。AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。最近一直学习Angular.js，在学习过程中也练习了很多的Demo，这里先贴一下表格+分页。先上图看看最终结...
标题定的是angularjs与bootstrap相结合实现手风琴菜单，其实也就是用的bootstrap的样式。 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。主要练习自定义指令，向指令中传递参数，老规矩先上效果图：{{item.text}} 上面是我自定义的指令，菜单存在标题和内容3条用了 ng-repeat来渲染。指令基本API如下：app.directive('myDirective',function(){ return { //restrict: 默认为A（属性，默...
angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。 1.bootstrp的弹出提示bootstrap已经帮我们封装了非常好用的弹出提示Popover。http://v3.bootcss.com/javascript/#popovers 2.自...
先说点闲话，熟悉Angular的猿们会喜欢这个插件的。00.本末倒置不得不承认我是一个喜欢本末倒置的人，学生时代就喜欢先把晚交的作业先做，留着马上就要交的作业不做，然后慢悠悠做完不重要的作业，卧槽，XX作业马上要交了，赶紧补补补。如今做这个项目，因为没找到合适的多选下拉Web插件，又不想用html自带的丑陋的，自己花了一整天时间做了一个。或许这样占用的主要功能开发的时间，开发起来会更有紧迫感吧。感觉自己是个抖M自虐倾...
使用bootstrap自带的提示控件，省去了不少事情 <div class="s2" ng-init="InitTooltip()"><input type="text" ng-pattern="/^(http|https|ftp)\://[a-zA-Z0-9\.\,\?\\\/\+&%\$\#\=~:_\-\s@]+$/" class="inputwords" id="txtExamination" name="txtExamination" ng-model="csInfo.ExamUrl" placeholder="测验地址"><span data-toggle="tooltip" data-placement="top" data-html="true" title="1、点击《新建测验》按钮 <br/> 2、测验...
Angular-UI Bootstrap提供了许多组件，从流行的的Bootstrap项目移植到Angular 指令（显著的减少了代码量）。如果你计划在Angular应用中使用Bootstrap组件，我建议细心检查。话虽如此，直接使用Bootstrap，应该也是可以工作的。 Angular controller可以共享service的代码。警报就是把service代码共享到controller的很好用例之一。 Angular-UI Bootstrap文档提供了下面的例子： view <div ng-controller="AlertDemoCtrl"><alert ng-r...
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件。 1. 关于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的区别 ngroute是用AngularJS框架的路由的核心部分。ui-router是一个社区库，它是用来提高完善ngroute路由功能的。实例：使用ng-router：首先引入js文件<script src="js/angular.js"></script><script src="js/angular-route.js"></script> 然后在html中 <h2>示例...
tooltip和popover是轻量的、可扩展的、用于提示的指令。对于移动端来讲，这两个指令虽然可以正常工作，但是从用户体验的角度并不推荐使用。 先说tooltip，tooltip有三种使用方式： （1）uib-tooltip 定义提示的文本 （2）uib-tooltip-html 定义提示的html字符串，该字符串不会编译为html内容（需要使用$sce.trustAsHtml编译为html内容）。需要注意内容安全，防止脚本攻击 （3）uib-tooltip-template 定义提示的html内容，该内容需要...
之前看到一个试题，要求用angularJs和Bootstrap写一个简单的计算器，通过百度，发现没有什么好的例子，所以呢，我就把自己写的一个例子发出来给大家。（大牛勿喷） HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>计算器</title> <link rel="stylesheet" type="...
先给大家展示下效果图，感兴趣的朋友参考下实现代码吧 效果图如下所示：具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" > <script src="https://cdn.bootc...
具体代码如下所示： find.html <!DOCTYPE html> <html ng-app="find"> <head> <title>字符查找</title> <meta charset="utf-8"/> <script src="../Script/angular.min.js" type="text/javascript"></script> <link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" > <style type="text/css"> body{ font-size: 12px; } ul{ list-style-type: none; width: 408px; margin:0px; padd...
需要用到的js angular.js（用angular.min.js会导致分页控件不显示） ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由，所以讲js以及css文件的应用都放在一个主html，请同学们在html页面中添加以上文件 在开始之前，我先简单介绍下分页的原理。 分页的实质其实就是一条sql语句， 比如查找第二页，即第16到第30条数据 在MySQL中是select * from table limit 15,15 order by ...
npm 安装 ng-bootstrap 模块 npm install @ng-bootstrap/ng-bootstrap --save在 Angular 项目配置 app.module.ts 添加 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";imports: [/*** ngx-bootstrap*/NgbModule.forRoot()], 添加 bootstrap.min.css 样式 在 assets 文件夹下 bootstrap/bootstrap.min.css ， 并在 style.css 文件中添加 @import "assets/bootstrap/bootstrap.min.css";测试 app.component.html 添加代码：...
1、搭建项目框架 npm初始化项目 npm init -y //按默认配置初始化项目安装需要的第三方库 npm install bootstrap angular angular-route --save新建一个index.html页面 引用 这三个依赖库新建两个文件夹coming_soon in_theaters 然后在这两个文件夹里分别创建一个controller.js 文件和view.html文件 最后项目文件的结构是这样 2、搭建首页样式 采用bootstrap http://v3.bootcss.com/examples/dashboard/ 该页面的样式 然后还需...