Code Monkey home page Code Monkey logo

ionic2-typescript-sidemenu's Introduction

As of March 2019, this repo is no longer maintained by Microsoft. If you're interested in continuing this project, please feel free to fork it. As of March 2019, we will no longer monitor or respond to open issues. Thanks for your support!


Ionic 2 Sidemenu Template with TypeScript

Note. This template is based on Ionic 2 Beta 10.

A template to create Ionic 2 apps with Visual Studio tools for Apache Cordova using TypeScript

Table of Contents

Visual Studio Requirements

VSCode Requirements

  • A recent version of Node/NPM
  • A global installed version of Cordova,Ionic, and TypeScript npm packages: npm i -g cordova ionic@beta typescript

Getting Started

Once you have your first project based on this template/repo created, you should follow the next steps:

Restore Npm Packages

VSCode will depend on you to execute npm install from the root folder.

Visual Studio should start the restore process as soon the project is opened, you should see how the Dependencies node in Solution Explorer shows a message saying "Restoring..", you can always invoke the restore process manually with RightClick->Restore Packages

To verify that the packages are completely restored you can check that the folder www\build contains some folders.

Note. Visual Studio shows the restore log in the Output Window Ctrl+Alt+O under the Npm/Bower category.

Run Gulp Tasks

Ionic uses Gulp to perform some tasks like Sass, and TypeScript compilation to process your source code and produce the output in the www folder.

Visual Studio 2015 includes a Task Runner Explorer that will show you all the available tasks to execute from the UI. You can access the Task Runner Explorer from the Menu: View->Other Windows-Task Runner Explorer or with the shortcut Ctrl+Alt+Bkspce

Note: To ensure that the default tasks are executed before the VS build, we configured the Task Runner Explorer binding the default task to the BeforeBuild event, however you can customize this setting to match your needs (e.g. Binding watch to project opened)

To execute this tasks from the CLI you can:

  1. Have a global installation of gulp, and run gulp build
  2. Use the local installed version node_modules\.bin\gulp build
  3. Use the npm script: npm run build

Note: If VS is unable to show the tasks, you can check the log in the Ouput window under the Task Runner Explorer Logs category.

Usual Cordova development Workflow

Once you have all the packages restored, and the Gulp tasks executed, you can use your favorite cordova workflow:

Live Reload

Ionic cli offers the ionic serve command to implement a Live Reload development workflow, you can obtain similar results executing the gulp task watch and using the Live Reload capabilities of the Ripple Emulator

Code of conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

ionic2-typescript-sidemenu's People

Contributors

drewgillies avatar newtonjain avatar rido-min avatar ridomin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ionic2-typescript-sidemenu's Issues

add contribution guide

It would be nice to have a contribution guide so that we could help out with stuff like updating the templates to beta 11.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.