无法使AngularJS路由正常工作

Question

I am sure there is something simple that I am missing but I can't seem to find it. 我敢肯定，我缺少一些简单的东西，但似乎找不到。 I have a super simple Angular JS SPA. 我有一个超级简单的Angular JS SPA。 The folder structure is as follows: 文件夹结构如下：

index.php index.php
-- js -js
-- app.js -app.js
-- pages -页数
-- home.html -home.html
-- post.html -post.html
-- know.html -know.html

in index.php I have: 在index.php中，我有：

<html class="no-js" lang="en" ng-app="postApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Post Safety App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <base href="/postsafetyapp/">
    </head>
    <body ng-controller="mainController">
        <main id="main">
            <div ng-view></div>
        </main>

        <!-- Angular JS -->
        <script src="js/vendor/angular.min.js"></script>  
        <script src="js/vendor/angular-route.min.js"></script>        

        <!-- Custom JS -->
        <script src="js/app.js"></script> 
    </body>
</html>

in home.html I have: 在home.html中，我有：

<div class="home buttons">
    <div class="button button-1-of-2">
        <a href="#share" class="button__link" id="button_share">
            <span class="button__icon"><i class="fa fa-share"></i></span>
            <span class="button__text">SHARE</span>
        </a>
    </div>
    <div class="button button-1-of-2">
        <a href="#know" class="button__link" id="button_share">
            <span class="button__icon"><i class="fa fa-graduation-cap"></i></span>
            <span class="button__text">KNOW</span>
        </a>
    </div>    
</div>

Here is the code in the app.js: 这是app.js中的代码：

// create the main module
var postApp = angular.module("postApp", ['ngRoute']);

// configure our routes
postApp.config(function($routeProvider, $locationProvider) {

    $routeProvider

         // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the know page
        .when('/know', {
            templateUrl : 'pages/know.html',
            controller  : 'knowController'
        })

        // route for the share page
        .when('/share', {
            templateUrl : 'pages/share.html',
            controller  : 'shareController'
        });

        // use the HTML5 History API
        // $locationProvider.html5Mode({
        //      enabled: true,
        //      requireBase: false
        //  });

    });

The home.html page loads just fine, the URL appears as follows: home.html页面加载良好，URL如下所示：

http://localhost/postsafetyapp/#!/ http：// localhost / postsafetyapp /＃！/

If I click on the share button, the URL changes to: 如果单击共享按钮，则URL更改为：

http://localhost/postsafetyapp/#!/#share http：// localhost / postsafetyapp /＃！/＃share

But the view doesn't change. 但是观点并没有改变。

If I un-comment the $locationProvider code the URLs become: 如果取消注释$ locationProvider代码，则URL变为：

http://localhost/postsafetyapp/ (home.html page loads no problem) http：// localhost / postsafetyapp /（home.html页面加载没有问题）

click on the button and the URL becomes: 单击该按钮，URL变为：

http://localhost/postsafetyapp/#share (View doesn't change) http：// localhost / postsafetyapp /＃share （视图不变）

I am running WAMPSERVER on my local server. 我在本地服务器上运行WAMPSERVER。 Any help would be amazing! 任何帮助都将是惊人的！

Answer 1

You can keep the controller in app config 您可以将控制器保留在应用程序配置中

Please compare the code with the plnkr link 请比较代码与plnkr链接

Click here for working code in plnkr. 单击此处获取plnkr中的工作代码。

If you want to see the url to see how page gets routed use the below link 如果您想查看网址以了解页面如何路由，请使用以下链接

Seperate plnkr window (without code) 单独的plnkr窗口 （无代码）

href in index page 索引页面中的href

<ul class="nav navbar-nav navbar-right">
        <li><a href="#!/home"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#!/about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#!/contact"><i class="fa fa-comment"></i> Contact</a></li>
      </ul>

Controller defined in app config: 在应用程序配置中定义的控制器：

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider

  // route for the home page
    .when('/home', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })

  // route for the about page
  .when('/about', {
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
  })

  // route for the contact page
  .when('/contact', {
    templateUrl: 'pages/contact.html',
    controller: 'contactController'
  })

  //otherwise redirect to home
  .otherwise({
    redirectTo: "/home"
  });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!!!!';
});

scotchApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us!.';
});

无法使AngularJS路由正常工作

问题描述

1 个解决方案

解决方案1
0 2018-03-04 20:18:39

无法使AngularJS路由正常工作

问题描述

1 个解决方案

解决方案1 0 2018-03-04 20:18:39

解决方案1
0 2018-03-04 20:18:39