CODEWITHSUNDEEP
angularjsrequirejs
Michalis
Michalis

Reputation: 6926

Simple RequireJS Structure with AngularJS

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

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

Upvotes: 0

Views: 835

Answers (1)

David Chase
David Chase

Reputation: 2073

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";
  });
});

Upvotes: 2

Related Questions