試圖在離子上多次加載角狀物

我在離子狀態下製造了一種粗糙的路線。但路由不起作用。當我運行這個項目時，它不會顯示任何像。當我看控制檯時，有一個警告：試圖在離子上多次加載角狀物

警告：試圖加載角不止一次。

任何人都可以幫助我嗎？

指數：

<!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>

應用。 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>

來源

2016-11-02 Faizah Pratiwi

首先爲什麼你使用路由提供商。事實上離子是使用狀態提供者... –

ionic.bundle.js是級聯的一個：

離子.js，
angular.js，
角animate.js
角sanitize.js，
角-UI-router.js
離子-angular.js

和您的app.js應該是

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

來源

2016-11-02 06:15:59

試圖在離子上多次加載角狀物

回答

相關問題