搜索
Ionic的项目结构Ionic默认项目的文件夹和文件Ionic项目的文件夹和文件--------------------------------在用编辑器Sublimetext打开生成的项目以后，我们可以看到一系列自动生成的文件夹和文件。--------------------------------下一步项目文件位置：miaomiaoxue\01-初识Ionic\defaultApp\文件夹hooks文件夹--------------------------------hooks文件夹是伴随Cordova的安装自动生成的文件夹，该文件夹有脚本可以定制Cordova命令。一般情况下，不对该文件夹中的文件进行更改。--------------------------------下一步文件夹plugins文件夹--------------------------------用于放置Ionic扩展文件的文件夹，比如升级或者扩展Ionic。为了安装这些扩展文件，你需要确保安装了Git。通常我们不对该文件夹进行改动。scss和这两个文件夹，是项目中经常会用到的文件夹，放在最后介绍，我们先看看额外的几个附加文件。--------------------------------下一步文件bowerrc文件--------------------------------Ionic偶尔会使用Bower安装一些组件，所以产生了bowerrc文件，通常不对该文件进行修改。--------------------------------下一步TIP--------------------------------Bower:针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包，并管理这些包之间的依赖。文件.gitignore文件--------------------------------使用Git和GitHub追踪项目时，.gitignore可以用来指定忽略文件。如果不想特定的文件夹和文件被上传到Git仓库（repository)，我们可以使用.gitignore防止文件转移。--------------------------------下一步TIP------------------------在Git中，我们将需要进行版本控制的文件目录叫做一个仓库，每个仓库可以简单理解成一个目录，这个目录中的所有文件都通过Git来实现版本管理，Git都能跟踪并记录在该目录中发生的所有更新。文件config.xml文件----------------------------config.xml是另外一个Cordova安装文档,通常也不需要修改。----------------------------下一步文件gulpfile.js文件--------------------------该文件控制着允许Ionic自动重载浏览器的自动操作；还负责其他事情，比如处理文件。--------------------------下一步TIP--------------------------------使用扩展语言SASS有多种方式，可以使用SASS语法，可以使用新的SCSS语法，也可以改变SASS压缩的方式，这些都可以在gulpfile.js中定制。gulp是前端开发过程中对代码进行构建的工具，gulpfile.js是gulp项目的配置文件。文件package.json文件---------------------------package.json文件出现在许多的Node.js项目中，它定义了这个项目所需要的各种模块及项目的配置信息，如名称、版本、许可证等元数据。Node和Gulp工具可以依据文件中的项目需求和配置信息来履行责任。一般不修改该文件。---------------------------下一步文件夹scss文件夹----------------------------如果在Ionic项目中使用的是CSS的预处理语言SASS，就可以在scss文件夹下的相应文件覆盖Ionic的默认值。如果熟悉SASS语言，我们可以在相应scss文件添加SASS命令，或者更改目录结构，增加子文件夹。如果想在项目中使用SASS工作，我们需要首先运行ionicsetupsass命令。----------------------------下一步文件style.css文件--------------------------------可以在此文件中编写你自己的CSS，改变Ionic的默认样式。--------------------------------下一步文件夹img文件夹----------------------用于存放图片，图片可运用在所建立的项目中。----------------------下一步文件夹js文件夹------------------------------放置JavaScript的文件夹,以AngularJS文件为主。它包括三个文件。------------------------------下一步文件夹下的三个文件js文件夹下的三个文件---------------------------------------------app.js文件是通过控制器和指令加载angularJS文件的主要应用程序文件。angular.module创建新的模块starter，并获取starter依赖的已有模块“starter.controllers”和“starter.services”,加载controllers.js和services.js两个文件。controllers.js可用于任何类型的JavaScript文件，可被添加到应用程序的不同部分。services.js包含了通用的数据，数据将运用在设计的应用程序当中。---------------------------------------------下一步文件夹lib文件夹------------------------------用于集中存放项目需要用到的库文件和其他项目资源，比如AngularJS,CSS，SCSS的库文件和资源等。创建的应用程序能够访问这些库文件和资源。------------------------------下一步拷贝文件angularJS拷贝文件-----------------------------------------Ionic自带angularJS拷贝文件，这些文件不一定是最新版本的文件。但没有必要的话，我们一般不更新Ionic的AngularJS文件，版本改变或更新时可能导致问题产生。-----------------------------------------下一步模块文件angular模块文件----------------------------------模块文件包含了不同种类的模块，其中包含animate,resource,sanitize模块等。这些模块随AngularJS文件一起加载。----------------------------------下一步路由AngularUI路由-------------------------------------Ioinc并不使用默认的AngularJs路由，而是使用不同的基于状态states的AugularUI路由。后面会讲述这部分内容。-------------------------------------下一步文件夹templates文件夹-----------------------------------------用于放置AngularJS模板文件，设计的应用程序会采用其中的模板，通过应用程序的页面展现出来。我们也可以在这个文件夹内创建子文件夹，添加自己的模板。-----------------------------------------下一步文件index.html文件----------------------------这是应用程序的核心文件，文件将被Ionic载入浏览器。该文件看起来就像是普通的html或AngularJS文件。----------------------------下一步指令ng-app指令---------------------------ng-app指令在body部分。---------------------------下一步标签ion-nav-bar标签---------------------------该标签创建一个顶部工具栏，你也许不需要使用这个标签，但它存在于许多的应用程序中，并且有时有不同的呈现和版本。---------------------------下一步标签ion-nav-view标签------------------------------------------假设我们会在应用程序中使用导航，那内容的去处就在ion-nav-view，我们的路由将会把不同网页的内容放置在ion-nav-view中。------------------------------------------下一步结束语使用Ionic创建应用程序与其他Web项目有很大的不同，因为Ionic已经把大部分内容搭建和组织好了。既然我们已经对Ionic默认项目的基本结构有了初步的认识，下一节我们就来学习如何创建应用程序。下面我们来做几个练习题，巩固一下本节的知识。://判断题解答：正确当使用Git和GitHub追踪项目，.gitignore文件可以用来指定忽略文件。如果你不想特定的文件夹和文件被上传到Git仓库（repository)，你可以使用.gitignore防止文件转移。正确正确错误错误.gitignore文件可以用来指定忽略文件，这样这部分被忽略的文件就无需纳入Git的管理。判断题解答：正确ion-nav-view能根据状态的变化，来提取对应的模板内容，渲染模