ionic 项目中创建侧边栏的具体流程分4步简单学会

这是在学习ionic时,当时遇到的一些问题,觉得很难,就记笔记下来了,现在觉得如果可以拿来分享,有可能会帮助到遇到同样问题的人

ionic slidemenu

项目流程:

cd pretices(自己创建的文件夹名称)

ionic start oneApp blank(创建一个空项目)

在WWW文件夹下创建templates,controllers 文件夹

1、创建slidemenu方法

index 页面

<ion-nav-view></ion-nav-view>

在app.js里面添加

app.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider

        .state('app', {

            url: "/app",

            templateUrl: "templates/menu.html",

            controller: 'appCtrl'

        });

    $urlRouterProvider.otherwise('/app');

});

  

这里是ionic路由配置问题,如果看不太懂,可以到ionic官网里面找到并学习,不得不说官网上面有很多值得学习的知识

2、在app.js里添加控制器名,在index里引用已添加的控制器名,在controllers文件夹里添加相应的控制器

3、controllers文件夹里添加相应的控制器:

var module = angular.module('app.appCtrl', []);

module.controller('appCtrl', function () {

});

4、

在HTML页面里面写:

ion-side-menus等,最后在button 加menu-toggle=“left”,侧边栏就出来了

注:博客会持续更新,欢迎大家提问、评价、更改。更多技术分享www.ncloud.hk

上一篇:hive lateral view 与 explode详解


下一篇:ionic 项目中 使用 sass