Question

我在路由角度js时遇到问题，我使用版本1.6.4的角度js

的index.html：

<!DOCTYPE <!DOCTYPE html>
    <html>
    <head>
        <title>authentification with Angular JS</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body class="container" ng-app="starter" >
    <a href="#!outside">Outside</a>
    <a href="#!outside.register">register</a>
    <a href="#!outside.login">Login</a>
    <a href="#!inside">Inside</a>

    <ng-view></ng-view>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

    <script src="app.js"></script>
    <script src="controller.js"></script>
    <script src="service.js"></script>
    <script src="constants.js"></script>

    </body>
    </html>

app.js：

var e = angular.module('starter',[])

e.config(function($routeProvider,$urlRouterProvider){
    $routeProvider
    .when('/outside',{
        //url: '/outside',
        abstract: true,
        templateUrl: 'outside.html'
    })

    .when('/outside.login',{
        //url: '/login',
        templateUrl: 'login.html',
        controller: 'LoginCtrl'
    })

    .when('/outside.register',{
        //url: '/login',
        templateUrl: 'register.html',
        controller: 'RegisterCtrl'
    })

    .when('/inside',{
        //url: '/inside',
        templateUrl: 'inside.html',
        controller: 'InsideCtrl'
    });

    //$urlRouterProvider.otherwise('/outside/login');

}); 

e.run(function($rootScope,$state,AuthService,AUTH_EVENTS){
    $rootScope.$on('$stateChangeStar',function(event, next, nextParams, fromState){
        if(!AuthService.isAuthenticated()) {
            if (next.name !== 'outside.login' && next.name !== 'outside.register'){
                event.preventDefault();
                $state.go('outside.login');
            }
        }
    });
});

例如，这是页面login.html：

  <div class="form-group">
  <label for="Login">Login</label>
  <input type="text" class="form-control" id="username" placeholder="Enter Username">
</div>


<div class="form-group">
  <label for="Password">Password</label>
  <input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>


<button type="submit" class="btn btn-primary" ng-click="login()">Login</button> <br><br>
<button type="submit" class="btn btn-primary" ui-serf="outside.register">Register</button>

但是当我点击链接登录时，例如我有任何结果，页面是白色的

请帮我解决此问题并感谢先进

Answer 1

您需要将 ngRoute 添加为依赖项。这一行

var e = angular.module('starter',['ngRoute']);

应该是

var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
        .when("/", {
            templateUrl : "main.html"
        })
        .when("/test", {
            templateUrl : "test.html"
        })
        .when('/outside',{
            //url: '/outside',
            abstract: true
        })
        .when('/outside.login',{
            //url: '/login',
            templateUrl: 'login.html',
            //controller: 'LoginCtrl'
        })
        .when('/outside.register',{
            //url: '/login',
            templateUrl: 'register.html',
            //controller: 'RegisterCtrl'
        });
    });

这是一个基本的例子

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>authentification with Angular JS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="app.js"></script>
  </head>
  <body class="container" ng-app="myApp">
  
    <a href="#/!">Main</a>
    <a href="#!test">test</a>
    
    <a href="#!outside.login">login</a>
    <a href="#!outside.register">register</a>
    
    <div ng-view></div>
  
  
  
    <script type="text/ng-template" id="test.html">
      test
    </script>
    <script type="text/ng-template" id="main.html">
      main
    </script>
    <script type="text/ng-template" id="login.html">
      login
    </script>
    <script type="text/ng-template" id="register.html">
      register
    </script>
  </body>
</html>

＆＃13;

import mcpi.minecraft as minecraft
import mcpi.block as block
import time as time
mc=minecraft.Minecraft.create()
block.GOLD_BLOCK=block.GOLD_BLOCK
while True:
    x,y,z=mc.player.getPos()
    block_beneath=mc.getBlock(x,y-1,z)
    if block_beneath != block.GOLD_BLOCK:
        mc.setBlock(x,y-1,z,block.GOLD_BLOCK)

＆＃13;

注意： 如果您在使用白页时遇到问题，那么很可能您没有正确指定templateUrl

页面白色与角度js中的路由

1 个答案: