Simple RequireJS Structure with AngularJS

Question

My structrure is below. I have a very simple example of requireJS but i stack to the most important. I can't seperate angular controller from bootstrap.js file. I want to help me complete my first example to understand it. Thank you

javascripts/bootstrap.js
javascripts/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;
})

where did you bootstrap angular itself? something like angular.bootstrap(document, ['app']); — David Chase
– David Chase, Commented Mar 10, 2014 at 19:25
This example was very usefull Now... if i need one page to load only "MainCtrl" without clicker... what i have to do?? can we seperate this require(['angular','app', 'MainCtrl','clicker'], function (angular) { angular.bootstrap(document, ['app']); }); — Michalis
– Michalis, Commented Mar 11, 2014 at 7:58

David Chase · Accepted Answer · 2014-03-11 14:05:16Z

2

Take a look at this stripped down version of the plnkr in the comments updated plnkr

The setup is simple, there is one entry point called config.js.

This is where you bootstrap angular to the document.

If you were using jquery, lodash, etc those would be loaded in the config.js

Similar to using ng-app.

This is also the location where you require the global angular object, your app namespace and other components such as your controller.

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

The next is the app.js which setups angular module, you can do site wide routing and other configs, and dependencies such ngRoute would go here.

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

Finally we have MainCtrl.js its where you do your controller logic.

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

answered Mar 11, 2014 at 14:05

David Chase

2,0831 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michalis Over a year ago

Thanks... Here is my next question... The config.js file requires all controllers,directives,factories for all project... so if i have another page, where i need only some of them... should i create another config file?

Michalis Over a year ago

I want to bootstrap my app to each page with different directives,controllers and factories... (I don't use routing, only dirrerent pages)

David Chase Over a year ago

Im not sure i follow.. do you have multiple index pages?

David Chase Over a year ago

if you have different php files you could do that or you could make a template based with only one index.php and then about.php or contact.php etc would be loaded into your index.php based on url...

Collectives™ on Stack Overflow

Simple RequireJS Structure with AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related