0

この記事のために、私はAngularJSとRequireJSでアプリケーションを作成しようとしています! angularライブラリをロードできます...モジュールを作成し、それを外部ファイルにエクスポートします! 大丈夫です！しかし、問題は、メイン アプリケーション ファイルと外部ファイルの両方で、モジュールの構成とコントローラーを作成できないことです。もう 1 つの問題は、$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>
4

2 に答える 2

1

これがあなたの例の私のバージョンです。いくつかの変更により、正常に動作します。

RequireJs の場合は、AngularJs アプリケーションを手動でブートストラップすることをお勧めします。

app.jsファイルを 2 つに分けました: main.js - RequireJs の構成とapp.js - AngularJs モジュール宣言。後で、このモジュールは、コントローラーの宣言のためにhomeControllerによって使用されます。次に、main.jsでコントローラーが必要になり、アプリケーションがブートストラップされます。

于 2013-12-21T21:40:43.337 に答える
1

NG_DEFER_BOOTSTRAP を配置して、angular と requireJS の統合を行います! フラグを立てて、次のようにアプリの構成とルーティング用に個別のファイルを用意します。

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

これがあなたのシナリオに役立つことを願っています。

于 2015-02-21T00:14:14.323 に答える