GETTING STARTED WITH IONIC1 and ANGULARJS

CREATING THE IONIC APP 1)  INSTALL IONIC For MAC $ sudo npm install ionic -g For WINDOWS $ npm install ionic -g  2) INSTALL CORDOVA For MAC $ sudo npm [...]

CREATING THE IONIC APP

1)  INSTALL IONIC

For MAC

$ sudo npm install ionic -g

For WINDOWS

$ npm install ionic -g 

2) INSTALL CORDOVA

For MAC

$ sudo npm install cordova -g

For WINDOWS

$ npm install cordova -g 

3) CREATE A NEW IONIC APP

SYNTAX 

$ ionic start AppName blank – – type=ionic1

EXAMPLE 

$ ionic start WordPressIonic blank – – type=ionic1

4) RUN IONIC APP

SYNTAX 

$ ionic serve

// This will execute the APP inside BROWSER

$ ionic serve – – l

// This will also RUN your APP inside BROWSER but will give you TWO VIEWS ( IOS VIEW / ANDROID VIEW )

5) INSPECT THE FILE STRUCTURE 

  • WWW is the MAIN FOLDER
  • index.html is our HOMEPAGE
  • app.js is the IMPORTANT FILE where we will WRITE JAVASCRIPT
  • TEMPLATE folder inside WWW contains the pieces of UI , which will be INJECT in INDEX.HTML on REQUIREMENT 

6) CREATING CONTROLLERS

  • ANGULAR MODULE comes with app.js file and it  is INITIALISED as soon as the APP is LOADED.
  • We will use app.js to CONFIGURE our APPLICATION and IMPLEMENT the ACTUAL LOGIC.
  • We CREATE CONTROLLERS in ANGULARJS to IMPLEMENT LOGIC of EACH SCREEN
  • CREATE another FILE in JS FOLDER called controller.js
  • ADD REFERENCE to controller.js file at index.html
  • < body ng-app = “starter”>

    Note : ng-app defines the name of the module

     

7) CREATING STATES & TEMPLATES

  • In ORDER to NAVIGATE from ONE PAGE to ANOTHER we need to CREATE RESPECTIVE STATES in APP.JS file 
  • Use ANGULAR UI ROUTER which is already INCLUDED by IONIC
  • SAY INSIDE TEMPLATE FOLDER we will have the following UI DESIGNS

menu.html

menucontent.html

postdetail.html

contentByCategory.html

favorites.html

  • Now we will be CREATING STATES which will be the ENCAPSULATION of PARTICULAR SCREEN
  • menu.html CONTAINS some UI and some BACKEND CODE

APP.JS ( CREATING STATES )

.config(function($stateProvider, $urlRouterProvider)

{

$stateProvider

 .state(‘main’, {

                  url: ‘/main’,

                 templateUrl: ‘templates/menu.html’,

                controller: ‘MenuCtrl’

               })

 .state(‘main.contentByCategory’, {

                url: ‘/contentByCategory/:catId’,

               templateUrl: ‘templates/contentByCategory.html’,

               controller: ‘CatCtrl’

                 })

.state(‘main.contentRecent’, {

               url: ‘/contentRecent’,

              templateUrl: ‘templates/menuContent.html’,

              controller: ‘MainCtrl’

             })

.state(‘main.postDetail’, {

             url: ‘/postDetail/:postId’,

            templateUrl: ‘templates/postDetail.html’,

            controller: ‘PostCtrl’

                })

.state(‘main.favorites’,{

         url: ‘/favorites’,

        templateUrl: ‘templates/favorites.html’,

        controller: ‘FavCtrl’

        });

$urlRouterProvider.otherwise(‘/main/contentRecent’);

})

  • Now we need to CREATE CONTROLLERS such as MenuCtrl , CatCtrl , MainCtrl , PostCtrl , FavCtrl 
  • AND then MODIFY the INDEX.HTML page

CONTROLLER.JS ( CREATE LOGIC FOR EACH SCREEN )

angular.module(‘starter’)

     .controller(‘MenuCtrl’, function() {

            ———————————–

           ———————————–

         } )

 .controller(‘CatCtrl’, function() {

            ———————————–

           ———————————–

         } )

 .controller(‘MainCtrl‘, function() {

            ———————————–

           ———————————–

         } )

 .controller(‘PostCtrl‘, function() {

            ———————————–

           ———————————–

         } )

 .controller(‘FavCtrl‘, function() {

            ———————————–

           ———————————–

         } )

 

INDEX.HTML ( CONTAINER HOLDS TEMPLATE )

<html>

<head> <meta charset=”utf-8″> <meta name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>

<title></title>

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

<link href=”css/style.css” rel=”stylesheet”>

<!– IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above  <link href=”css/ionic.app.css” rel=”stylesheet”> –>

<!– ionic/angularjs js –>

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

<script src=”lib/ngstorage/ngStorage.min.js”></script>

<!– cordova script (this will be a 404 during development) –>

<script src=”lib/ngCordova/dist/ng-cordova.js”></script> <script src=”cordova.js”></script>

<!– your app’s js –>

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

<script src=”js/controllers.js”></script>

</head>

<body ng-app=”starter”>

<!– The following tag contains the content of the template –>

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

 

</body>

</html>

Leave your comment

Please enter your name.
Please enter comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.