47820人阅读
AngularJs+bootstrap搭载前台框架（2）
nodejs（4）
1.关于什么是AngularJs以及什么是bootstrap我就不多说了，简单说下，AngularJs是一个比较强大前台MVC框架，bootstrap是Twitter推出的一个用于前端开发的开源工具包，可以迅速搭建web前台，可以去官网看看（AngularJs：&，bootstrap：）。
2.github上有一个比较好的纯净AngularJs app的种子，可以去github下载，地址：。
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来启动，如果不太清楚，没关系，看我另一篇博客：（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），输入地址：，你就可以看到一个简单的页面出来了，别看它简单，麻雀虽小五脏俱全，所有的MVC相关的都包括了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：221822次
积分：2282
积分：2282
排名：第10713名
原创：67篇
评论：84条
(2)(10)(3)(2)(6)(1)(4)(7)(2)(3)(10)(2)(6)(11)angular material
如果你是说哪个框架有成熟的AngularJS directives可以用的话，可以考虑Bootstrap, Foundation和SemanticUI.&br&&br&UI Bootstrap:&br&&a href=&///?target=http%3A//angular-ui.github.io/bootstrap/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Angular directives for Bootstrap&i class=&icon-external&&&/i&&/a&&br&&br&Angular Foundation&br&&a href=&///?target=http%3A//pineconellc.github.io/angular-foundation/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Angular directives for Foundation&i class=&icon-external&&&/i&&/a&&br&&br&angular-semantic-ui&br&&a href=&///?target=http%3A//angularify.github.io/angular-semantic-ui/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&angular-ui-semantic&i class=&icon-external&&&/i&&/a&&br&&br&&a data-hash=&894a2af0bc1b184b8ead270b7c693004& href=&///people/894a2af0bc1b184b8ead270b7c693004& class=&member_mention& data-editable=&true& data-title=&@谢景扬& data-tip=&p$b$894a2af0bc1b184b8ead270b7c693004&&@谢景扬&/a& 提到的Angular Material也是不错的选择：&br&Angular Material&br&&a href=&///?target=https%3A//material.angularjs.org/latest/%23/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Material Design&i class=&icon-external&&&/i&&/a&
如果你是说哪个框架有成熟的AngularJS directives可以用的话，可以考虑Bootstrap, Foundation和SemanticUI.UI Bootstrap:Angular Foundationangular-semantic-ui
已有帐号？
无法登录？
社交帐号登录
个人一句话介绍> 最流行前端开发框架对比评测 包括Bootstrap UIkit等
最流行前端开发框架对比评测 包括Bootstrap UIkit等
如今，各种开发框架层出不穷，各有千秋。哪些是去年较受开发者关注的呢？前不久，云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架，并进行对比说明，希望帮助有需要的朋友选择合适自己的前端框架。
1. Bootstrap
Bootstrap毫无疑问是现今框架的领导者。他不仅仅流行，每天用户量也在不断增长。你可以相信，这个工具不会让你失望，你也可以单独使用它制作自己的网页。
创建者：Mark Otto and Jacob Thornton
发布：2011
当前版本：3.3.1
流行度：75,000+ stars on GitHub
描述：&Bootstrap is the most popular HTML, CSS, and&&JavaScript framework for developing responsive, mobile first projects on the web.&
核心概念/原理：RWD和 移动优先
框架大小：145 KB
预处理器：Less and Sass
响应式：Yes
模块化：Yes
起始模版/轮廓：Yes
图标集：Glyphicons
其他插件：无绑定，有其他三方插件
独特组件：Jumbotron
文档：Good
定制：基本 GUI 定制，不过需要手动修改,因为无颜色选取工具。
浏览器支持： Firefox、Chrome、Safari、IE8+（IE8需要 Respond.js）
授权： MIT
2. Foundation by ZURB
与Bootstrap相比，Foundation屈居第二，不过这并不能说明它不受欢迎。 ZURB在后面强有力的支持，使得 Foundation 更加强大！Foundation被各大网站使用，如Facebook、Mozilla、Ebay、 Yahoo、美国国家地理网站等等。
创建者：ZURB
发布：2011
当前版本：5.4.7
流行度：18,000+ stars on GitHub
描述： &The most advanced responsive front-end framework in the world&
核心概念/原理：RWD、Mobile First、Semantic
框架大小：326 KB
预处理器： Sass
响应式： Yes
模块化： Yes
启始模版/布局： Yes
图标集：Foundation Icon Fonts
其他组件：Yes
独特组件：Icon Bar、 Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables
文档：Good。有许多资源可参考。
定制： 无GUI 定制，但可自己写。
浏览器支持： Chrome、Firefox、Safari、IE9+、 iOS、Android、Windows Phone 7+
与众不同：对于商务运输、教育培训、咨询等行业来说，Foundation是一个专业框架。它还提供很多资源让你快速学习。
&3.Semantic UI
Semantic UI正在不懈努力让网页制作变得更加Semantic。原生语言规则让代码更易读易懂。
创建者：Jack Lukic
发布：2013
当前版本：1.2.0
流行度：12,900+ stars on GitHub
描述： &A UI component framework based around useful principles from natural language.&
核心概念/原理： Semantic、Tag Ambivalence、Responsive
框架大小：552 KB
预处理器：Less
响应式：Yes
模块化：Yes
启始模版/布局：No
图标集：Font Awesome
其他组件：No
独特组件：Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、 Statistic、Dimmer、Rating、Shape
文档： 非常完善。Semantic 提供多个结构层次的文档，单独网站提供给初学者以及其它定制教程等。
定制：无GUI 定制，但可自己写。
与众不同：Semantic可以说今天所讨论的框架中是最创新、功能最全面的框架。整体构架、命名规则，有清晰的逻辑、语义性，超过其它框架。
4. Pure by Yahoo!
Pure是一个纯CSS编写，轻量级的、模块化的框架，包含各种整合和独立的组件。
创建者：Yahoo
发布：2013
当前版本：0.5.0
流行度：9,900+ stars on GitHub
描述：&A set of small, responsive CSS modules that you can use in every web project.&
核心概念/原理： SMACSS、Minimalism
框架大小：18 KB
预处理器：None
Responsive：Yes
模块化：Yes
启始模版/布局：Yes
图标集：None。可使用Font Awesome替代。
其他组件：None
独特组件：None
文档：Good
定制：Basic GUI Skin Builder
浏览器支持：最新版本的Firefox，Chrome，Safari，IE7+，iOS 6.x、7.x， Android 4.x。
授权：Yahoo! Inc. BSD
与众不同：Pure为你的项目提供干净的基础框架。对于那些不需要一个全功能的框架，只需要特定的组件的开发者，Pure是一个不错的选择。
5. UIkit by YOOtheme
UIkit 是一个简洁的易于使用和易于定制组件。虽然它不像其竞争对手一样受欢迎,但是它提供了和上面框架相同的功能，质量也很不错。
创建者：YOOtheme
发布：2013
当前版本：2.13.1
流行度：3,800+ stars on GitHub
描述：&A lightweight and modular front-end framework for developing fast and powerful web interfaces.&
核心概念/原理：RWD、Mobile First
框架大小：118 KB
预处理器：Less、Sass
响应式：Yes
模块化：Yes
启始模版/布局：Yes
图标集：Font Awesome
其他组件：Yes
独特组件：Article、Flex、Cover、HTML Editor
文档：Good
定制：高级GUI定制
浏览器支持 ：Chrome、Firefox、Safari、IE9+
与众不同：UIkit在许多中都有应用。通过GUI编辑器和手动编辑，它提供了一个灵活、强大的自定义机制。
6.Amaze UI
Amaze UI是以移动优先（Mobile First）为理念，相比国外框架，它更关注中文排版，被前端工程师们赞称最懂中文的前端框架，正式上线仅仅4个月，已经在Github上获得1500+stars，可见火力十足。
创建者：云适配
发布：2014
当前版本：2.0.0
流行度：1500+ stars on GitHub
描述：Amaze UI 是一个移动优先的跨屏前端框架，含有丰富组件可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。
核心概念/原理：Responsive、Web Components
框架大小： CSS 40KB、JS 48KB (gzipped)
预处理器：Less
模块化：Yes
启始模版/布局：Yes
图标集：Font Awesome
其他组件：Yes
独特组件：加载进度条、侧边栏、图片轮播、固定元素、分页、折叠面板、图片画廊等。
文档：Amaze UI文档非常完善适应各个阶段的开发者，提供多个结构层次的文档，API 设计合理并易于学习和使用，BUG反馈依靠GitHub和官方QQ群、多说留言等，使用者能及时反馈问题。
定制：目前无GUI 定制，定制需要下载定制配置文件，下载 Amaze UI 的源码使用 gulp 构建工具自定义编译。
浏览器支持： 面向现代浏览器开发，对 IE 8提供有限的支持。
与众不同：Amaze UI 加入了更多符合中国市场特性的元素：中文排版更优化，兼容中国本土主流浏览器，Web 组件按照 Web Components 的实现形式，将移动开发中常用的组件切割成不同部分，大大提高开发效率。
什么样的框架适合你？
&最后，给出几点建议，帮助大家选择适合自己的框架：
框架足够流行吗？
越是流行说明使用的人越多，各种资源也就越多，可以交流的方式也就越多。被抛弃的几率越小，你可以更加安心使用该框架。
框架是在持续发展吗？
好的框架需要不断更新改善，适应当前的各种技术，尤其是移动端。
框架成熟吗？
如果，一个框架没有在实际项目中实践，你可以随便拿来练手，但是，如果要用到专门的项目中，还是找比较成熟的框架靠谱。
是否提供完善文档？
在学习阶段，一份完善的文档可以帮助我们事半功倍。
特异性程度如何？
相比一个特殊的框架，一个通用的框架可以让开发更加简单。大多数情况下，选择最小的样式可以让定制更简便，添加新CSS比覆盖原有样式更加简单易操作且更有效率。
最后，如果你还是不太确定这框架是否适合自己，你可以从不同项目中找出一两个组件放入自己的项目中。如此合成，应该也是有帮助的。有哪些值得推荐的类似 jQuery UI 或者 Bootstrap 这样的 UI 框架？
按投票排序
给一个非常轻量级的：pure
Flat UI Flat UI是一套精美的扁平风格 UI 工具包，基于
实现。地址：BootMetro
基于 Twitter
框架构建，用于创建 Windows 8 的 Metro 风格的网站，灵感来自于
。地址：Pure 是来自雅虎的 CSS 框架，使用
无需任何 JavaScript 代码。框架基于响应式设计，提供多种样式的组件，包括表格、表单、按钮、表、导航等。标识使用非常简单，整个框架非常轻量级，压缩后只有 5.7kb。地址： Semantic UI—完全语义化的前端界面开发框架，跟
比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。地址：jQuery UI Bootstrap 提供了在
集成 Twitter 的
框架的功能。地址：Foundation 是一个易用、强大而且灵活的框架，用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。地址：Fbootstrapp 是一个基于
提供了跟 Facebook iframe apps 和设计的功能。包含基本的 CSS 和 HTML 用于所有标准组件，包括排版、表单、按钮、表格、网格、导航等等，风格跟 Facebook 类似。地址：
bootstrap stilearnbootstrap charismabootstrap charismabootstrap se7enbootstrap se7enbootstrap smartadminbootstrap macbootstrap macbootstrap Metronicbootstrap Metronicbootstrap Garbinibootstrap Garbinibootstrap andiabootstrap andiabootstrap bracket adminbootstrap bracket adminbootstrap maruti adminbootstrap wide adminbootstrap ace admin v1.3.1bootstrap matrix adminbootstrap metronicbootstrap metronicbootstrap vanilla-creambootstrap vanilla-cream更多
由国外著名wordpress和joomla主题制作团队－Yootheme开发的uikit。
说个在用的吧：中文站：
推荐easyui,企业级开发神器
Kendo UI :
99Lime HTML KickStart Skeleton Fbootstrapp
这个是基于Bootstrap的，类Facebook的样式库
补充一个 jQuery UI Bootstrap
extjs文档最全，适合做大型项目 DWZ是国产框架基于jquery容易上手 kendo我也是刚看到的，基于HTML的非常好用，界面很友好，文档也很全其他的还有easyui / YUI/
Jquery UI / Dojo等
有个叫做jquery easyui的框架，还有个叫做dwz的。，你可以去看看
SMTB - Semantic UI Bootstrap基于 Semantic UI 的 Bootstrap skin
虽然外观上说不是很突出，但是辅助类用得真是爽。
像 `am-margin-sm`, 'am-text-lg' 这些用起来很是方便。不过呢里面的模块倒是还算可以，就是辅
助类爽。平时不用amazeui 我都会把辅助类抽出来用.--- Semantic, Flat这些外观挺不错，但是用起来并不是那么爽，看起来爽就是了，semantic的兼容性问题更是头疼，运行会比较卡。Foundation看了文档，心里一想，还不如用bootstrap呢，就没去试过。Pure还不错。
extjs，有很多demos还有完整的文档
FbootstrappBootMetroKickstrapFoundationGroundworkCSSGumbyHTML KickStartIVORYKube【原文】
在技术路线上与bootstrap最相近的莫过于
也很成熟。
已有帐号？
无法登录？
社交帐号登录　　英文原文：
　　如果你正打算使用 AngularJS 构建 Web 应用程序，那么你需要一段时间上手。不过你也不用担心，因为有一些框架可以让你轻松获取 AngularJS 支持。并且框架中一些预先安装好的 Web 组件，允许你快速构建 Web 应用程序。下面就是五款这样的框架，这些框架可以帮助你使用 AngularJS 建立基于 Web 的应用程。
　　1. AngularUI&Bootstrap：
　　该框架基于 Bootstrap，一个前端框架的基础上。它包含了一组 Bootstrap 部件，如 Carousel、Alert、Collapse、Rating 和 TimePicker。所有的组件都使用 AngularJS 指令和自定义 HTML 元素。如果你喜欢使用 Bootstrap 程序，那么这个框架必将成为你的好帮手。
　　官方网站：
　　2. Angular Foundation：
　　这也是一个被移植过来的可以使用 AngularJS 的一个流行框架。它改变了 Foundation 的组件，采用 AngularJS 指令和自定义 HTML 元素，以此通过 HTML 元素来构建 Web 应用。基于这个原因，比起上面那个，可能你会更喜欢这个框架。你可以下载 Angular Foundation，并且通过其 GitHub 页面保持项目的开发更新。
　　官方网站：
　　3. Ionic Framework：
　　Ionic 包含的一些构建模块，可以让我们快速简单地开发移动应用程序。Ionic Framework 的组件已经在触摸和手势方面优化了它的移动体验。UI 组件均采用自定义的 HTML 元素。此外，还有 Ionic Creator 选项，有助于我们更便捷地创建应用程序。所以，如果你对性能和速度方面的要求最高，那么 Ionic Framework 将会是最适合你的框架。
　　官方网站：
　　4. Mobile Angular UII：
　　Mobile Angular UII 是一款移动 UI 框架，是 Bootstrap 框架的扩展，用于更快地构建移动应用程序。它使用的是 Bootstrap3 的语法和一些特定的移动部件，并且它能通过添加 CSS 使得内容可以响应、具备触摸功能，从而将 Web 应用程序转换为它的移动版本。
　　官方网站：
　　5. & UI Grid：
　　如果你需要在网格中工作或者用 AngularJS 制作表格，那么 UI Grid 可能是最适合的框架了。无论是简单的还是复杂的数据集，此框架丰富的功能都允许一一显示在网格中。
　　官方网站：
　　以上 5 个 AngularJS 框架就是我们推荐的，欢迎推荐更好的 AngularJS 框架。
　　译文链接：
　　翻译作者：&& 小峰