Question

我用离子中的路线制作一个小块。但路由不起作用。当我运行这个项目时，它不会显示之类的内容。当我看到控制台时，有一个警告：

警告：尝试不止一次加载角度。

是的，有人可以帮我吗？

索引：

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

Answer 1

ionic.bundle.js是以下的串联：

ionic.js，
angular.js，
角animate.js
角sanitize.js，
angular-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');
})

尝试在离子上加载角度不止一次

1 个答案: