Faizah Pratiwi Faizah Pratiwi - 1 month ago 13
AngularJS Question

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>

Answer

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');
})