Faizah Pratiwi Faizah Pratiwi - 1 year ago 161
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>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<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 -->
<body ng-app="myAPP">
<ion-header-bar class="bar-stable">
<div class="bar bar-header bar-calm">
<h1 class="title" align="center">CRUD</h1>
<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 ng-view></div>
<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>

app. js :

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

route.js :


templateUrl : '../pages/list.html',
controller : 'controller'
templateUrl : '../pages/addData.html',
controller : 'controller'
templateUrl : '../pages/update.html',
controller : 'controllerEdit'
redirectTo : '/'

list.html :

<div class="container">
<table class="table table-striped" ng-init="getData()">
<tr ng-repeat="x in dataList track by $index">
<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>

Answer Source

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

    // 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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download