I am running Angular under Requirejs, but I have this multiple occurrence where the data in the controller class is repeated twice. Unless I remove ng-app="myApp" from the div. Why?
welcomeController.js,
define(['app'], function (app) {
app.controller('welcomeController', ['$scope', function($scope) {
//your minsafe controller
$scope.message = "Message from WelcomeController";
console.log($scope.message); // it is repeated twice here.
}]);
});
HTML,
<head>
<link rel="stylesheet" href="style.css">
<script data-main="scripts/main.js" src="scripts/vendors/requirejs/require.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="welcomeController">
{{message}}
</div>
</div>
</body>
main.js,
require.config({
//baseUrl: "",
// alias libraries paths. Must set 'angular'
paths: {
'domReady': 'vendors/requirejs-domready/domReady',
'angular': 'vendors/angular/angular',
'angular-route': 'vendors/angular-route/angular-route',
'jquery': 'vendors/jquery/dist/jquery'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
exports: 'angular'
}
}
});
define([
'controllers/welcomeController',
'bootstrap'
]);
bootstrap.js,
define([
'require',
'angular',
'app'
], function (require, ng) {
'use strict';
require(['domReady!'], function (document) {
ng.bootstrap(document, ['myApp']);
});
});
app.js,
define([
'angular'
], function (ng) {
'use strict';
//For single module retrun.
return ng.module('myApp', []);
});
But it works ok on Angular without Requirejs. I don't need to remove remove ng-app="myApp" from the div. Why?
<head>
<link rel="stylesheet" href="style.css">
<script src="scripts/vendors/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('welcomeController', ['$scope', function($scope) {
$scope.message = "Message from WelcomeController";
console.log($scope.message); // It occurs only once.
}]);
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="welcomeController">
{{message}}
</div>
</div>
</body>
What have I done wrong under Requirejs with Angular?
You are bootstrapping Angular twice: once with the ng-app directive and once with the ng.bootstrap(...) code in bootstrap.js! Go either for automatic (ng-app) or for manual (angular.bootstrap) bootstrapping.
Also, like Josep mentioned in his (deleted) answer, it is better to shim angular-route as:
shim: {
'angular-route': {
deps: ['angular']
}
}
This is NOT the cause of the problem, but will prevent potential future problems (i.e. route being loaded before Angular).
angular-require-lazy may contain some useful ideas for Angular-RequireJS integration with lazy loading
Related
I want to load or resources in my header with require.js. How can i do this? Here is my current code for my controller and index. I am new to angularjs and will appreciate your help in solving this challenge.
Require.js: located in js/require.js
require.config({
baseUrl: "js",
paths: {
'angular': '.../lib/angular.min',
'angular-route': '.../lib/angular-route.min',
'angularAMD': '.../lib/angular-animate.min.js'
},
shim: { 'angular-animate.min': ['angular'], 'angular-route': ['angular'] },
deps: ['app']
});
Index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>App Demo</title>
<script data-main="js/main" src="js/require.js"></script>
<script src="js/controllers.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" ng-view></div>
</body>
</html>
App.js:
define(function () {
var myApp = angular.module('myApp', [
'ngRoute',
'artistControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListContrIndex.htmloller'
}).
when('/details/:itemId', {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}).
otherwise({
redirectTo: '/list'
});
}]);
return app;
});
Controller.js:
define(['app'], function (app) {
var artistControllers = angular.module('artistControllers', ['ngAnimate']);
artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
});
}]);
artistControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.whichItem = $routeParams.itemId;
if ($routeParams.itemId > 0) {
$scope.prevItem = Number($routeParams.itemId)-1;
} else {
$scope.prevItem = $scope.artists.length-1;
}
if ($routeParams.itemId < $scope.artists.length-1) {
$scope.nextItem = Number($routeParams.itemId)+1;
} else {
$scope.nextItem = 0;
}
});
}]);
});
use data-main="path/file.js" to specify the file to load scripts..
<script data-main="path/file.js" src="js/require.js"></script>
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>App Demo</title>
<script data-main="js/main" src="js/require.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" ng-view></div>
</body>
</html>
and in main.js
require.config({
baseUrl: "js",
paths: {
'angular': '.../lib/angular.min',
'angular-route': '.../lib/angular-route.min',
'angularAMD': '.../lib/angular-animate.min.js'
},
shim: { 'angular-animate.min': ['angular'], 'angular-route': ['angular'] },
deps: ['app']
});
require(['requireModule,'requireModule2'],function(requireModule,requireModule2){
//code to start the application
})
Your code doesn't allow to start the application through requirejs . You need to define AngularJS Components as RequireJS Modules
RequireJS loads all code relative to a baseUrl. The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page. The data-main attribute is a special attribute that require.js will check to start script loading. This example will end up with a baseUrl of scripts:
<!--This sets the baseUrl to the "scripts" directory, and
loads a script that will have a module ID of 'main'-->
<script data-main="scripts/main.js" src="scripts/require.js"/>
For more information on this, check Loading JS Files - Require.js
I started using angularjs to create a single page application and wanted to add dynamic templates (views and controllers). I read on the web that I should use requirejs for doing this so I did.
I followed this tutorial # https://github.com/marcoslin/angularAMD and tried to follow the steps.
When I wanted to open the page I get those two errors on my console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=WebApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fnomod%3Fp0%3DWebApp%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0AZc%2Fb.module%3C%2F%3C%2Fb%5Be%5D%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0AZc%2Fb.module%3C%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A267%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0AXc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A17%3A415%0A%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A214%3A469%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A
and this one
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=WebApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr%3Fp0%3Dwebapp%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2524injector%252Fnomod%253Fp0%253Dwebapp%250AD%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A6%253A450%250AZc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250AZc%252Fb.module%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A267%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A284%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Agc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A36%253A309%250Afc%252Fc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A170%250Afc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A387%250Ac.prototype.bootstrap%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252FangularAMD.min.js%253A7%253A3485%250Aa%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A145%253A67%250A%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A34%3A97%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A284%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0Ac.prototype.bootstrap%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2FangularAMD.min.js%3A7%3A3485%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A
I think they are both similar errors. I guess the error is coming from app.js file and this is my code:
define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", ['webapp']);
app.config(function ($routeProvider) {
$routeProvider.when("/",
angularAMD.route({
templateUrl: 'app/src/home/index.html',
controller: 'index',
controllerUrl: 'app/src/home/'
})
);
});
return angularAMD.bootstrap(app);
});
and main.js
require.config({
baseUrl: "app",
paths: {
'jquery' : 'libs/jquery.min',
'general' : 'libs/general',
'angular' : 'libs/angular.min',
'angularAMD' : 'libs/angularAMD.min',
'ngload' : 'libs/ngload.min'
},
shim: {
'angularAMD' : ['angular'],
'ngload' : ['angularAMD']
},
deps: ['app']
});
and now my template files
index.js:
define(['app'], function (app) {
app.factory('MainController', function (...) {
});
});
index.html
<div class="appheader">
<div class="container" style="text-align:right">
<a><span class="glyphicon glyphicon-refresh"></span></a>
<a><span class="glyphicon glyphicon-align-justify"></span></a>
</div>
So as you can see I have those two files in app/src/home/index.(html/js)
And other files are located at app/ while ./ is the path of index.html (main page)
I really hope for help for my project and thanks in advance. :)
EDIT EDIT EDIT EDIT
Here we go:
./index.html
<!DOCTYPE html>
<html ng-app="WebApp">
<head>
<title>Index Index Index :)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> -->
<meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="app/css/bootstrap.min.css" />
<link rel="stylesheet" href="app/css/yadbocss.css" />
<script data-main="app/main" src="app/libs/require.min.js"></script>
</head>
<body ng-controller="mainController">
<div class="row">
<div class="col-md-12">
<div id="main">
<div ng-view>
</div>
</div>
</div>
</div>
</body>
./app/main.js
require.config({
baseUrl: "app/",
paths: {
'jquery' : 'libs/jquery.min',
'general' : 'libs/general',
'angular' : 'libs/angular',
'angularAMD' : 'libs/angularAMD',
'ngload' : 'libs/ngload',
'ngRoute' : 'libs/ngRoute'
},
shim: {
'angularAMD' : ['angular', 'ngRoute'],
'ngRoute' : ['angular'],
'ngload' : ['angularAMD']
},
deps: ['app']
});
./app/app.js
define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", []);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/",
angularAMD.route({
templateUrl: 'src/home/index.html',
controller: 'index',
controllerUrl: 'src/home/index'
})
);
$locationProvider.html5Mode(true);
});
return angularAMD.bootstrap(app);
});
Error report
1
Error: [$injector:modulerr] Failed to instantiate module WebApp due to:
[$injector:nomod] Module 'WebApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
...
2
Error: [$injector:modulerr] Failed to instantiate module WebApp due to:
[$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.5.0-rc.0/$injector/unpr?p0=%24routeProvider
minErr/<#http://localhost/pollit/app/libs/angular.js:68:12
...
You are using routeprovider without adding it.
Angular is made up of lost of modules so you should include it in the module like
angular.module('app', ['ngRoute']);
and link it in your html
<script src="angular-route.js">
Google CDN
e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
also change your version of angular so you dont use min. min.js is used for production and gives you crappy errors like the one you have there.
I am trying to load my first view in angular. But I make a project in modular fashion to learn good coding style.
I will show how I make a directory to create a module
Or look at full image here...
I write this on my index.html page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="lib/angular.js" type="text/javascript"></script>
<script src="lib/angular-ui-router.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body >
<div ng-app="firstApp">
<div ui-view="app"></div>
</div>
</body>
</html>
in app.js
var app= angular.module('firstApp',['ui.router']);
in controller firstcontroller.js file I write this
(function() {
'use strict';
angular
.module('firstApp')
.controller('firstcont', firstcont);
firstcont.$inject = ['$scope'];
function firstcont($scope) {
$scope.clickEvent=function(){
alert('---')
}
}
})();
on router.js file I write this
(function() {
'use strict';
angular.module('firstApp.firstdir').config(Routes);
Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function Routes($stateProvider, $urlRouterProvider) {
// Default
$urlRouterProvider.otherwise('/app');
// Application
$stateProvider
.state('app', {
url: '/app',
views:{
app: { templateUrl: 'firstdir/templates/firstpage.html' }
},
controller:"firstcont"
});
}
})();
in module.js file I write this
(function() {
'use strict',
angular.module('firstApp.firstdir', [
'ui.router',
]);
})();
on template.html I write this
<div ng-controller="firstcont">
<h1>First page</h1>
<button ng-click="clickEvent()"> go to second page</button>
</div>
I don't know why it doesn't display first view. Actually, I am not able to make plunker, because there is no way to make directory?
angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module firstApp due to:
Error: [$injector:modulerr] Failed to instantiate module firstApp.firstdir due to:
Error: [$injector:nomod] Module 'firstApp.firstdir' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.21/$injector/nomod?p0=firstApp.firstdir
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1668:17
at ensure (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1592:38)
at module (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1666:14)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3852:22
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp.firstdir&…%3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A3846%3A5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3880:15
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at createInjector (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3786:11)
at doBootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1435:20)
at bootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1450:12)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp&p1=Error%…3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A1450%3A12)
First include the js files (the module declaration always come first, and first submodules)
<!-- The order here is very important -->
<script src="js/module.js" type="text/javascript"></script>
<script src="js/router.js" type="text/javascript"></script>
<script src="js/firstcontroller.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
Declare your 'firstcont' as a firstApp.firstDir controller:
var firstDir = angular.module('firstApp.firstdir');
...
firstDir.controller('firstcont', firstcont);
Put your submodule as a dependece of your firstApp module:
//Remember firstApp.firstdir must be already declared :)
var app= angular.module('firstApp',['firstApp.firstdir', 'ui.router']);
UPDATE:
Here's the code example http://goo.gl/xxvIvB (to run click in preview)
You've defined your routes in another module: firstApp.firstdir.
To import the module, use the following syntax:
var app= angular.module('firstApp',['firstApp.firstdir']);
You don't need to import ui.router, because its imported from firstApp.firstdir.
First I've to say that I've looked every existing question relating to my problem, but I've found nothing dealing with my problem.
Uncaught Error: [$injector:modulerr] Failed to instantiate module Arrows due to:
Error: [$injector:nomod] Module 'Arrows' is not available! You either misspelled the
module name or forgot to load it. If registering a module ensure that you specify ...
<omitted>...2)
my index.html:
<html ng-app='Arrows'>
<head>
<title>Arrows</title>
<script data-main="app" src="modules/require.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="modules/angular-1.2.21/angular.js"></script>
<script src="modules/angular-1.2.21/angular-route.js"></script>
</head>
<body ng-controller='menuController'>
<div ng-view>
{{ message }}
</div>
</body>
</html>
my app.js:
define([
'./controller/menu',
'./controller/game'
], function(
menu,
game
) {
var Arrows = angular.module('Arrows', ['ngRoute']);
Arrows.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/menu.html',
controller : 'menuController'
})
.when('/game', {
templateUrl : 'pages/game.html',
controller : 'gameController'
})
.otherwise( {
redirectTo: '/',
controller: 'menuController'
});
});
Arrows.controller('gameController', function($scope) {
$scope.message = 'hello! Its working!';
});
Arrows.controller('menuController', function($scope) {
$scope.message = 'hello! Its working!';
});
});
No clue what to do there. I mean, I loaded angular-route.js, what is the answer to most questions concerning this error. And I made sure to write ng-app='Arrows' inside the html-tag.
As you are using require.js you have to bootstrap your AngularJS application in a special way. Read this article - https://www.startersquad.com/blog/angularjs-requirejs/ - and try to incorporate what is described there for your specific case.
In the end you will use something like
define([
'require',
'angular'
], function (require, ng) {
'use strict';
require(['domReady!'], function (document) {
ng.bootstrap(document, ['Arrows']);
});
});
Due This Article I try to create an application with AngularJS and RequireJS!
I can load angular library... create module and export it to external files! It's ok!
But the problem is I can't create configuration and controllers for my module both in main application file and external files!
Another issue is I can't load views and controllers in app.js via $routeProvider!!
(Sorry for grammer problems!)
app.js:
require.config({
baseUrl: "/angularjs/js",
paths: {
"angular": "libs/angular.min"
},
shim: {
"angular": {
exports: "angular"
}
}
});
define('app', ['angular'], function(angular){
var app = angular.module('myApp', []);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeCtrl'
templateUrl: 'views/home.html'
});
});
return app;
});
require(["app", "controllers/homeController"]);
controllers/homeController.js:
require(["app"], function(app) {
app.controller("HomeCtrl",
function($scope) {
$scope.message = "Hello World!";
}
);
});
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Angular.js</title>
<script type="text/javascript" data-main="js/" src="js/libs/require.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
views/home.html:
<div ng-controller="HomeCtrl">
<h1>{{messge}}</h1>
</div>
Here is my version of your example. With a few changes it works fine.
It is better to bootstrap AngularJs application manually, when RequireJs.
I separated app.js file in two: main.js - with configuration of RequireJs and app.js - with AngularJs module declaration. Later, this module is used by homeController for declaration of controller. Then, the controller is required in main.js and the application is bootstrapping.
I do the angular and requireJS integration placing NG_DEFER_BOOTSTRAP! flag and have separate files for my app config and routing like in:
require.config({
baseUrl: 'js/',
paths: {
angular: '../lib/bower_components/angular/angular.min',
angularRoute: '../lib/bower_components/angular-route/angular-route.min'
},
shim: {
'angular': {
'exports': 'angular'
},
'angularRoute':{
'deps': ['angular']
}
},
priority: [
'angular'
]
});
//https://docs.angularjs.org/guide/bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';
require([
'angular',
'app',
'routes'
], function(angular, app, routes) {
'use strict';
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
app.js:
define([
'angular',
'filters',
'services',
'directives',
'controllers',
'animations',
'angularRoute'
], function (angular) {
'use strict';
return angular.module('myapp', [
'ngRoute',
'ngCookies',
'ngAnimate',
'myapp.services',
'myapp.directives',
'myapp.filters',
'myapp.controllers',
'myapp.animations'
]);
});
and routes.js:
define(['angular', 'app'], function(angular, app) {
'use strict';
return app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: 'LoginCtrl'
}).
otherwise({
redirectTo: '/home'
});
}])
});
hope this helps in your scenario.