0

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

（对不起语法问题！）

应用程序.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!";
        }
    );
});

索引.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>
4

2 回答 2

1

这是我的示例版本。通过一些更改，它可以正常工作。

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

我将app.js文件分成两部分：main.js - 带有 RequireJs 和app.js的配置- 带有 AngularJs 模块声明。后来这个模块被homeController用来声明控制器。然后，在main.js中需要控制器并且应用程序正在引导。

于 2013-12-21T21:40:43.337 回答
1

我做 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']]);
    });
});

应用程序.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'
          });       
    }])
});

希望这对您的情况有所帮助。

于 2015-02-21T00:14:14.323 回答