CODEWITHSUNDEEP
javascriptangularjsionic-framework
Faizah Pratiwi
Faizah Pratiwi

Reputation: 83

Tried to load angular more than once on ionic

i make a crud with route in ionic. but the routing doesnt work. when i run this project, it doesnt show anything like this. when i look the console, there is a warning :

WARNING: Tried to load angular more than once.

can anyone help me please?

index :

<!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">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.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 -->
  </head>
  <body ng-app="myAPP">
    <ion-pane>
      <ion-header-bar class="bar-stable">
      <div class="bar bar-header bar-calm">
        <h1 class="title" align="center">CRUD</h1>
      </div>
      <div class="tabs-striped tabs-top">
      <div class="tabs">
            <a class="tab-item" href="#/">List</a>
            <a class="tab-item" href="#/addData">Add Data</a>
            <a class="tab-item" href="#/editData">Edit Data</a>
      </div>
      </ion-header-bar>
      <ion-content>
      <div>
        <div ng-view></div>
      </div>    
      </ion-content>
    </ion-pane>
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/route.js"></script>
    <script src="controller/controller.js"></script>
    <script src="controller/edit.js"></script>
  </body>
</html>

app. js :

var app = angular.module('myAPP', ['ionic','ngRoute'])

route.js :

app.config(['$routeProvider',function($routeProvider){
    $routeProvider.

    when('/',{
        templateUrl : '../pages/list.html',
        controller : 'controller'
    })
    .when('/addData',{
        templateUrl : '../pages/addData.html',
        controller : 'controller'
    })
    .when('/editData/:id',{
        templateUrl : '../pages/update.html',
        controller : 'controllerEdit'
    })
    .otherwise({
        redirectTo : '/'
    });
}])

list.html :

<div class="container">
<h2>{{title}}</h2>
</br>
</br>
  <table class="table table-striped" ng-init="getData()">
    <tr>
      <th>NO</th>
      <th>Nama</th>
      <th>Alamat</th>
      <th>Action</th>
    </tr>
    <tr ng-repeat="x in dataList track by $index">
      <td>{{$index+1}}</td>
      <td>{{x.nama}}</td>
      <td>{{x.alamat}}</td>
      <td>
      <button type="button" class="btn btn-info" ng-click="edit(x.id)">Edit</button>
      <button type="button" class="btn btn-danger" ng-click="delete(x.id)">Delete</button>
      </td>
    </tr>
  </table>
</div>

Upvotes: 0

Views: 277

Answers (1)

Anil Kumar Ram
Anil Kumar Ram

Reputation: 1221

ionic.bundle.js is a concatenation of:

  1. ionic.js,
  2. angular.js,
  3. angular-animate.js
  4. angular-sanitize.js,
  5. angular-ui-router.js
  6. ionic-angular.js

and your app.js should be

var app = angular.module('ionicApp', [ 'ionic' ])

app.config(function($stateProvider, $urlRouterProvider) {

    // Ionic uses AngularUI Router which uses the concept of states
    // Learn more here: https://github.com/angular-ui/ui-router
    // Set up the various states which the app can be in.
    // Each state's controller can be found in controllers.js
    $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
        url : "/tab",
        abstract : true,
        templateUrl : "templates/tabs.html",
        controller : 'dashboardCtrl'
    })

    // Each tab has its own nav history stack:

    .state('tab.overview', {
        url : '/overview',
        views : {
            'tab-overview' : {
                templateUrl : 'templates/tab-overview.html',
                //controller : 'overviewCtrl'
            }
        }
    })

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/tab/overview');
})

Upvotes: 2

Related Questions