1. First we need to download and install Apache Cordova tool from here. At the time of writing, the version is CTP 2.0.
2. Then once completed, open Visual Studio to create a new project. On the New Project dialog, go to JavaScript project templates then Multi-Device Hybrid App. Select Blank App (Apache Cordova) then create a project.
3. Install Ionic through NuGet. At the time of writing, the latest version is v1.0.0.0-beta.1. This will add many AngularJS and Ionic files into our project.
4. Install Ionic on local machine so that we could create some sample applications with particular templates and use some of the files in our project. To do this, open Node.js command prompt then run this command:
npm install ionic -g-g is used to install the package globally
5. On the command prompt, go to a directory where you want to have Ionic sample applications then run this command:
ionic start SideMenuAppExample sidemenuThis command will generate a sample Ionic application with side menu navigation.
6. Go to the generated app folder then to 'www\js' folder then copy app.js and controllers.js into our project.
7. Also copy the whole 'templates' folder and its content into our project.
8. Then on our project index.html file:
- add a reference to 'Content/ionic.css'
- add a reference to 'scripts/ionic.bundle.js'
- add references to the two JavaScript files that we have copied over (app.js and controllers.js)
- add 'ng-app="starter"' in the body
- add <ion-nav-view></ion-nav-view> inside the body content
Once finished, we will have something like this on our index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BlankCordovaApp2</title>
<link href="Content/ionic.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<!--library scripts references-->
<script src="scripts/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<!--custom scripts references-->
<script src="app.js"></script>
<script src="controllers.js"></script>
</body>
</html>
Then run the application. We should see a sample app with side menu running.
1 comment:
Thanx, this is very Informational Post to Read now I am Waiting for your next post. Visit: Ionic Themes
Post a Comment