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

 更新时间:2016年07月08日 08:55:26   投稿:jingxian  
下面小编就为大家带来一篇Angularjs---项目搭建图文教程。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

.bowerrc的配置如下:

{ "directory": "app/lib"}

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

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

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

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

相关文章

  • nodejs搭建本地http服务器教程

    nodejs搭建本地http服务器教程

    本篇文章主要介绍了nodejs搭建本地http服务器教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • 深入理解Node.js回调函数

    深入理解Node.js回调函数

    这篇文章主要介绍了Node.js回调函数,为了解决回调函数的缺点,出现了一些替代方案,如Promise、async/await等,这些方案提供了更简洁、可读性更高的代码结构,使异步编程更加容易和可维护,需要的朋友可以参考下
    2023-11-11
  • node.js利用redis数据库缓存数据的方法

    node.js利用redis数据库缓存数据的方法

    Redis数据库采用极简的设计思想,最新版的源码包还不到2Mb。其在使用上也有别于一般的数据库。下面这篇文章就来给大家介绍了node.js利用redis数据库缓存数据的方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • nodejs简单实现操作arduino

    nodejs简单实现操作arduino

    本文给大家分享的是使用nodejs来驱动arduino,主要是基于cylonjs 和 gort,有需要的小伙伴可以参考下
    2016-09-09
  • node.js中的events.emitter.removeAllListeners方法使用说明

    node.js中的events.emitter.removeAllListeners方法使用说明

    这篇文章主要介绍了node.js中的events.emitter.removeAllListeners方法使用说明,本文介绍了events.emitter.removeAllListeners 的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • 详解离线安装npm包的几种方法

    详解离线安装npm包的几种方法

    这篇文章主要介绍了详解离线安装npm包的几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Node.js操作Firebird数据库教程

    Node.js操作Firebird数据库教程

    这篇文章主要为大家分享了Node.js操作Firebird数据库教程,思路清晰便于大家理解,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Node.js Buffer用法解读

    Node.js Buffer用法解读

    这篇文章主要介绍了Node.js Buffer用法解读,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Node.js中的进程间通信

    Node.js中的进程间通信

    这篇文章主要介绍了Node.js中的进程间通信,文章围绕主题展开详细的内容戒杀,具有一定的参考价值,感兴趣的小伙伴可以参考一下
    2022-09-09
  • Node中node_modules文件夹及package.json文件的作用说明

    Node中node_modules文件夹及package.json文件的作用说明

    这篇文章主要介绍了Node中node_modules文件夹及package.json文件的作用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论