Question

我是angularjs world＆amp; amp;的新手使用新路由器在angularjs 1.4版的角度js app上工作。

直到现在一切都正常，只有一个小问题。也就是说，当我去任何特定的链接时，它不起作用。但是，就在那之后，如果我刷新页面或再次在该链接上单击ENTER键，它就会开始工作。

例如：我在页面中关注了2个链接。

当我转到第一个链接http://localhost/angular/#/时，它不起作用＆amp;在控制台中出现以下错误，但如果我再次单击链接或刷新链接控制台错误清除＆amp;它开始工作了。第二个链接也是如此。

Chrome控制台错误 - enter image description here

以下是文件代码 -

的index.html

<html lang="en" ng-app="TeamTalk">
    <head>
        <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
        <meta name="viewport" content="initial-scale=1" />

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

    <body layout="column" ng-controller="AppCtrl">    

        <div ng-if="location.path() == '/home'">        
            <md-toolbar layout="row">
                <div class="md-toolbar-tools">
                    <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
                        <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
                    </md-button>

                    <div ng-outlet="navigation" id="navigation">                                        
                    </div>
                </div>
            </md-toolbar>
        </div>

        <div ng-if="location.path() == '/home'" layout="row" flex>
            <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
                <div ng-outlet="sidebar">
                </div>  
            </md-sidenav>

            <div layout="column" flex id="content">
                <md-content layout="column" flex class="md-padding">
                    <div ng-outlet="main">
                    </div>
                </md-content>
            </div>
        </div>


        <div ng-if="location.path() == '/'" style="background:#3F51B5" ng-outlet="landing" id="landing">
        </div>


        <script src="bower_components/angular/angular.min.js"></script>
        <script src="bower_components/angular-animate/angular-animate.min.js"></script>
        <script src="bower_components/angular-aria/angular-aria.min.js"></script>

        <script src="bower_components/angular-material/angular-material.min.js"></script>
        <script type="text/javascript" src="assets/js/router.es5.js"></script>
        <script type="text/javascript" src="assets/js/app.js"></script>
    </body>
</html>

app.js

var app = angular.module('TeamTalk', ['ngMaterial', 'ngNewRouter']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', '$router', '$location', function($scope, $mdSidenav, $router, $location){
    $scope.toggleSidenav = function(menuId) {
        $mdSidenav(menuId).toggle();
    };

    $scope.location = $location;

    // Configure router, pass array of mappings
    $router.config([
        {
            // Define url for this route
            path: '/',

            // Map components to viewports for this route
            components: {
                'landing':'landing'
            }, 
            as: 'landing'
        },
        {
            // Define url for this route
            path: '/home',

            // Map components to viewports for this route
            components: {
                // Load home component in main viewport
                'main': 'main',
                'navigation': 'navigation',
                'sidebar':'sidebar'
            }, 
            as: 'home'
        }

    ]);


    var locPath = false;

    locPath = $location.path();
    console.log('Current route name: ' + locPath);  

}]);


app.controller('NavigationController', function(){

});

app.controller('SidebarController', function(){

});

app.controller('MainController', function(){

});

app.controller('LandingController', function(){

});

有任何线索，为什么它的表现如此？

Answer 1

将配置作为属性（example）绑定到控制器：

var app = angular.module('TeamTalk', ['ngMaterial', 'ngNewRouter']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', '$router', '$location', AppCtrl]);


function AppCtrl ($scope, $mdSidenav, $router, $location){
        $scope.toggleSidenav = function(menuId) {
            $mdSidenav(menuId).toggle();
        };

        $scope.location = $location;

        // Configure router, pass array of mappings



        var locPath = false;

        locPath = $location.path();
        console.log('Current route name: ' + locPath);  

    }
AppCtrl.$routeConfig = [
        {
            // Define url for this route
            path: '/',

            // Map components to viewports for this route
            components: {
                'landing':'landing'
            }, 
            as: 'landing'
        },
        {
            // Define url for this route
            path: '/home',

            // Map components to viewports for this route
            components: {
                // Load home component in main viewport
                'main': 'main',
                'navigation': 'navigation',
                'sidebar':'sidebar'
            }, 
            as: 'home'
        }

    ];

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

<body layout="column" ng-controller="AppCtrl">    
    <div ng-viewport></div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.min.js"></script>

    <script src="bower_components/angular-material/angular-material.min.js"></script>
    <script type="text/javascript" src="assets/js/router.es5.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="components-path/main/main.js"></script>
<script type="text/javascript" src="components-path/navigation/navigation.js"></script>
<script type="text/javascript" src="components-path/sidebar/sidebar.js"></script>
<script type="text/javascript" src="components-path/landing/landing.js"></script>
</body>

// components-path/landing/landing.js
app.controller('LandingController', function(){

});

// components-path/landing/landing.html
        <div style="background:#3F51B5" ng-outlet="landing" id="landing">


// components-path/navigation/navigation.js
app.controller('NavigationController', function(){

});
// components-path/navigation/navigation.html
                    <div ng-outlet="navigation" id="navigation">                                        
                    </div>


// components-path/sidebar/sidebar.js
app.controller('SidebarController', function(){

});
// components-path/sidebar/sidebar.html
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
            <div ng-outlet="sidebar">
            </div>  
        </md-sidenav>

        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                <div ng-outlet="main">
                </div>
            </md-content>
        </div>
    </div>



// components-path/main/main.js
app.controller('MainController', function(){

});
// components-path/main/main.html
 <div>        
                <md-toolbar layout="row">
                    <div class="md-toolbar-tools">
                        <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
                            <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
                        </md-button>
                </div>
            </md-toolbar>
        </div>

angularjs新路由器第一次加载页面时没有工作

1 个答案: