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---项目搭建图文教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • angular学习之从零搭建一个angular4.0项目

    angular学习之从零搭建一个angular4.0项目

    话说现在angular更新迭代太快了,从前几年用angular版本去搭建项目时还是1.x版本,到现在都已经是angular4.0了(直接跳过了3.0),由于公司要求用到angular4.0,所以就不能只是了解一下了,谁让我那么热爱学习了(咳咳!此处有一个推眼镜的动作),废话不多说,直接上手,首先用到的工具会有angular4.0.angular-cli.npm(v3.10.8).node(v6.2.0) 上述node和npm包管理器版本是我本机的版本号,这个版本不要太低应该都没问题 angula

  • 详解用webpack2搭建angular2的项目

    webpack2和angular2搭建的项目 github地址:项目链接 npm install,安装依赖包 npm run dev,启动本地工程,在localhost:1699进行预览 package.json { "name": "angular-webpack", "version": "1.0.0", "description": "webpack2 & angular2"

  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

  • vue cli 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • Idea使用插件实现逆向工程搭建SpringBoot项目的图文教程

    之前写SpringBoot项目,每次都要手动去写实体类.dao层啥的,尤其是数据库表字段特别多的时候,特别麻烦.然后很多小伙伴都会用逆向工程来自动生成这些类,省去许多没必要的代码量,但是Mybatis的逆向工程依然需要配置,导逆向工程的jar啊,还有编写generatorConfig.xml文件啊(有兴趣的朋友可以看看这篇博客).今天逛gitee的时候,看到了一款可以免去许多配置的idea逆向工程插件,几个步骤简单使用一下 这个插件. 1.下载并安装EasyCode插件 Setting->Plu

  • 使用Idea简单快速搭建springcloud项目的图文教程

    使用Idea简单快速搭建springcloud项目的图文教程

    前言: 开发工具:IntelliJ IDEA 2020版 (Ultimate Edition) 框架:spring boot .spring cloud 搭建一套spring cloud微服务系统,实现服务之间的调用. 需要搭建一个父工程springcloud-test,一个服务注册中心eureka-server,两个微服务cloud-client,cloud-provider. 两个微服务均注册到服务注册中心. 一.搭建父项目 2. 3. (1)删掉src目录 (2)定义pom.xml文件 <

  • IDEA快速搭建jsp项目的图文教程

    IDEA快速搭建jsp项目的图文教程

    推荐教程 idea2021激活 idea2020.3最新激活 idea无限重置 IDEA搭建jsp环境 为了方便在IDEA中集成tomcat环境搭建好WEB的jsp项目 先讲解原理: 首先在IDEA中加入WEB模块 配置IDEA将WEB模块打包,运行tomcat时会编译,打包到一个文件夹路径 配置Tomcat服务器,通过IDEA将打包后的项目(编译的输出路径)部署到tomcat 第一步.去除原先的WEB模块 第二步.添加Web模块 指定正确的web.xml位置 第三步将web模块进行打包 第四步

  • 使用idea搭建一个spring mvc项目的图文教程

    最近在学习spring的相关知识,顺便记下笔记,与大家共享. spring运行流程如下图所示: [流程] user发送request,DispatcherServlet(等同于Controller控制器),控制器接收到请求,来到HandlerMapping(在配置文件中配置),HandlerMapping会对URL进行解析,并判断当前URL该交给哪个controller来处理,找到对应的controller之后,controller就跟server.Javabean进行交互,得到某一个值,并返回

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

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

    开发工具采用WebStorm,没破解,使用了过期策略:安装之后不着急打开程序,先设置系统日期为未来的某个日期,比如2020年.然后再打开程序,试用.然后再改回来系统日期.虽然每次打开WebStorm都会提示: 不过不影响使用,点击"OK"继续吧. 项目采用anguarjs seed项目作为基础框架,搭建完成之后如下: .bowerrc的配置如下: { "directory": "app/lib"} 3. app中的各view拆分成不同的目录存放,

  • 初学者易上手的SSH-struts2 01环境搭建(图文教程)

    初学者易上手的SSH-struts2 01环境搭建(图文教程)

    首先,SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框架的系统从职责上分为四层:表示层.业务逻辑层.数据持久层和域模块层(实体层). Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久层提供支持.Spring一方面作为一个轻量级的IoC容器,负责查找.定位.创建和管理对象及

  • linux环境安装node.js开发环境搭建图文教程

    linux环境安装node.js开发环境搭建图文教程

    Node.js现在有多火,有多重要,就不多说了,这里介绍一下他的开发环境安装,通常情况下,我们都是在window环境进行开发,或者是在mac环境下进行开发,但是我们的项目实际运行的环境一般都是在linux上的,所以我们让我们的开发环境和生产环境能够尽量统一,且能够方便我们开发,一般我们将必要环境安装在服务器上,然后在window上通过xshell,SecureCRTPortable等一些工具连接上去,在window上使用方便IDE软件开发,然后通过ftp将文件同步上去,所以这里就讲一些如何在服务

  • SSM框架搭建图文教程(推荐)

    SSM框架搭建图文教程(推荐)

    好久就想着好好搭建一个ssm框架,自己以后用也方便吧,但是最近的事真的是很多,很多事情都没有去干,有时候自己会怀疑一下人生自己该不该去做程序员,我是一个没毕业的学生,找工作真的是四处碰壁,感觉自己好难混,一个暑假换了3个公司.我其实就想找一个公司能干自己想干的技术,能学到自己想学到的东西,可是我发现太难了,几乎没有这样的公司.所以说在你不是很牛逼的时候,人得适应公司,而不是公司适应你.第一个公司的一个老程序员和我去公司必须能吃上饭,能吃上饭再想其他的东西,而我是个90后,我明白我的性格,一遇到难

随机推荐