current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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;
})
share|improve this question
    
where did you bootstrap angular itself? something like angular.bootstrap(document, ['app']); –  David Chase Mar 10 at 19:25
    
Give me an example where to include it –  Michalis Mar 10 at 19:39
1  
check my setup here old plnkr –  David Chase Mar 10 at 19:42
    
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 Mar 11 at 7:58

1 Answer 1

up vote 1 down vote

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";
  });
});
share|improve this answer
    
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 Mar 11 at 14:28
    
I want to bootstrap my app to each page with different directives,controllers and factories... (I don't use routing, only dirrerent pages) –  Michalis Mar 11 at 14:30
    
Im not sure i follow.. do you have multiple index pages? –  David Chase Mar 11 at 14:38
    
plnkr.co/edit/i0W74lGPvCNCZ72XFQtY?p=preview –  Michalis Mar 11 at 14:47
    
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... –  David Chase Mar 11 at 15:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.