ionic教程之Win10环境下ionic+angular实现滑动菜单及列表

时间 2019-11-16

标签 ionic 教程 win10 win 环境 ionic+angular angular 实现滑动菜单列表栏目 Windows 繁體版

原文原文链接

写博客，不容易，大家的评论和转载，就是个人动力，但请注明出处,隔壁老王的开发园：http://www.cnblogs.com/titibili/p/5124940.htmlhtml

2016年1月11日 21：53 做者：隔壁老王的开发园android

内容摘要：初识ionic框架，及ionic CSS样式、UI控件的添加，了解angular在ionic中的重要性ios

通过上一篇的博客介绍，咱们已经完成了win10下ionic的环境搭载工做，原文连接:web

http://www.cnblogs.com/titibili/p/5102035.html数据库

接下来，咱们来修改官方框架sidemenu实现自定义的webapp样式。微信

工具以下：webstorm（IDE）app

首先，咱们来建立一个sidemenu app,框架

命令提示符敲入：ionic start TestSideApp sedemenuwebapp

以下图：webstorm

建立好了，进入咱们建立的TestSideApp,

命令行敲入：cd TestSideApp

再运行看一下效果，

命令行敲入：ionic serve

这个就是咱们建立的一个官方sidemenu布局的网页，接下来，咱们要开始对它进行修改，不少读者可能会问，你为何不建立一个空的项目而后进行演示？我在这里说一下，框架是一个工具，而工具是拿来用的，为了不重复造轮子，下降学习成本，咱们直接上手ionic官方给的案例，岂不是更直接？

打开webstorm(File->Open)或者在所建立的目录下打开TestSideApp文件夹，咱们将会分别看到以下目录（先操做后讲解）：

紧接着，咱们打开www目录下的index.html文件,咱们会看到下图所示的ng-app=”starter”,除了<body>标签以外的内容，你均可以理解成引入那些依赖。。。（说的不够学术哈）

看图：

在webstorm下ctrl+鼠标左键点开这个starter；

咱们惊奇的发现这个starter是来自于app.js这个文件，

咱们能够很容易观察到下图的这三个东西和网页中的如出一辙的名字，也就是说，不出意外的话，网页左边的内容跟它们有关系，看图：

好，点开它们

除了最后一个多了一个controller外，这三个家伙除了名字不一样，彻底同样，也就是说，咱们想要在左边滑动菜单内添加内容，只须要先模仿它们的写法；抱着强烈的好奇心，我忍不住ctrl+左键点开了PlaylistCtrl

惊奇的发现：

原来，这里就是编写网页中这六个鬼东西的啊，二话不说，先改为中文；

好，玩够了，咱们回到app.js敲入以下方框内的代码：

如今来给你们稍微解释一下打问号的这两个东东，

（//定义本身去查）url的做用以下图：

TemplateUrl的做用就是指向templates文件夹内的网页

由此咱们可知，是时候该建立一个网页了，来，跟隔壁老王嗨起来：

左键单击左面templates------>File------>New

这里要注意一下，还记得咱们全部的视图也好，JS文件也好，都是包含在下图这个starter里面的，也就是说上图的laowang.html里面就没必要再包含index.html中<html></html>这样的标签了，咱们只须要写的就少了不少，大大的提升效率，这就是框架的好处哈~~

也就是说，咱们能够开始使用ionic的标签来写咱们的视图了，具体的组件样式介绍，能够去官网上查看，ionic官方连接在这：http://ionicframework.com/docs/components/#header

因此，以下图，咱们这样写：

到这里还不能显示咱们建立的上图这个网页，因此咱们往下看，

咱们能够发现，它们有联系：

因此，咱们须要在menu.html中添加以下内容：

保存所有，运行一下，咱们就完成了下图所示的效果：

接下咱们美化一下：

怎么玩，看官方文档随意发挥，最后老王的效果图以下：

好，赶快打包成手机APP，看一下吧~

不懂如何打包成android应用和修改应用图标及开启界面的同窗，请留言，我再出一篇教程

哈哈，终于操做完了，接下来我给你们系统的讲解一下，ionic+Angular+Cordova都是些什么鬼~~~~~

好，接下来我将经过这个ionic官方案例，给在座的你讲解整个项目的结构，以及咱们所要用到的代码块是如何运做的，在此以前，请你们先看几个图：

由上图可知，在HybridApp（混合App）的开发中, ionic主要负责View（视图）的功能，而Angular主要负责controller（控制器）和model（模型），而cordova/phonegap负责将这个网页项目打包成android、ios、winphone应用。

上图这个不用说了吧，哈哈~

依我我的理解ionic就是用来作外观的，也就是用来决定长相的，angular负责业务逻辑，（颇有内涵），cordova用来打包；因此咱们要想玩转ionic ，作完这篇文章大概了解一下ionic的视图是如何实现的，而后就赶忙奔向angular的怀抱吧，刚开始接触你可能会以为，怎么写几个界面绕来绕去的，但从MVC的角度出发，ionic这样一个MVC框架，当后面须要写的东西多的时候，你就会感激它的好了，国内的相关资料不多，有的也大可能是所有代码都往一个界面敲，彻底没法应用到实战中，若是不了解angular的初学者看了，彻底就是“What the fuck.”

因此，重要的事情说三遍：

学好Angular

固然，以上所说的均不涉及服务端、数据库开发~！~

下面，我给你们看些血脉喷张的图：

以上图片帮助你们理解angular基础知识，

下面这几张，是关于ionic的值得保存起来的图片，废话少说，看图：

ionic官方连接在这：http://ionicframework.com/docs/components/#header

写博客，不容易，大家的评论和转载，就是个人动力，

但请注明出处,隔壁老王的开发园：http://www.cnblogs.com/titibili/p/5124940.html

真心感谢！~

不懂如何打包成android应用和修改应用图标及开启界面的同窗，请留言，我再出一篇教程

最后，欢迎拍砖~

ps:更多精彩内容，请关注微信公众号：猿带马