Angularjs---项目搭建图文教程


Posted in Javascript onJuly 08, 2016

开发工具采用WebStorm,没破解,使用了过期策略:安装之后不着急打开程序,先设置系统日期为未来的某个日期,比如2020年。然后再打开程序,试用。然后再改回来系统日期。虽然每次打开WebStorm都会提示:

Angularjs---项目搭建图文教程

不过不影响使用,点击“OK”继续吧。

项目采用anguarjs seed项目作为基础框架,搭建完成之后如下:

Angularjs---项目搭建图文教程

.bowerrc的配置如下:

{ "directory": "app/lib"}

3. app中的各view拆分成不同的目录存放,如下:

Angularjs---项目搭建图文教程

4. 接下来是依赖的第三方库导入,bower install --save 库名

用到的几个:

angular-local-storage : 本地存储,如果不支持localstore,自动切换为cookie

angular-summernote : 简易的富文本编辑,界面引用简单,记着在app.js中注册“summernote”

<summernote height="300" lang="zh-CN"></summernote>

angular-base64和angular-md5 加解密

bootstrap 样式必然是这个

bootstrap-fileinput 图片上传,支持上传即可预览

5. 配置打包的fis-config.js

// 包含所有文件
fis.config.set('project.include', '**');
// 排除目录
fis.config.set('project.exclude', /^\/lib\/.*\/src\//i);

// 加载pack
fis.config.set('modules.postpackager', 'simple');
fis.config.set('pack', {
  'js/application.js': [
    '/lib/angular/angular.min.js',
    '/lib/angular-route/angular-route.min.js',
    '/lib/jquery/dist/jquery.min.js',
    '/js/app.js',
    '/js/controllers.js',
    '/js/directives.js',
    '/js/filters.js',
    '/js/services.js'
  ],
  'css/application.css': [
    '/lib/bootstrap/dist/css/bootstrap.min.css',
    'lib/font-awesome/css/font-awesome.min.css',
    '/css/**.css'
  ]
});

fis.config.merge({
  roadmap : {
    domain : {
      '**.css' : '/ocs',
      '**.js' : '/ocs',
      '**.eot' : '/ocs',
      '**.ttf' : '/ocs',
      '**.woff' : '/ocs',
      '**.woff2' : '/ocs'
    }
  }
});
fis-config.js

6.样式模板,选了几个基于angulajs+bootstrap的开源项目,感觉不错的两个个

AdminLTE:git://github.com/almasaeed2010/AdminLTE.git

Angularjs---项目搭建图文教程

charisma:https://github.com/usmanhalalit/charisma/archive/master.zip

Angularjs---项目搭建图文教程

以上这篇Angularjs---项目搭建图文教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
JavaScript 学习技巧
Feb 17 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 #Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 #Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 #Javascript
简单实现js页面切换功能
Jan 10 #Javascript
JavaScript作用域示例详解
Jul 07 #Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 #Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 #Javascript
You might like
php简单提示框alert封装函数
2010/08/08 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JavaScript 的继承
2011/10/01 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python微信公众号开发平台
2018/01/25 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
零基础学python应该从哪里入手
2020/08/11 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
网络工程师的自我评价
2013/10/02 职场文书
幼教简历自我评价
2014/01/28 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB