Question

首先我写index.html

<!DOCTYPE html>
<html lang="ko" ng-controller="CommonController">
<head>
    <meta charset="UTF-8">

    <link ng-repeat="stylesheet in stylesheets" ng-href="{{stylesheet}}" type="text/css" rel="stylesheet" />
</head>
<body>
    <div ng-view></div>

    <script data-main="js/main" src="lib/require/require.js"></script>
</body>
</html>

然后我写了main.js

'use strict';
//caution tag, maybe don't run other library

requirejs.config({
baseUrl:'js',

paths:{
    'text': '../lib/require/text',
    'jquery': '../lib/jquery/jquery-1.11.1.min',
    'angular': '../lib/angular/angular.min',
    'angular-route': '../lib/angular/angular-route.min'
},

shim:{
    'angular':{
        deps:['jquery'],
        exports:'angular'
    },
    'angular-route':{
        deps:['angular'],
        exports:'angular-route'
    },
    'app':{
        deps:['angular', 'angular-route']
    },
    'routes':{
        deps:['angular', 'angular-route']
    }
}
});

requirejs([
    'text',
    'jquery',
    'angular',
    'angular-route',
    'app',
    'routes'
], function(text, $, angular){
    //lib load complete

    $(document).ready(function(){
        //page load over
        angular.bootstrap(document, ['smartshot']);
    });
});

然后我一遍又一遍地写app.js

'use strict';

define([
'angular',      //angular SMARTSHOT decline
'route-config'  //registers provider
], function(angular, routeConfig){
    var app = angular.module('smartshot', ['ngRoute'], function($controllerProvider){
        routeConfig.setControllerProvider($controllerProvider);
    });

    app.controller('CommonController', function($scope){
        $scope.$on('updateCSS', function(event, args){
            $scope.stylesheets = args;
        });
    });

    //setting const
    app.constant('server', {
        IP:'192.168.25.10',
        port:'80'
    });

    return app;
}
);

然后是routes.js

'use strict';

define([
'app',
'route-config'
],
function(app, routeConfig){
    //TODO:JSON data recv and path config
    return app.config(function($routeProvider){
        //load qode logo
        $routeProvider.when( '/logo', routeConfig.config('../partials/logo.html', 'controllers/logo') );
        $routeProvider.otherwise( {redirectTo:'logo'} );
    });
});

和route-config

define([
    //for import provider
],
function(){     //import provider callback register, **important++ snake case -> camel case
    var $controllerProvider;

    function setControllerProvider(value){
        $controllerProvider = value;
    }

    function config(templatePath, controllerPath){
        if(!$controllerProvider){
            throw new Error("$controllerProvider is not set");
        }

        var defer,
            html,
            routeDefinition = {};

        routeDefinition.template = function(){
            return html;
        };

        routeDefinition.controller = controllerPath.substring(controllerPath.lastIndexOf("/") + 1);

        routeDefinition.resolve = {
            delay: function($q, $rootScope){
                defer = $q.defer();
                if(!html){
                    var dependencies = ["text!" + templatePath, controllerPath];

                    //include resource provider

                    require(dependencies, function(){
                        var indicator = 0;
                        var template = arguments[indicator++];

                        if( angular.isDefined(controllerPath) ){
                            $controllerProvider.register(controllerPath.substring(controllerPath.lastIndexOf("/") + 1), arguments[indicator]);
                            indicator++;
                        }

                        //include resource provider

                        html = template;
                        defer.resolve();
                        $rootScope.$apply();
                    })
                } else {
                    defer.resolve();
                }

                return defer.promise;
            }
        };

        return routeDefinition;
    }

    return {
        setControllerProvider: setControllerProvider,
        config: config
    };
}
);

我检查调试首先加载index.html 然后

主要 - ＆gt; app - ＆gt; route-config - ＆gt;应用完成 - ＆gt;路线完成 - ＆gt;主要完成这个流程！路由配置

但ng-view不起作用...... 并且css链接也不起作用......

为什么我的网络不起作用:(？真的很伤心

我猜我的ngRoute并不完美......但是在哪里修好它？我不知道...... 真的希望有所帮助

Answer 1

你的路线配置不是我以前见过的方式。尝试将其更改为以下代码

$routeProvider.when('/logo', {
    templateUrl: '[relative path to template html]',
    controller: '[string name of controller]'
});

relative path to template html是html的路径，例如../partials/logo.html

和string name of controller是控制器的名称，例如CommonController

我的angularjs app不起作用，但我不知道是什么东西

首先我写index.html

然后我写了main.js

然后我一遍又一遍地写app.js

然后是routes.js

和route-config

1 个答案: