Simple RequireJS Structure with AngularJS -
my structrure below. have simple example of requirejs stack important. can't seperate angular controller bootstrap.js file. want me complete first example 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; })
take @ stripped down version of plnkr in comments updated plnkr
the setup simple, there 1 entry point called config.js.
this bootstrap angular document.
if using jquery, lodash, etc loaded in config.js
similar using ng-app.
this location require global angular object, app namespace , other components such controller.
require(['angular', 'app', 'mainctrl'], function(angular) { angular.bootstrap(document, ['app']); }); the next app.js setups angular module, can site wide routing , other configs, , dependencies such ngroute go here.
define(['angular'], function(angular) { return angular.module('app', []); }); finally have mainctrl.js controller logic.
define(['app'], function(app) { app.controller('mainctrl', function($scope) { this.name = "hello angularjs"; }); });
Comments
Post a Comment