Я работаю над приложением, использующим HTML, CSS и AngularJS под Ionic, и у меня возникают проблемы с маршрутизацией.
Моя проблема в том, что зависимость "ngRoute" в моем index.js заставляет мой контроллер не работать.
Вот мой 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();
}
});
})
Если я удаляю 'ngRoute' в моем модуле (файл index.js), тогда он работает. Но я не понимаю, почему несколько слов могут оказать такое влияние на мой контроллер?
Если вы поможете мне, я был бы очень признателен.