使用r.js优化的Angular js应用程序无法正常工作

时间:2017-02-28 03:25:35

标签: angularjs requirejs r.js

Angular JS应用程序工作正常,但在使用r.js优化时没有出现任何内容。 这是源代码

index.html

中的

<script data-main="scripts/main.js" src="libs/requirejs/require.js"></script>

main.js

require.config({
baseUrl: '../',
waitSeconds: 200,
paths: {
    'appBootstrap': 'scripts/appBootstrap',
    'angular': 'libs/angular/angular',
    'ngRoute': 'libs/angular/angular-route',
    'ngMessages': 'libs/angular/angular-messages',
    'jQuery': 'libs/jquery/jquery-2.2.1',
    'bootstrap': 'libs/bootstrap/bootstrap',
    'ui.bootstrap': 'libs/bootstrap/ui-bootstrap-tpls-1.3.1',
    'pace': 'libs/others/pace',
    'toastr': 'libs/others/toastr',
    'routes': 'scripts/routes',
    'text': 'libs/requirejs/text',
    'ngTable': 'libs/angular/ng-table.min',
    'app': 'scripts/app'
},
deps: (function () {
    //return [ "../output/app.min" ]; // For Production
    return ["appBootstrap"]; //For Development
})(),

shim: {
    'angular': {
        exports: 'angular'
    },
    'ngRoute': {
        deps: ['angular']
    },
    'ngMessages': {
        deps: ['angular']
    },
    'bootstrap': {
        deps: ['jQuery']
    },
    'ui.bootstrap': {
        deps: ['angular']
    },
    'toastr': {
        deps: ['jQuery'],
        exports: 'toastr'
    },
    'pace': {
        exports: ['pace']
    },
    'ngTable': {
        deps: ['angular']
    }
}

});

这里我根据开发环境切换app bootstrap和优化文件(你可以在deps函数中看到)

应用程序引导程序文件:

define(['app', 'routes'], function (app, routes) {
    try {
            // bootstrap the app manually
            angular.bootstrap(document, ['app']);
    } catch (e) {
        console.log("Error in bootstraping the root"+ e.message);
        console.error(e.stack);
    }  
});

app.js

'use strict';
define(['angular',
        'ngRoute',
        'ngMessages',
        'ngTable',
        'ui.bootstrap',
        'controllers/controllers',
        'directives/directives',
        'filters/filters',
        'factories/factories',
        'constants/constants'],
    function (angular) {
        var app = angular.module('app', ['ngRoute',
                                         'ngMessages',
                                         'ngTable',
                                         'ui.bootstrap',
                                         'app.controllers',
                                         'app.directives',
                                         'app.filters',
                                         'app.factories',
                                         'app.constants']);
        app.run(function ($rootScope, $http, $location, apiCallFactory) {
                    ......
        });
        return app;
    });

routes.js

define(['app'], function (app) {
    'use strict';
     return app.config(function ($routeProvider, $locationProvider) {
            $routeProvider
                .when('/adminHome', {
                    templateUrl: 'templates/adminHome.html',
                    controller: 'adminHomeCtrl'
                })
                .when('/login', {
                    templateUrl: 'templates/login.html',
                    controller: 'loginCtrl'
                })
                .when('/profile', {
                    templateUrl: 'templates/userProfile.html',
                    controller: 'userProfileCtrl'
                })
                .otherwise({
                    redirectTo: '/login'
                });

        });
});

r.js输入文件(optimizedjs.js)

({
    baseUrl: '../',
    waitSeconds: 200,
    paths: {
        'appBootstrap': 'scripts/appBootstrap',
        'angular': 'libs/angular/angular',
        'ngRoute': 'libs/angular/angular-route',
        'ngMessages': 'libs/angular/angular-messages',
        'jQuery': 'libs/jquery/jquery-2.2.1',
        'bootstrap': 'libs/bootstrap/bootstrap',
        'ui.bootstrap': 'libs/bootstrap/ui-bootstrap-tpls-1.3.1',
        'pace': 'libs/others/pace',
        'toastr': 'libs/others/toastr',
        'routes': 'scripts/routes',
        'text': 'libs/requirejs/text',
        'ngTable': 'libs/angular/ng-table.min',
        'app': 'scripts/app'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'ngRoute': {
            deps: ['angular']
        },
        'ngMessages': {
            deps: ['angular']
        },
        'bootstrap': {
            deps: ['jQuery']
        },
        'ui.bootstrap': {
            deps: ['angular']
        },
        'toastr': {
            deps: ['jQuery'],
            exports: 'toastr'
        },
        'pace': {
            exports: ['pace']
        },
        'ngTable': {
            deps: ['angular']
        }
    },
    stubModules: ['text'],
    name: "appBootstrap",
    out: "../output/app.min.js"
})

我正在使用node r.js -o optimizejs.js来获取优化文件。 请帮帮我。

1 个答案:

答案 0 :(得分:0)

如果您正在努力减少角度代码,请确保根据documentation声明依赖注入。

示例:

prop = sys.stdin.readline() def solve_no_var(prop): rev_iter = reversed(prop) def evaluate(): token = next(rev_iter) try: nargs, table = propositions[token] except KeyError: if token.lower() in ('true', '1'): return True elif token.lower() in ('false', '0'): return False else: return token return table[tuple(evaluate() for i in range(nargs))] return evaluate() def solve(prop): prop = prop.strip().split() variables = list(set(prop) - set(propositions) - {'True', 'TRUE', 'true', '1', 'False', 'FALSE', 'false', '0'}) lookup = {v: [j for j, p in enumerate(prop) if p == v] for v in variables} N = len(variables) print((N*" {:6} ").format(*variables), 'result') for p in itertools.product(("True", "False"), repeat=N): prop_nv = prop.copy() for v, b in zip (variables, p): for j in lookup[v]: prop_nv[j] = b res = solve_no_var(prop_nv) print(((N+1)*" {:6} ").format(*(p + (res,)))) solve(prop)

return app.config(function ($routeProvider, $locationProvider) {

或者您可以在构建代码时自动查看ng-annotate