ionic开发之使用sass【上海时时乐走势图官网】

   上海时时乐走势图官网 1

创建侧边栏

侧边栏创建使用 ion-side-menus 控制器。
编辑我们先前创建的 index.html 文件,修改 <body> 内的内容,如下所示:

<body> 
  <ion-side-menus> 
    <ion-side-menu-content> 
    </ion-side-menu-content> 
    <ion-side-menu side="left"> 
    </ion-side-menu> 
  </ion-side-menus>
</body>

控制器解析:

  • ion-side-menus: 是一个带有边栏菜单的容器,可以通过点击按钮或者滑动屏幕来展开菜单。
  • ion-side-menu-content:展示主要内容的容器,可以通过滑动屏幕来展开menu。
  • ion-side-menu:存放侧边栏的容器。

使用Sass

在工程文件夹中输入如下命令

$ ionic setup sass

这一步为我们的工程添加sass支持,之后我们可以在./scss/ionic.app.scss编写css代码。如果安装有问题,尝试调整node 版本,我使用4.1版本的node出错,切回0.12.7成功.

下面尝试使用sass改变默认的positive颜色效果,以及增加$big-bg变量,代表背景,然后添加.scroll-bg类,为滚动页面添加背景图片,以下为./scss/ionic.app.scss中的代码,注意,自定义的效果添加在最后一行加载ionic库之前。

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

$positive:    #057b6c !default;
$big-bg:      'http://ioniconf.com/img/bg.jpg';

.scroll-bg {
  background: url($big-bg) no-repeat center center fixed;
  background-size: cover;
}

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

对应的html代码:

<ion-view view-title="Search" >
  <ion-content class="padding scroll-bg">
    <h1 class="positive">Search</h1>
  </ion-content>
</ion-view>

效果如下:

上海时时乐走势图官网 2

<html ng-app="ionicApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>菜鸟教程(runoob.com)</title>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.czcyyzx.com/uploads/allimg/191012/1250552T3-2.jpg"></script>
    <script type="text/javascript">
    angular.module('ionicApp', ['ionic'])

    .controller('MyCtrl', function($scope) {

    });
    </script>
    <style>
    body {
    cursor: url('http://www.runoob.com/static/img/finger.png'), auto;
    }
    </style>
</head>
<body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
    <h1 class="title">Hello World!</h1>
    </ion-header-bar>

    <ion-content>
                <p>我的第一个 ionic 应用。</p>
    </ion-content>

    </body>
</html>

命令行安装

首先您需要安装 Node.js,我们在接下来的安装中需要使用到其 NPM 工具,更多 NPM 介绍可以查看我们的NPM 使用介绍。
然后通过命令行工具安装最新版本的 cordova 和 ionic 。通过参考Android 和 iOS 官方文档来安装。
Window 和 Linux 上打开命令行工具执行以下命令:

$ npm install -g cordova ionic

Mac 系统上使用以下命令:

sudo npm install -g cordova ionic

提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用。
如果你已经安装了以上环境,可以执行以下命令来更新版本:

npm update -g cordova ionic

sudo npm update -g cordova ionic

sass 是一个css的预编译器,常见的预编译器有less,sass,stylus等,目前sass似乎更受青睐一些,bootstrap的最新版本以及ionic 都是用sass来构建页面效果的。这篇文章讲解如何在ionic工程使用sass,以及浅层次的分析一下ionic是如何构建sass代码的。

 

ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

sass代码构建过程

ionic 使用gulp这个构建工具来预编译sass,我们输入setup sass命令的时候ionic会添加gulp-sass等gulp插件,然后在ionic.project文件中添加"gulpStartupTasks"项,在启动的时候增加gulp任务,sass和watch。

{
  "name": "express_client",
  "app_id": "",
  "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]
}

这两个任务一个是用来编译sass文件,一个是用来监控sass文件,一有改动就重新编译,以适配liveload,下面是gulpfile.js的有关配置

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});
gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
});

可以看到sass任务会将源文件为'./scss/ionic.app.scss'的代码用sass插件编译之后写入到'./www/css/'文件夹中(ionic.app.css),然后再将该文件用minifyCss插件进行最小化,重命名为ionic.app.min.css,然后写入到./www/css/中。
最后,在www/index.html会加载该css:

<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">

在我们输入ionic serve 命令的时候也会开启gulp任务,修改ionic.app.scss文件会实时编译,然后体现到浏览器中。

上海时时乐走势图官网 3

创建Android应用
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

如果一切正常会弹出模拟器,界面如下所示:

上海时时乐走势图官网 4

参考

  • 官网
  • learnsite
  • 本篇原文地址

上海时时乐走势图官网 5

创建应用

使用ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个ionic应用:

$ ionic start myApp tabs

 

ionic 教程

三,在webApp里面新建立index.html,ionic,同时把ionic-v1文件夹中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件拖入到ionic中。如下图所示:

上海时时乐走势图官网 6

 

创建侧边栏

通过以上步骤我们已经实现了新增功能,现在我们为 app 添加侧边栏功能。
修改 <ion-side-menu-content> 内的内容,代码如下:

<!-- 中心内容 -->
<ion-side-menu-content> 

  <ion-header-bar class="bar-dark"> 
    <button class="button button-icon" ng-click="toggleProjects()"> 
      <i class="icon ion-navicon"></i> 
    </button> 
    <h1 class="title">{{activeProject.title}}</h1> 
    <!-- 新增按钮 --> 
    <button class="button button-icon" ng-click="newTask()"> 
      <i class="icon ion-compose"></i> 
    </button> 
  </ion-header-bar> 

  <ion-content scroll="false"> 
    <ion-list> 
      <ion-item ng-repeat="task in activeProject.tasks"> 
        {{task.title}} 
      </ion-item> 
    </ion-list> 
  </ion-content>

</ion-side-menu-content>

添加侧边栏:

<!-- 左边栏 -->
<ion-side-menu side="left">

  <ion-header-bar class="bar-dark"> 
    <h1 class="title">Projects</h1> 
    <button class="button button-icon ion-plus" ng-click="newProject()"> 
    </button>
  </ion-header-bar>

  <ion-content scroll="false"> 
    <ion-list> 
      <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}"> 
        {{project.title}} 
      </ion-item> 
    </ion-list>
  </ion-content>

</ion-side-menu>

<ion-item> 中的 ng-class 指令设置菜单激活样式。
这里我们创建一个新的js 文件 app2.js(为了不与前面的混淆),代码如下:

angular.module('todo', ['ionic'])
/** 
 * The Projects factory handles saving and loading projects
 * from local storage, and also lets us save and load the
 * last active project index.
 */
.factory('Projects', function() { 
    return { 
        all: function() { 
            var projectString = window.localStorage['projects']; 
            if(projectString) { 
                return angular.fromJson(projectString); 
            }
            return []; 
        }, 
        save: function(projects) { 
            window.localStorage['projects'] = angular.toJson(projects); 
        }, 
        newProject: function(projectTitle) { 
            // Add a new project 
            return { 
                title: projectTitle, 
                tasks: [] 
            }; 
        }, 
        getLastActiveIndex: function() { 
            return parseInt(window.localStorage['lastActiveProject']) || 0; 
        }, 
        setLastActiveIndex: function(index) { 
            window.localStorage['lastActiveProject'] = index; 
        } 
    }
})

.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) { 

    // A utility function for creating a new project 
    // with the given projectTitle 
    var createProject = function(projectTitle) { 
        var newProject = Projects.newProject(projectTitle); 
        $scope.projects.push(newProject); 
        Projects.save($scope.projects); 
        $scope.selectProject(newProject, $scope.projects.length-1); 
    } 

    // Load or initialize projects 
    $scope.projects = Projects.all(); 

    // Grab the last active, or the first project 
    $scope.activeProject = $scope.projects[Projects.getLastActiveIndex()]; 

    // Called to create a new project 
    $scope.newProject = function() { 
        var projectTitle = prompt('Project name'); 
        if(projectTitle) { 
            createProject(projectTitle); 
        } 
    }; 

    // Called to select the given project 
    $scope.selectProject = function(project, index) { 
        $scope.activeProject = project; 
        Projects.setLastActiveIndex(index); 
        $ionicSideMenuDelegate.toggleLeft(false); 
    }; 

    // Create our modal 
    $ionicModal.fromTemplateUrl('new-task.html', function(modal) { 
        $scope.taskModal = modal; 
    }, { 
        scope: $scope 
    }); 

    $scope.createTask = function(task) { 
        if(!$scope.activeProject || !task) { 
            return; 
        } 
        $scope.activeProject.tasks.push({ 
            title: task.title 
        }); 
        $scope.taskModal.hide(); 

        // Inefficient, but save all the projects 
        Projects.save($scope.projects); 

        task.title = ""; 
    }; 

    $scope.newTask = function() { 
        $scope.taskModal.show(); 
    }; 

    $scope.closeNewTask = function() { 
        $scope.taskModal.hide(); 
    } 

    $scope.toggleProjects = function() { 
        $ionicSideMenuDelegate.toggleLeft(); 
    }; 

    // Try to create the first project, make sure to defer 
    // this by using $timeout so everything is initialized 
    // properly 
    $timeout(function() { 
        if($scope.projects.length == 0) { 
            while(true) { 
                var projectTitle = prompt('Your first project title:'); 
                if(projectTitle) { 
                    createProject(projectTitle); 
                    break; 
                } 
            } 
        } 
    });

});

body 中 ion-side-menus 代码如下:

<ion-side-menus>

<!-- 中心内容 -->
<ion-side-menu-content> 
    <ion-header-bar class="bar-dark"> 
        <button class="button button-icon" ng-click="toggleProjects()"> 
            <i class="icon ion-navicon"></i> 
        </button> 
        <h1 class="title">{{activeProject.title}}</h1> 
        <!-- 新增按钮 --> 
        <button class="button button-icon" ng-click="newTask()"> 
            <i class="icon ion-compose"></i> 
        </button> 
    </ion-header-bar> 

    <ion-content scroll="false"> 
        <ion-list> 
            <ion-item ng-repeat="task in activeProject.tasks"> 
                {{task.title}} 
            </ion-item> 
        </ion-list> 
    </ion-content>
</ion-side-menu-content>

<!-- 左边栏 -->
<ion-side-menu side="left">
    <ion-header-bar class="bar-dark"> 
        <h1 class="title">Projects</h1> 
        <button class="button button-icon ion-plus" ng-click="newProject()"> 
        </button>
    </ion-header-bar>
    <ion-content scroll="false"> 
        <ion-list> 
            <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}"> 
                {{project.title}} 
            </ion-item> 
        </ion-list>
    </ion-content>
</ion-side-menu>

</ion-side-menus>

尝试一下 »

 

学习本教程前你需要了解?

学习本教程前你需要了解以下基础知识:

  • HTML
  • CSS
  • Javascript
  • Angular

ionic 相关内容
ionic 官方网站:http://ionicframework.com/
ionic 官方文档:http://ionicframework.com/docs/
Github 地址:https://github.com/driftyco/ionic</small>



ionic 安装

<small>本站实例采用了ionic v1.0.1 版本,下载地址为:ionic-v1.0.1.zip。
ionic 最新版本下载地址: http://ionicframework.com/docs/overview/#download。
下载后解压压缩包,包含以下目录:

css/             => 样式文件
fonts/           => 字体文件
js/              => Javascript文件
version.json     => 版本更新说明

你也可以在 Github 上下载以下资源文件:https://github.com/driftyco/ionic(在release 目录中)。
接下来,我们只需要在项目中引入以上目录中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可创建 ionic 应用。

<big>实例

<ion-header-bar class="bar-positive"> 
    <h1 class="title">Hello World!</h1>
</ion-header-bar> 

<ion-content> 
    <p>我的第一个 ionic 应用。</p>
</ion-content>

尝试一下 »
<small>点击 "尝试一下" 按钮查看在线实例。

本教程着重讲解 ionic 框架的应用,大部分实例在浏览器中运行 ,移动设备上运行可以在接下来的命令行安装教程中详细了解。
注意:在移动应用如 phonegap 中我们只需将对应的 js 和 css 文件加入到资源库中即可。


上海时时乐走势图官网 7

运行我们刚才创建的ionic项目

使用 ionic tool 创建,测试,运行你的apps(或者通过Cordova直接创建)。

 

创建iOS应用
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

(额外补充空格代码     以下分别是效果展示)
如果出现 "ios-sim was not found." 错误,可以执行以下命令:
如果出现 "ios-sim was not found." 错误,可以执行以下命令:
如果出现 "ios-sim was not found." 错误,可以执行以下命令:

npm install -g ios-sim

如果一切正常会弹出模拟器,界面如下所示:

上海时时乐走势图官网 8

二,桌面上新建立文件夹,如下图所示:

<small>ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

参考资料:《菜鸟教程》


       ionic 最新版本下载地址:。

ionic 特点

  • 1.ionic 基于Angular语法,简单易学。
  • 2.ionic 是一个轻量级框架。
  • 3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护。
  • 4.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
  • 5.ionic 专注原生,让你看不出混合应用和原生的区别
  • 6.ionic 提供了强大的命令行工具。
  • 7.ionic 性能优越,运行速度快。

       下载完如下图所示:

初始化 APP

接下来我们创建一个新的 AngularJS 模块,并初始化,代码位于 www/js/app.js 中:

angular.module('todo', ['ionic'])

之后在我们的 body 标签中添加 ng-app 属性:

<body ng-app="todo">

在 index.html 文件的 <script src="cordova.js"></script> 上面引入 app.js 文件:

<script src="js/app.js"></script>

修改 index.html 文件 body 标签的内容,代码如下所示:

<body ng-app="todo"> 
  <ion-side-menus> 

    <!-- 中心内容 --> 
    <ion-side-menu-content> 
      <ion-header-bar class="bar-dark"> 
        <h1 class="title">Todo</h1> 
      </ion-header-bar> 
      <ion-content> 
      </ion-content> 
    </ion-side-menu-content> 

    <!-- 左侧菜单 --> 
    <ion-side-menu side="left"> 
      <ion-header-bar class="bar-dark"> 
        <h1 class="title">Projects</h1> 
      </ion-header-bar> 
    </ion-side-menu> 

  </ion-side-menus>
</body>

<big>尝试一下 »
<small>以上步骤我们已经完成了 ionic 基本 APP 的应用。


 

ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。

四,用Sublime打开webApp,同时在index.html中加入代码:

创建列表

首先创建一个控制器 TodoCtrl

<body ng-app="todo" ng-controller="TodoCtrl">

在app.js文件中,使用控制器定义列表数据:

angular.module('todo', ['ionic'])

.controller('TodoCtrl', function($scope) { 
  $scope.tasks = [ 
    { title: '菜鸟教程' },
    { title: 'www.runoob.com' }, 
    { title: '菜鸟教程' }, 
    { title: 'www.runoob.com' } 
  ];
});

在index.html页面中数据列表我们使用 Angular ng-repeat 来迭代数据:

<!-- 中心内容 -->
<ion-side-menu-content> 
  <ion-header-bar class="bar-dark"> 
    <h1 class="title">Todo</h1> 
  </ion-header-bar> 
  <ion-content> 
    <!-- 列表 --> 
    <ion-list> 
      <ion-item ng-repeat="task in tasks"> 
        {{task.title}} 
      </ion-item> 
    </ion-list> 
  </ion-content>
</ion-side-menu-content>

修改后 index.html body 标签内代码如下:

<body ng-app="todo" ng-controller="TodoCtrl"> 
  <ion-side-menus> 

  <!-- 中心内容 --> 
  <ion-side-menu-content> 
    <ion-header-bar class="bar-dark"> 
      <h1 class="title">Todo</h1> 
    </ion-header-bar> 
    <ion-content> 
      <!-- 列表 --> 
      <ion-list> 
        <ion-item ng-repeat="task in tasks"> 
          {{task.title}} 
        </ion-item> 
      </ion-list> 
    </ion-content> 
  </ion-side-menu-content> 

  <!-- 左侧菜单 --> 
  <ion-side-menu side="left"> 
    <ion-header-bar class="bar-dark"> 
      <h1 class="title">Projects</h1> 
    </ion-header-bar> 
  </ion-side-menu> 

  </ion-side-menus> 
  <script src="http://www.czcyyzx.com/uploads/allimg/191012/1250555D3-9.jpg"></script> 
  <script src="cordova.js"></script>
</body>

<big>尝试一下 »


 

创建添加页面

修改 index.html 在 </ion-side-menus> 后添加如下代码:

<script id="new-task.html" type="text/ng-template"> 

  <div class="modal"> 

    <!-- Modal header bar --> 
    <ion-header-bar class="bar-secondary"> 
      <h1 class="title">New Task</h1> 
      <button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button> 
    </ion-header-bar> 

    <!-- Modal content area --> 
    <ion-content> 

      <form ng-submit="createTask(task)"> 
        <div class="list"> 
          <label class="item item-input"> 
            <input type="text" placeholder="What do you need to do?" ng-model="task.title"> 
          </label> 
        </div> 
        <div class="padding"> 
          <button type="submit" class="button button-block button-positive">Create Task</button> 
        </div> 
      </form> 

    </ion-content> 

  </div>

</script>

<small>以上代码中我们通过 <script id="new-task.html" type="text/ng-template"> 定义了新的模板页面。
表单提交时触发 createTask(task) 函数。
ng-model="task.title" 会将表单的输入数据赋值给 task 对象的 title 属性。
修改 <ion-side-menu-content> 内的内容,代码如下:

<!-- 中心内容 -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark"> 
  <h1 class="title">Todo</h1> 
  <!-- 新增按钮--> 
  <button class="button button-icon" ng-click="newTask()"> 
    <i class="icon ion-compose"></i> 
  </button>
</ion-header-bar>
<ion-content> 
  <!-- 列表 --> 
  <ion-list> 
    <ion-item ng-repeat="task in tasks"> 
      {{task.title}} 
    </ion-item> 
  </ion-list>
</ion-content>
</ion-side-menu-content>

app.js 文件中,控制器代码如下:

angular.module('todo', ['ionic'])

.controller('TodoCtrl', function($scope, $ionicModal) { 
  $scope.tasks = [ 
    { title: '菜鸟教程' }, 
    { title: 'www.runoob.com' }, 
    { title: '菜鸟教程' }, 
    { title: 'www.runoob.com' } 
  ]; 

  // 创建并载入模型       
  $ionicModal.fromTemplateUrl('new-task.html', function(modal) { 
    $scope.taskModal = modal; 
  }, { 
    scope: $scope, 
    animation: 'slide-in-up' 
  }); 

  // 表单提交时调用 
  $scope.createTask = function(task) { 
    $scope.tasks.push({ 
      title: task.title 
    }); 
    $scope.taskModal.hide(); 
    task.title = ""; 
  }; 

  // 打开新增的模型 
  $scope.newTask = function() { 
    $scope.taskModal.show(); 
  }; 

  // 关闭新增的模型 
  $scope.closeNewTask = function() { 
    $scope.taskModal.hide(); 
  };
});

 

Ionic Lab

Ionic Lab 是桌面版的开发环境,如果你不喜欢使用命令行操作,Ionic Lab 将会满足你的需求。
Ionic Lab 为开发者提供了一个更简单的方法来开始,编译,运行,和模拟运行Ionic的应用程序。
Ionic Lab 支持的平台有:Window、Mac OS X、Linux,下载地址为:http://lab.ionic.io/,下载后直接安装即可。整个操作界面如下所示:

上海时时乐走势图官网 9

通过以上界面你可以完成以下操作:

  • 创建应用
  • 预览应用
  • 编译应用
  • 运行应用
  • 上传应用
  • 运行日志查看
    ……
    推荐使用Sublime Text作为 Ionic 项目的编辑器,我们可以通过 Ionic Lab 直接在Sublime Text 上打开项目,如下图:

    上海时时乐走势图官网 10

Gif 操作演示  

![](https://upload-images.jianshu.io/upload_images/2323089-555bb230a29dcf2d.gif)


ionic 创建 APP

前面的章节中我们已经学会了 ionic 框架如何导入到项目中。
接下来我们将为大家介绍如何创建一个 ionic APP 应用。
ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建,所以我们可以创建一个 www 目录,并在目录下创建 index.html 文件,代码如下:

<!DOCTYPE html>
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>Todo</title> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 

    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件,由 Cordova/PhoneGap 提供,(开发过程中显示 404) --> 
    <script src="cordova.js"></script> 
  </head> 
  <body> 
  </body>
</html>

以上代码中,我们引入了 Ionic CSS 文件、 Ionic JS 文件及 Ionic AngularJS 扩展ionic.bundle.js(ionic.bundle.js)。
ionic.bundle.js 文件已经包含了 Ionic核心JS、AngularJS、Ionic的AngularJS扩展,如果你需要引入其他 Angular 模块,可以从 lib/js/angular 目录中调用。
cordova.js 是在使用 Cordova/PhoneGap 创建应用时生成的,不需要手动引入,你可以在 Cordova/PhoneGap 项目中找到该文件,所以在开发过程中显示 404 是正常的。


 

创建 APP

接下来我们来实现一个包含标题、侧边栏、列表等的应用,设计图如下:

上海时时乐走势图官网 11

    上海时时乐走势图官网 12

一,下载ionic v1.0.1版本,下载地址为:ionic-v1.0.1.zip。

上海时时乐走势图官网 13

上海时时乐走势图官网 14

 

六,运行代码,效果图如下图所示:

五,sublime的最终效果图,如下图所示:

 

 

 

  上海时时乐走势图官网 15

 

七,第一个应用程序运行成功啦。

本文由上海时时乐走势图发布于web前端,转载请注明出处:ionic开发之使用sass【上海时时乐走势图官网】

您可能还会对下面的文章感兴趣: