Problem of module in application ionic 2


#1

I make a simple application Ionic 2 but I find a problem that exists year screenshot

http://i.imgur.com/uoO5YQK.png

code index.html

<!DOCTYPE html>
<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 rel="manifest" href="manifest.json">

    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->

    <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/ionic/js/angular-ui/angular-ui-router.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- script home.js -->
    <script src="js/home.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="myApp">

    <ion-pane>
    <!--  <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content> --><div ng-view></div>
    </ion-pane>
  </body>
</html>

code home.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>AngularJS & Firebase Web App</title>
  <link rel="icon" href="http://getbootstrap.com/favicon.ico">


  <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

  <link href="justified-nav.css" rel="stylesheet">

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  </script>-->

  <link href="../lib/ionic/css/ionic.css" rel="stylesheet">
  <script src="lib/ionic/js/angular-ui/angular-ui-router.min.js"></script>
  <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>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="../js/app.js"></script>

</head>

<body>

<div class="container">
  <div class="jumbotron" style="padding-bottom:0px;">
    <h2>AngularJS & Firebase App!</h2>
  </div>
  <form class="form-signin" role="form">
    <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
    <input type="password" class="form-control" placeholder="Password" required="">
    <label class="checkbox">
      <a href="#"> Sign Up</a>
    </label>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  </form>

</div>



</body></html>

code app.js

angular.module('myApp', ['ionic','home'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({ redirectTo: '/home' });
}]);

code home.js

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

  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova && window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/home', { templateUrl: 'templates/home.html',controller: 'HomeCtrl' });
  }])

.controller('HomeCtrl', [function() {

}]);

what is the solution and thank you in advance


#2

@med001 Are you sure that is an Ionic 2 code? It seems to me that you are using Ionic 1.


#3

I change the angular js code with this code, I use $ stateProvider, $ urlRouterProvider

app.js

angular.module('myApp', ['ui.router','ionic','home'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(['$stateProvider', function($stateProvider,$urlRouterProvider) {
  $urlRouterProvider
  $urlRouterProvider.otherwise("home");
}]);

home.js

  var app = angular.module('home', ['ui.router','ionic'])
  
    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
          // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
          // for form inputs)
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  
          // Don't remove this line unless you know what you are doing. It stops the viewport
          // from snapping when text inputs are focused. Ionic handles this internally for
          // a much nicer keyboard experience.
          cordova.plugins.Keyboard.disableScroll(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })
  
  app.config(['$stateProvider', function($stateProvider,$urlRouterProvider) {
    $stateProvider
    $stateProvider.state("home",{
      url : "/home",
      templateUrl : "templates/home.html"
    });
    }])
  
  app.controller('HomeCtrl', [function() {
  
  }]);

i have problem in this screenhost

http://imgur.com/SnQAJUk

@lucasbasquerotto
I am a beginner in ionic, how to update application code in Ionic 2


#4

@med001 First, it will be better if you change the tag of your project to ionic, instead of ionic 2, so it will be in the right topic (from what I see you want to create an Ionic 1 project).

I don’t know much about Ionic 1, but if you change the tag to the right one maybe there will be someone that can help. You can change the tag clicking in the pencil icon right after the title of this post.

If you want to create an Ionic 2 project, you can follow these instructions: http://ionicframework.com/docs/v2/getting-started/installation/