个人中心
gpt4 book ai didi

javascript - Angular JS - Controller 在 ngRoute 时不起作用

转载 作者：行者123 更新时间：2023-11-30 20:23:44 24 4
gpt4 key购买 nike

我正在使用 Ionic 下的 HTML、CSS 和 AngularJS 开发一个应用程序，我在路由方面遇到了麻烦。

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

这是我的 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”，那么它就可以工作了。但我不明白为什么仅仅几句话就能对我的 Controller 产生如此大的影响？

如果你能帮助我，我将不胜感激。

最佳答案

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

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

关于javascript - Angular JS - Controller 在 ngRoute 时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51158420/

24 4 0
文章推荐： c - else 语句总是在 if 和 if else 之后运行
文章推荐： javascript - 加载从 p5.js Canvas 中的函数生成的图像
文章推荐： c# - 纠正我在 mvc 中的 url 路由
文章推荐： javascript - 带有 redux 的 RxJS - 完成时发出 Action (使用 mergeMap)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com