个人中心
gpt4 book ai didi

javascript - Angular 路由不显示模板

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:57:34 25 4
gpt4 key购买 nike

当我点击我的注册链接时，它转到了正确的 URL 但没有显示任何内容

路由代码:

//routing module

(function () {
    'use strict'

    angular
      .module('membership.routing', ['ngRoute'])
      .config(config);

    //$routeProvider adds routing to the client
    config.$inject = ['$routeProvider'];


    function config($routeProvider) {
        //when() takes two arguments: a path and an options object
        $routeProvider.when('/register', {
            controller: 'RegisterController',
            controllerAs: 'vm',
            templateUrl: '/static/templates/authentication/register.html',
        }).otherwise('/');
    }
})();

Controller :

(function () {
    'use strict';

    angular
      .module('membership.authentication.controllers', [])
      //register the controller
      .controller('RegisterController', RegisterController);


    RegisterController.$inject = ['$location', '$scope', 'Authentication'];
    //'Authentication' is the function from the authentication service

    function RegisterController($location, $scope, Authentication) {
        var vm = this;
        vm.register = register; // allows the access of the function register()

        function register(){
            // this is calling the register method of the Authentication service
            Authentication.register(vm.email, vm.password, vm.username);
        }
    }
})();

注册.html

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <h1>Register</h1>

    <div class="well">
    <!-- This is the line that calls $scope.register -->
    <!-- vm is used in the router that allows us to refer to the controller -->
      <form role="form" ng-submit="vm.register()">
        <div class="form-group">
          <label for="register__email">Email</label>
          <!-- ng-model responsible for storing values -->
          <input type="email" class="form-control" id="register__email" ng-model="vm.email" placeholder="ex. john@notgoogle.com" />
        </div>

        <div class="form-group">
          <label for="register__username">Username</label>
          <input type="text" class="form-control" id="register__username" ng-model="vm.username" placeholder="ex. john" />
        </div>

        <div class="form-group">
          <label for="register__password">Password</label>
          <input type="password" class="form-control" id="register__password" ng-model="vm.password" placeholder="ex. thisisnotgoogleplus" />
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

编辑:

<div ng-view class="view-animate"></div>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#not-google-plus-nav">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Not Google Plus</a>
    </div> <!-- ./navbar-header -->

    <div class="collapse navbar-collapse" id="not-google-plus-nav">
      <ul class="nav navbar-nav pull-right">
        {% if user.is_authenticated %}
          <li><a href="/+{{ user.username }}">+{{ user.username }}</a></li>
          <li><a href="/+{{ user.username }}/settings">Settings</a></li>
          <li><a href="javascript:void(0)">Logout</a></li>
        {% else %}
          <li><a href="/login">Login</a></li>
          <li><a href="/register">Register</a></li>
        {% endif %}
      </ul>
    </div> <!-- /.collapse.navbar-collapse -->
  </div> <!-- /.container-fluid -->
</nav>

index.html

<!DOCTYPE html>
<html ng-app="membership">
<head>
  <title>thinkster-django-angular-boilerplate</title>

  <base href="/" />

  {% include 'stylesheets.html' %}
</head>

<body>
  {% include 'navbar.html' %}

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 ng-view"></div>
    </div>
  </div>

  {% include 'javascript.html' %}
</body>
</html>

thinkster.js

angular
  .module('thinkster', [])
  .run(run);

run.$inject = ['$http'];

/**
* @name run
* @desc Update xsrf $http headers to align with Django's defaults
*/
function run($http) {
  $http.defaults.xsrfHeaderName = 'X-CSRFToken';
  $http.defaults.xsrfCookieName = 'csrftoken';

  console.log('works')
}

我正在使用 Angular 1.7 和本教程 https://thinkster.io/django-angularjs-tutorial#learning-django-and-angularjs .我不确定为什么 URL 是正确的，但模板不会出现，控制台也没有显示任何错误。如果我从路径中删除 HTML 文件，控制台会正确地为它抛出 404

最佳答案

查看$route的官方文档和 ngRoute .

工作 Demo根据您在帖子中发布的代码。

JavaScript 代码:

var app = angular.module('RegisterRouting', []);

app.controller('HomeController', function ($scope) {
   $scope.heading = "Home";
});

app.controller('RegisterController', function ($scope) {
   $scope.heading = "Register";

   $scope.register = register;

   function register(){
     // this is calling the register method of the Authentication service
     alert("register view call");
   }
});

app.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController'
    }).
    when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});

HTML 代码:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js"></script>
<script type="text/ng-template" id="home.html">
    <h1> {{heading}} </h1>
</script>

<script type="text/ng-template" id="register.html">
    <h1> {{heading}} </h1>

    <form role="form" ng-submit="register()">
        <div class="form-group">
          <label for="register__email">Email</label>
          <!-- ng-model responsible for storing values -->
          <input type="email" class="form-control" id="register__email" ng-model="vm.email" placeholder="ex. john@notgoogle.com" />
        </div>

        <div class="form-group">
          <label for="register__username">Username</label>
          <input type="text" class="form-control" id="register__username" ng-model="vm.username" placeholder="ex. john" />
        </div>

        <div class="form-group">
          <label for="register__password">Password</label>
          <input type="password" class="form-control" id="register__password" ng-model="vm.password" placeholder="ex. thisisnotgoogleplus" />
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
</script>

<div> 
      <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/register">Register</a>
      </div>

    <div ng-view></div>
</div>

关于javascript - Angular 路由不显示模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51073399/

25 4 0
文章推荐： ios - 仅限生产版本的 EXC_BREAKPOINT (SIGTRAP)
文章推荐： javascript - 为什么这种解构不起作用？
文章推荐： ios - FormBaseCell' 仅适用于 iOS 10.0 或更新版本
文章推荐： javascript - 如何像在移动设备上一样垂直制作 React-semantic-ui 下拉菜单？
塔克拉玛干
个人简介

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

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