Hybird HTML5 App(移动应用开发)之3.Ionic的项目结构

前面使用命令ionic start myapp下载了默认的Ionic应用程序,下面我们打开应用程序项目,来分析一下Ionic项目的结构。项目结构图如下:

 

我们来大致了解一下每个文件夹的作用

1、hooks:文件夹是伴随Cordova的安装自动生成的文件夹,该文件夹有脚本可以定制Cordova命令。一般情况下,不对该文件夹中的文件进行更改。

2、plugins:用于放置Ionic扩展文件的文件夹。比如升级或者扩展Ionic的时候。为了安装这些扩展文件,你需要确保安装了Git。通常不对该文件夹进行改动。

3、.bowerrc:Ionic偶尔会使用Bower去安装一些组件,所以bowerrc文件产生了,通常不对该文件进行修改

4、.gitignore:当使用Git和GitHub追踪项目,.gitignore可以用来指定忽略文件。如果你不想特定的文件夹和文件被上传到Git仓库(repository),你可以使用gitignore防止文件转移。

5、config.xml:config.xml是另外一个Cordova安装文档,通常也不需要修改。

6、gulpfile.js:控制着允许Ionic自动重载浏览器的自动操作。同时,它还负责其他事情,比如:处理文件。

7、package.json:package.json文件在许多Nodejs项目里都会出现, 它定义了这个项目所需要的各种模块,以及项目的配置信息,比如名称、版本、许可证等元数据 。 Node和Gulp工具可以依据文件中的项目需求和配置信息,去履行责任。一般不修改该文件。

最后、详细说明一下scss和www这两个文件夹的作用。

scss文件夹:如果在Ionic项目,想要使用CSS的预处理语言SASS来修改应用程序的样式,那么你可以在scss文件夹下的相应文件覆盖Ionic的默认值。如果你熟悉SASS语言,你可以在相应scss文件添加SASS命令,或者更改目录结构,增加子文件夹。如果你想在项目中使用SASS去工作,你需要首先运行Ionic SASS 命令。

www文件夹:先来看看www文件夹的内容结构:

 

1、css:可以在此文件夹中的样式文件中编写自己的CSS,从而改变Ionic应用程序的默认样式。

2、img:用于存放图片,图片可运用在所建立的项目中。

3、js:用于放置js文件的文件夹,其中以AngularJS文件为主。它包括三个文件:

1)app.js:通过控制器和指令加载angularJS文件的主要应用程序文件。

2)Controller.js:可用于任何类型的JavaScript文件,可被添加到应用程序的不同部分。

3)services.js::services.js包含了通用的数据,数据将运用在设计的应用程序当中。

4、lib:用于集中存放项目需要用到的库文件和其他项目资源,比如AngularJS, CSS,SCSS相关等。创建的应用程序能够访问这些库文件和资源。其中,在这个文件夹下引用的AngularJS文件,不一定是最新版本的,一般情况下,不建议修改或更新这些文件。

5、templates:放置AngularJS模板文件的地方,设计的应用程序会采用里面的模板,在你的应用程序的页面展现出来。你也可以在这个文件夹内创建子文件夹,添加你自己的模板。

6、index.html:index.html文件是应用程序的核心文件,文件将被Ionic载入浏览器。这个文件看起来就像是普通的HTML 或者AngularJS文件。

今天先写到这里,明天继续,详细内容可点击链接http://pan.baidu.com/s/1skbQATZ进入云盘查看。

Ionic的项目结构(angluar js)的更多相关文章

  1. Ionic的项目结构-工程目录

    做前端的都应该知道一个框架  Ionic  这个是移动端webAPP最好用的吧(个人认为),那今天就来说说这个项目的结构以及文件的含义,希望对大家有所帮助 想看如何生成文件的话详细看我上篇博客 在用编 ...

  2. Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...

  3. Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构

    目录: 一.ionic的安装 二.创建第一个应用程序 三.浏览器中预览应用 四.项目结构 五.添加页面 一.ionic的安装 使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI ...

  4. [ionic开源项目教程] - 第2讲 新建项目,配置app.js和controllers.js搭建基础视图

    新建项目 由项目功能架构图选择合适的页面架构,这里选用Tab,ionic新建项目,默认的模板就是tab. $ ionic start TongeNews Creating Ionic app in f ...

  5. ionic项目结构解析

    ionic项目结构解析 原始结构 创建一个IonicDemo项目 'ionic start IonicDemo sidemenu' 这种结构多模块开发比较麻烦,因为view跟controller分开路 ...

  6. Vue.js系列之项目结构说明

    转:https://www.jb51.net/article/111658.htm 前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli ...

  7. 认识ASP.NET 5项目结构和项目文件xproj

    ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样的地方. 我们先用 Visual Stu ...

  8. django开发个人简易Blog——构建项目结构

    开发之前第一步,就是构造整个的项目结构.这就好比作一幅画,第一步就是描绘轮廓,有了轮廓,剩下的就是慢慢的填充细节.项目结构规划如下图: 项目结构描述: 本项目以fengzhengBlog为根目录. a ...

  9. [ionic开源项目教程] - 手把手教你使用移动跨平台开发框架Ionic开发一个新闻阅读APP

    前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结.实战开发中遇到的各种问题的解决方案,也都将毫无保留的分享给大家. 关注订阅号:TongeBlog ,查看移动端跨平台 ...

随机推荐

  1. mysql应用学习-在cmd命令窗口下创建数据库和表

    运行以下操作,请确认您已经正确安装和配置了mysql. 首先要运行cmd.exe,进入命令窗口. step1. 进入MySQL monitor 如果您已登录mysql,可直接进入step2;若未登录请 ...

  2. jeecg308 <t:authFilter />标签失效的问题

    <%--该标签放到body末尾会无效,估计是js冲突,放到body前好用--%><t:authFilter /> <body></body>

  3. 用单例模式解决临界区(CRITICAL_SECTION)的使用问题

    一.前言 最近,在项目中涉及到多线程访问临界资源的问题.为了保护临界资源,可以是使用互斥量或者是使用临界区.由于,我不需要在多进程中同步,又为了效率的考量,所以选择了使用临界区的方式.但是,在使用临界 ...

  4. cf567E. President and Roads(最短路计数)

    题意 题目链接 给出一张有向图,以及起点终点,判断每条边的状态: 是否一定在最短路上,是的话输出'YES' 如果不在最短路上,最少减去多少权值会使其在最短路上,如果减去后的权值\(< 1\),输 ...

  5. Android XMPP 例子(Openfire+asmack+spark) 出现登陆连接错误

    Android XMPP 例子(Openfire+asmack+spark) 运行出来没问题,但是登陆的时候出现如下错误: 出现错误: 09-17 15:24:16.388: E/AndroidRun ...

  6. jscode属性排序

    根据data中的value 对geCoorMap 进行排序,暂定降序排序. var data = [{name:"name1",value:29},{name:"name ...

  7. Siebel Tools 开发笔记

    1.在Siebel Client上的菜单Help -> View 中可以找到开发所常用的信息 Screen:   此画面所使用的Screen名字在Tools的Object Explorer中的[ ...

  8. Locust性能测试2 分布式运行

    locust分布式可以是本机多进程,也可以是本机作为master,其他机器作slave. 试一下本机的多进程运行: 1  控制台输入 locust -f 脚本路径 --master 2  打开另一个控 ...

  9. SpringCloud实战4-Hystrix线程隔离&请求缓存&请求合并

    接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...

  10. linux下vi的一些简单的操作

    前言 在嵌入式linux开发中,进行需要修改一下配置文件之类的,必须使用vi,因此,熟悉 vi 的一些基本操作,有助于提高工作效率. 一,模式 vi编辑器有3种模式:命令模式.输入模式.末行模式.掌握 ...