ionic如何创建app项目_javascript技巧

《ionic如何创建app项目_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Ionic如何创建APP项目前面的章节中我们已经学会了ionic框架如何导入到项目中。接下来我们将为大家介绍如何创建一个ionicAPP应用。ionic创建APP使用HTML、CSS和Javascript来构建,所以我们可以创建一个WWW目录，并在目录卜•创建index,html文件,代码如b：大家按照步骤在自C的编辑器上来认真的完成这个APP的创建吧。

2、ewport"content二〃initial-scale二1,maximum-scale二1,user-sealable=no,width=device-width〃>〈linkhrcf=z，lib/ionic/css/ionic・css"rcl二〃stylesheet"〉

3、->〈/script>以上代码中，我们引入了IonicCSS文件、IonicJS文件及IonicAngularJS扩展ionic.bundlc.js(ionic.bundie・js)。ionic,bundle,js文件已经包含了Ionic核心JS、AngularJS>Ionic的AngularJS扩展，如果你需要引入其他Angular模块,可以从lib/js/angular目录中调用。cordova.js是在

4、使用Cordova/PhoneGap创建应用时生成的，不需要手动引入,你可以在Cordova/PhoneGap项目中找到该文件，所以在开发过程中显示404是正常的。创建APP接下来我们来实现一个包含标题、侧边栏、列表等的应用，设计图如下:创建侧边栏侧边栏创建使用ion-side-menus控制器。编辑我们先前创建的index,html文件,修改＜body＞内的内容,如下所示:

5、>〈ion-side-mermside二〃left〃>〈/ion-side-menu>控制器解析：ion-side-menus：是一个带有边栏菜单的容器，可以通过点击按钮或者滑动屏幕来展开菜单。ion-side-menu-content：展示主要内容的容器，口J以通过滑动屏幕來展开menu。ion-side-mcnu：存放侧边栏的容器。初始化APP接下来我们创建一个新的AngularJS模块，并初始化，代码位于www/js/app.js中:angular・mod

6、ule('todo',['ionic'])之后在我们的body标签中添加ng-app属性：上面引入app.js文件:修改index,html文件body标签的内容，代码如下所示：〈ion-side-merm-conlent>

7、〈ion-header-ben?class=//bar-dark，，>TodoProjects

8、de-menu〉以上步骤我们已经完成了ionic基本APP的应用。创建列表首先创建一个控制器TodoCtrl：在app.js文件屮，使用控制器定义列表数据：angular,moduleCtodo",['ionic'])•controller(，TodoCtrl',fu