Question

我的结构如下。我有一个非常简单的requireJS示例，但我堆叠到最重要的。我无法从bootstrap.js文件中分离角度控制器。我想帮助我完成我的第一个例子来理解它。谢谢

Javascript角/ bootstrap.js
Javascript角/ main.js
的index.php

的index.php

<!DOCTYPE HTML>
<html>
<head>
<title>RequireJS</title>
<script data-main="javascripts/main" src="require.js"></script>
</head>
<body>

<div ng-app="app" ng-controller="hello">
    {{sayHello()}}
</div>
</body>
</html>

main.js

require.config({
baseUrl: "javascripts",
paths: {
    'angular': 'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min'
},
shim: {
    'angular': {
        exports: 'angular'
    }
},
deps: ['./bootstrap']
});

bootstrap.js

require(["angular"],function(angular){
var app = angular.module('app',[]);
app.controller("hello",
    function($scope) {
        $scope.sayHello = function() {
            return "Hello";
        }
    }
);
return app;
})

Answer 1

在评论中查看这个精简版的plnkr updated plnkr

设置很简单，有一个名为config.js的入口点。

这是您向文档引导角度的位置。

如果您使用的是jquery，lodash等，那些将被加载到config.js

与使用ng-app类似。

这也是您需要全局角度对象，应用程序命名空间和其他组件（如控制器）的位置。

require(['angular', 'app', 'MainCtrl'], function(angular) {
  angular.bootstrap(document, ['app']);
});

接下来是设置角度模块的app.js，你可以进行网站范围的路由和其他配置，而ngRoute这样的依赖关系会在这里。

define(['angular'], function(angular) {
  return angular.module('app', []);
});

最后，我们将MainCtrl.js用于执行控制器逻辑。

define(['app'], function(app) {
  app.controller('MainCtrl', function($scope) {
    this.name = "Hello Angularjs";
  });
});

使用AngularJS的简单RequireJS结构

1 个答案: