Question

由于This Article我尝试使用 AngularJS 和 RequireJS 创建应用程序！我可以加载角度库...创建模块并将其导出到外部文件！没关系！但问题是我无法在主应用程序文件和外部文件中为我的模块创建配置和控制器！另一个问题是我无法通过$ routeProvider !!

在app.js中加载视图和控制器

（对不起语法问题！）

的 app.js： 的

require.config({
    baseUrl: "/angularjs/js",
    paths: {
        "angular": "libs/angular.min"
    },
    shim: {
        "angular": {
            exports: "angular"
        }
    }
});

define('app', ['angular'], function(angular){
    var app = angular.module('myApp', []);

    app.config(function($routeProvider, $locationProvider){
        $routeProvider
            .when('/', {
                controller: 'HomeCtrl'
                templateUrl: 'views/home.html'
            });
    });

    return app;
});

require(["app", "controllers/homeController"]);

的控制器/ homeController.js： 的

require(["app"], function(app) {
app.controller("HomeCtrl",
    function($scope) {
            $scope.message = "Hello World!";
        }
    );
});

的的index.html： 的

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
    <head>
    <meta charset="UTF-8" />
    <title>Angular.js</title>
    <script type="text/javascript" data-main="js/" src="js/libs/require.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
    <div ng-view></div>
    </body>
</html>

的视图/ home.html的： 的

<div ng-controller="HomeCtrl">
<h1>{{messge}}</h1>
</div>

Answer 1

以下是您的示例的my version。通过一些更改，它可以正常工作。

当RequireJs。

时，最好手动引导AngularJs应用程序

我将 app.js 文件分成两部分： main.js - 配置RequireJs和 app.js - 使用AngularJs模块声明。之后， homeController 使用此模块来声明控制器。然后， main.js 中的控制器必需，应用程序正在自举。

Answer 2

我执行angular和requireJS集成放置NG_DEFER_BOOTSTRAP！标记并为我的应用配置和路由分别创建文件，如：

require.config({    
    baseUrl: 'js/',

    paths: {        
        angular: '../lib/bower_components/angular/angular.min',
        angularRoute: '../lib/bower_components/angular-route/angular-route.min'
    },  

    shim: {     
        'angular': {
            'exports': 'angular'
        },
        'angularRoute':{
            'deps': ['angular']
        }
    },  
    priority: [
        'angular'
    ]
});

//https://docs.angularjs.org/guide/bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';

require([
    'angular',
    'app',
    'routes'
], function(angular, app, routes) {
    'use strict';
    var $html = angular.element(document.getElementsByTagName('html')[0]);  
    angular.element().ready(function() {                
        angular.resumeBootstrap([app['name']]);
    });
});

app.js：

define([
    'angular',
    'filters',
    'services',
    'directives',
    'controllers',
    'animations',
    'angularRoute'
    ], function (angular) {
        'use strict';
        return angular.module('myapp', [
            'ngRoute',
            'ngCookies',
            'ngAnimate',
            'myapp.services',
            'myapp.directives',
            'myapp.filters',
            'myapp.controllers',
            'myapp.animations'
        ]);
});

和routes.js：

define(['angular', 'app'], function(angular, app) {
    'use strict';

    return app.config(['$routeProvider', function($routeProvider) {     
        $routeProvider.    
          when('/home', {
            templateUrl: 'partials/home.html',
            controller: 'HomeCtrl'
          }).
          when('/login', {
            templateUrl: 'partials/login.html',
            controller: 'LoginCtrl'
          }).
          otherwise({
            redirectTo: '/home'
          });       
    }])
});

希望这对您的方案有所帮助。

将AngularJS与RequireJS集成

2 个答案: