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 相关文章推荐
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
js下载文件并修改文件名
May 08 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
js实现select下拉框选择
2020/01/11 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python分布式环境下的限流器的示例
2017/10/26 Python
python 接口返回的json字符串实例
2018/03/27 Python
python tkinter实现屏保程序
2019/07/30 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
新婚姻法离婚协议书范文
2014/11/30 职场文书
瘦西湖导游词
2015/02/03 职场文书
2015年度党员个人总结
2015/02/14 职场文书
开除通知书范本
2015/04/25 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫