angularjs+bootstrap搭载前台框架——准备工作

陋室铭      2022-02-12     271

关键词:

1.关于什么是AngularJS以及什么是bootstrap我就不多说了,简单说下,angularjs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包,可以迅速搭建web前台,可以去官网看看(AngularJs:http://angularjs.org/ ,bootstrap:http://twitter.github.io/bootstrap/)。

2.github上有一个比较好的纯净AngularJs app的种子,可以去github下载,地址:https://github.com/glitchtank/angular-seed-master

3.我们把下载的angular-seed-master-master.zip解压到某个文件夹,然后会看到这个app的项目组织,如下:

技术分享

    app:这个文件夹中包含了跟我们app相关的依赖css和js以及我们的页面等。

         css:放的是项目的css文件

         img:放的是images

         js:放的是我们项目相关的js,包括controller、filter、service等

         lib:放的是我们依赖的js,包括Angular和Bootstrap相关的库

        别的就是一些html文件

    其他文件夹暂时不需要知道,大概就是一些脚本(关于node的),还有一些用于Angular测试

4.我们项目需要用node来启动,如果不太清楚,没关系,看我另一篇博客:http://blog.csdn.net/jthink_/article/details/9707895(linuix和windows下的差不多,实在不会就google吧)。

5.由于我们是在windows下,所以我们打开一个cmd,进入到angular-seed-master-master文件夹,然后键入命令node scripts/web-server.js(或者用supervisor scripts/web-server.js 如果安装了supervisor)。

6.打开chrome浏览器(这边推荐使用chrome,或者使用firefox,64位的操作系统可以使用waterfox),输入地址:http://localhost:8000/app/index.html,你就可以看到一个简单的页面出来了,别看它简单,麻雀虽小五脏俱全,所有的MVC相关的都包括了。

bootstrap-table前台和后台分页对json格式的要求

Bootstrap是一款前端非常流行的框架,其中的表格更为大家经常使用。大家都知道表格的分页分为前台和后台分页,也就是表格配置中sidePagination属性,当sidePagination:"server"时表示后台分页,sidePagination:"client"为前台分页。前台分页... 查看详情

bootstrap,vue,angular的区别

bootstrap不算是javascript框架,它只是一个前端的ui框架,然后有一些附带的js插件而已。angularjs是一个javascript的mvvm的框架,是为了开发有复杂业务逻辑的CRUD应用而生的AngularJS是js框架,它定义了如何组织代码,引入了很多概念,... 查看详情

bootstrap-table分页数据前台不显示

问题:后台返回数据{"total":52,"rows":[{"ztname":"2007年新会计准则科目(李相)","ztid":"003bf550-afa5-47b2-aa43-2e121c60607d"}},前台代码不能显示数据,响应也是正常的分析原因:没有加参数sidePagination:‘server‘,//client/server,使用数据分页代码initTa... 查看详情

bootstrap有好的前台和后台管理的框架吗

使用这些前端框架,有如下好处:跨浏览器。这一点已被证实。一致性。UI组件,如导航、按钮、标签、表单、下拉框、表格……,在设计上保持风格一致。快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明... 查看详情

angularjs配哪个css框架好?semanticui,bootstrap,还是其他

Bootstrap和Angular都是人们大量使用的工具。在很多项目中,它们需要一起使用。为什么不呢?他们已经改变了CSS和JS的开发方式,让前端既成为令人难以置信的工具。但是,把它们放在一起使用还有一些问题,特别是当你试图在Ang... 查看详情

angularjs配哪个css框架好?semanticui,bootstrap,还是其他

Bootstrap和Angular都是人们大量使用的工具。在很多项目中,它们需要一起使用。为什么不呢?他们已经改变了CSS和JS的开发方式,让前端既成为令人难以置信的工具。但是,把它们放在一起使用还有一些问题,特别是当你试图在Ang... 查看详情

angularjs学习总结-基本特性

...移动端的项目,移动端UI框架用的是ionic+vordova,没有用bootstrap,主要做的是ios+安卓的app界面,ionic这个框架也不太了解,也需要花时间好好熟悉下。angularjs学习小白一枚,欢迎大神指正 查看详情

如何集成 bootstrap-3.0.1 和 AngularJS?

】如何集成bootstrap-3.0.1和AngularJS?【英文标题】:Howtointegratebootstrap-3.0.1andAngularJS?【发布时间】:2013-11-1115:30:57【问题描述】:我有一个项目应该同时使用AngularJS和Bootstrap(http://getbootstrap.com/)来获取警报和进程指示器。但是当我... 查看详情

angularjs的ui组件ui-bootstrap分享

原文地址:http://www.cnblogs.com/pilixiami/p/5597634.htmlUI-Bootstrap是AngularJs团队在Bootstrap基础上,用AngularJs实现的一组UI控件,包括Tab页,手风琴,下拉菜单,模态窗口,日期选择等等。原生的这些控件在Bootstrap里是用Jquery写的,用了UI-Bo... 查看详情

如何使用 AngularJS 使用 Bootstrap 警报

】如何使用AngularJS使用Bootstrap警报【英文标题】:HowtouseBootstrapalertsusingAngularJS【发布时间】:2016-01-2501:55:33【问题描述】:嗨,我的项目适用于Djnago和AngularJS。我想在用户提交后包含引导警报。如果成功,则显示警报成功等。... 查看详情

记一次bootstrap框架下使用ajax失效的问题

最近写一个简单的后台管理系统,前台是套用的一套Bootstrap框架的一套模板。在HTML页面的模板上,用一些简单的jquery脚本,使用JSP页面完成前后台交互。在写到一个AJAX请求的时候,发现AJAX请求可以到后台,但是返回不了JSON数... 查看详情

bootstrap-multiselect与angularjs冲突

bootstrap-multiselect与angularjs冲突,无法选中,加载延迟问题:将multiselect()方法延迟加载,代码:1$scope.mulSelect=function(){2$timeout(function(){3$(‘#camera-select‘).multiselect({4nonSelectedText:‘全部‘,//没有值的时候button显示值5includ 查看详情

前端框架选择

...前端的东西~~前端框架大概看了主要由以下几个:angularjsbootstrapextjsjquery其他的记不住了最终确定选用angularjs+bootstrap原因:对于做过Java后台来说,比较易于接受模块化思想,而angularjs是一个比较经典的MVC框架,从设 查看详情

在 angularjs 组件中使用 Bootstrap 网格

】在angularjs组件中使用Bootstrap网格【英文标题】:UsingBootstrapgridinangularjscomponents【发布时间】:2019-03-3114:07:45【问题描述】:我基本上想要做的是将网格元素div包装成角度组件。努力是减少打字笔划并获得输入标准:<bootstrap-r... 查看详情

DataTable Bootstrap 不适用于 AngularJs

】DataTableBootstrap不适用于AngularJs【英文标题】:DataTableBootstrapisnotworkingwithAngularJs【发布时间】:2015-09-0610:59:58【问题描述】:我正在尝试将DataTableBootstrap与AngularJs一起使用,但DataTable的工作方式就像表中没有数据一样。在下面... 查看详情

无法垂直对齐文本 - angularJS + bootstrap + flexbox

】无法垂直对齐文本-angularJS+bootstrap+flexbox【英文标题】:can\'taligntextvertically-angularJS+bootstrap+flexbox【发布时间】:2018-10-0513:50:10【问题描述】:我花了很多时间试图弄清楚为什么我不能垂直对齐这些单元格内的文本?我什么都试... 查看详情

angularjs--bootstrap(list-group)

angularjs--bootstrap(list-group)1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1, 查看详情

Bootstrap 4轮播不适用于AngularJS UI-Bootstrap

】Bootstrap4轮播不适用于AngularJSUI-Bootstrap【英文标题】:Bootstrap4carouselnotworkingwithAngularJSUI-Bootstrap【发布时间】:2019-02-2408:00:24【问题描述】:我正在尝试在我的bootstrap4网站中使用基于角度的轮播。当我使用bootstrap3(bootstrap.min.css)... 查看详情