Question

我正在Ionic下使用HTML，CSS和AngularJS开发应用程序，并且在路由方面遇到麻烦。

我的问题是index.js中的依赖项“ ngRoute”使我的控制器无法正常工作。

这是我的html文件管理器（index.html）：

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

    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="node_modules/angular-route/angular-route.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
        <script src="js/app.js"></script>
        <script src="js/index.js"></script>

  </head>

  <body ng-app="medathle" ng-controller="ModalCtrl">

    <!-- MedAthle logo -->
    <div class="logo">
        <img src="img/logo_medathle.png">
    </div>

    <!-- Buttons -->
    <div class="index-btn">
        <button class="button button-block button-large button-balanced" ng-click="openLogin()">
        Se connecter
        </button>
        <button class="button button-block button-large button-balanced" href="#!menu">
        En savoir plus
        </button>
    </div>

    <!-- Login Modal -->
    <script id="login.html" type="text/ng-template">

      <div class="modal">

        <!-- Modal header bar -->
        <ion-header-bar class="bar-balanced">
          <h1 class="title">Se connecter</h1>
          <button class="button button-balanced" ng-click="closeLogin()">Annuler</button>
        </ion-header-bar>

        <!-- Modal content area -->
        <ion-content>

          <form>
            <div class="login-input">
                <div class="email-block">
                    <label for id="email">
                        Adresse email
                        <input class="item-input-wrapper" type="email" id="email">
                    </label>
                </div>
                <div class="mdp-block">
                    <label for id="mdp">
                        Mot de passe
                        <input class="item-input-wrapper" type="password" id="mdp">
                    </label>
                </div>
            </div>
            <div class="login-btn">
                <button type="submit" href="#/menu" class="button button-large button-outline button-balanced">Connexion</button>
            </div>
          </form>

        </ion-content>
      </div>

    </script>

  </body>
</html>

这是我的js文件（index.js）：

angular.module('medathle', ['ionic', 'ngRoute'])


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

        // Système de routage
        $routeProvider
        .when('/menu', {
            templateUrl: 'menu.html',
            controller: 'ModalCtrl'
        });
    }
]);

.controller('ModalCtrl', function($scope, $ionicModal) {

    // Create and load the Modal
    $ionicModal.fromTemplateUrl('login.html', function(modal) {
      $scope.loginModal = modal;
    }, {
      scope: $scope,
      animation: 'slide-in-up'
    });

    // Called when the form is submitted


    // Open our new task modal
    $scope.openLogin = function() {
      $scope.loginModal.show();
    };

    // Close the new task modal
    $scope.closeLogin = function() {
      $scope.loginModal.hide();
    };
  })

  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova && window.cordova.plugins.Keyboard) {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })

如果我在模块（index.js文件）中删除了“ ngRoute”，则它可以正常工作。但是我不明白为什么只有几句话会对我的控制器产生这样的影响？

如果您能帮助我，我将非常感谢。

Answer 1

ngRoute已弃用。现在，您必须使用Angular“ ui-route”在Angular 1中进行路由。下面的代码可能对您有所帮助。

**First install angular-ui-router package 
--via npm: by running $ npm install angular-ui-router from your console
   or
-- via Bower: by running $ bower install angular-ui-router from your console**

**add path of package angular-ui-router path in index file in script tag.**

then use below code in you app module according to your requirement.

**angular.module("angular1App", ["ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("category");
    $stateProvider
      .state("login", {
        url: "/main",
        templateUrl: "views/login.html",
        controller: "LoginCtrl",
      })
      .state("register", {
        url: "/register",
        templateUrl: "views/register.html",
        controller: "RegisteryCtrl",
      });
  })**

有关更多信息，请访问下面的链接：

https://github.com/angular-ui/ui-router

Angular JS-ngRoute时控制器不起作用

1 个答案: