We Keep Coding

require is not loading modules properly

fter including require tag the application is behaving abnormal way .is there any way i can bootstrap my application apart from below code .
main.js
require(['/module.js'], function() {
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
});
When I written as single file js file the code is working properly.
module.js
var name = 'myApp';
angular.module(name, [])
.controller('Controller', require(['controller.js']))
.factory('Service', require(['service.js']))
.filter('Number', require(['filter.js']));
I have included my main.js in index.html . index html has 3 views i am displaying them based on ng-show from index.html.
The problem is module.js loading properly and js files too. Script is not executing properly so that my entire index.html page including 3 views displayed automatically with error messages.
Control is not going to controller.js/service.js
Error :
Error: Unknown provider: depsProvider <- deps .
Did i miss any define code? Thanks in advance

Angular does not support AMD by default, You need to config angular to export angular object. Please check out the this post for more details.
require.config({
paths: {
'angular': '../lib/angular/angular'
},
shim: {
'angular': {
exports: 'angular'
}
}
});
Your module.js should be defined with define method of requirejs and it should return module.
You can omit file extesion (.js) while using requireJs

Foundation for apps: Creating separate files for angularjs controllers, services etc

I just got started with Foundation for Apps, but I was having trouble adding my angular controllers in a separate folder and using them.
I have this current structure in my assets' js folder:
js/
app.js //this has all the controllers etc. by chaining
but I want it to be
js/
app.js
controllers/
home.controller.js
main.controller.js
I don't want to keep a single large js file developed by chaining my controllers, services etc. I want a more modular structure as specified.
When I changed it to the modular structure, I got following three errors:
1. 'HomeCtrl' not defined.
2. Uncaught SyntaxError: Unexpected token < at the 1st line of home.controller.js
3. Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8079/assets/js/home.controller.js". at the point where I am including 'home.controller.js' in index.html
Here's my template:
---
name: home
url: /
controller: HomeCtrl
---
<div class="grid-container">
<h1>Welcome to Foundation for Apps!</h1>
<p class="lead">This is version <strong>1.1 Weisshorn</strong>.</p>
</div>
home.controller.js:
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.temp = 'hello';
}]);
app.js:
var app = angular.module('application', [
'ui.router',
'ngAnimate',
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
}
function run() {
FastClick.attach(document.body);
}
To solve this I tried adding my controller reference in gulpfile.js by referring this
I also referred this but I still cannot get it to work. Any idea what I am doing wrong?

Inside gulpfile.js check this line. You'll see that only client/assets/js/app.js is used when coupling your minimized file. You need to make it copy all your controller's .js files too :
// These files are for your app's JavaScript
appJS: [
'client/assets/js/app.js',
'./client/assets/js/controllers/*.js',
]
You can also use an angular module to hold all your controllers & services then injecting it to your app module. This is how I'm using it here and this is how it is also done in this great ready to use Fork : https://github.com/CreativityKills/foundation-apps-template
Note: remember to restart gulp after each modify of its config file and check if your code has been well included in the built JS file ( by default is /build/assets/js/app.js )

loading angular modules after angular is initialized

I use requirejs for loading angular and angular's modules.
I want to require all necessary modules (e.g. angular-sanitize.js) together.
In my require.config I define following rule:
require.config({
path: {
'angular':'libs/angular-modules'
},
shim: {
'angular': {
deps: ['libs/angular'],
exports: 'angular'
},
...
}
});
And in libs/angular-modules.js I define following module:
define(
[
'libs/angular-sanitize',
'libs/angular-animate'
],
function () {
return angular;
}
);
I expect that at the time of loading modules angular.js will already be loaded. But sometimes I get error:
Cannot read property '$$minErr' of undefined angular-sanitize.js:8
This is the eighth line of the angular-sanitize.js:
var $sanitizeMinErr = angular.$$minErr('$sanitize');
So it means that the angular.js file was not loaded but in network tab i see that it was.
I guess that at the time of initializing angular-sanitize module angular.js was loaded but was not initialized (window.angular has not yet been defined).
How I can determine that angular has been initialized?

I would expect to see a shim for angular-sanitize in your RequireJS configuration:
shim: {
... [whatever you already have] ,
'angular-sanitize': {
deps: ['angular'],
},
}
I have not put an exports option because I'm unsure what would make sense there. For AngularJS modules I would not expect anything to be required for exports.
The general rule of thumb is if you open the library's source and cannot find that it calls define by itself, then it needs a shim. angular-animate probably also needs a shim.

You can lazy load your dependencies in the route configuration resolve. Return a promise, and use Require to first load those dependencies, then resolve the promise:
.when('/login', {
templateUrl: appConfig.getUrl('login'),
resolve: { load: ['$q', '$rootScope', '$log', function ($q, $rootScope, $log) {
var deferred = $q.defer();
require(appConfig.getDeps('login'), function () {
$rootScope.$apply(function () {
forms.hideError();
deferred.resolve();
});
});
return deferred.promise;
}]
}
})

AngularJs does not support lazy loading ... yet.
There are a few things floating around the internet that supposedly allow lazy loading, but in my opinion they are messy and overly bloated for minimal benefit
requireJS will not work with angular for this reason

specifying jquery as angularjs's dependency generates error in requirejs

I am experimenting and trying to use the angular.element (jQuery wrapper) inside angular's config() function. However, in the main.js file, as soon as I add the deps under angular, it generates the $injector:modulerr error (where the 1st comment is)
Script tag is placed right before in my html file
<script src="js/vendor/require.min.js" data-main="js/own/main.js"></script>
main.js file
require.config({
baseUrl: "js/vendor/",
paths: {
"jquery": "jquery-2.1.1.min",
"angular": "angular.1.2.9.min"
},
shim: {
"angular": {
deps: ["jquery"], // As soon as I add this, it generates a $injector:modulerr error
exports: "angular"
}
}
});
require(["angular"], function(angular){
angular
.module("app", []) // ng-app="app" already defined in <body>
.controller("appctrl", function($scope){ // ng-controller="appctrl" already defined in <body>
$scope.sample = 1; // this works fine if I don't add deps under angular in require.config
});
});

Error is gone by removing the directive "ng-app='urAppName'" in the html page. The ng-app has to be manually bootstrapped by angular.bootstrap(document.body, ["urAppName"]) AFTER you define your angular module, e.g. angular.module("urAppName", []).controller().....;
Note that you can leave other directives such as ng-controller or your model data such as {{modelName}} in the page.

Use AngularJS as AMD / async loader?

I am using RequireJS for large apps to manage 3rd party dependencies. It handles dependencies on the fly and helps a great deal with dependency management and modularization.
Can Angular do something like this, or does it make sense to integrate it with RequireJS? I would like to lazy-load 3rd party or custom dependencies as needed (compiling options like RequireJS optimizer would be nice too). Any advise or experience would be appreciated!

I use RequireJS, it's pretty straight forward:
require: require.config({
paths: {
jquery: '/assets/js/jquery',
"jquery.bootstrap": '/assets/js/bootstrap.min',
angular: '/js/libs/angular/angular',
sanitize: '/js/libs/angular/angular-sanitize',
text: '/js/libs/require/text',
async: '/js/libs/async/async',
moment: '/assets/js/moment.min'
},
baseUrl: '/js',
shim: {
'angular': {'exports' : 'angular'},
'sanitize': {'exports' : 'sanitize', deps: ['angular']},
'jquery.bootstrap': {deps: ['jquery']},
},
priority: [
"angular"
]
});
require(['jquery', 'angular', 'app'], function($, angular, app){
$(document).ready(function () {
var $html = $('html');
angular.bootstrap($html, [app['name']]);
$html.addClass('ng-app');
});
});
Then inside a file called app (depended on by the first require statement) I have
define(['angular','sanitize'], function (angular, sanitize) {
'use strict';
return angular.module('myApp', ['ngSanitize']);
});

Using RequireJS with AngularJS makes sense but only if you understand how each of them works regarding dependency injection, as although both of them injects dependencies, they inject very different things.
AngularJS has its own dependency system that let you inject AngularJS modules to a newly created module in order to reuse implementations. Let's say you created a "first" module that implements an AngularJS filter "greet":
angular
.module('first', [])
.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
}
});
And now let's say you want to use the "greet" filter in another module called "second" that implements a "goodbye" filter. You may do that injecting the "first" module to the "second" module:
angular
.module('second', ['first'])
.filter('goodbye', function() {
return function(name) {
return 'Good bye, ' + name + '!';
}
});
The thing is that in order to make this work correctly without RequireJS, you have to make sure that the "first" AngularJS module is loaded on the page before you create the "second" AngularJS module. Quoting documentation:
Depending on a module implies that required module needs to be loaded
before the requiring module is loaded.
In that sense, here is where RequireJS can help you as RequireJS provides a clean way to inject scripts to the page helping you organize script dependencies between each other.
Going back to the "first" and "second" AngularJS modules, here is how you can do it using RequireJS separating the modules on different files to leverage script dependencies loading:
// firstModule.js file
define(['angular'], function(angular) {
angular
.module('first', [])
.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
}
});
});
// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
angular
.module('second', ['first'])
.filter('goodbye', function() {
return function(name) {
return 'Good bye, ' + name + '!';
}
});
});
You can see that we are depending on "firstModule" file to be injected before the content of the RequireJS callback can be executed which needs "first" AngularJS module to be loaded to create "second" AngularJS module.
Side note: Injecting "angular" on the "firstModule" and "secondModule" files as dependency is required in order to use AngularJS inside the RequireJS callback function and it have to be configured on RequireJS config to map "angular" to the library code. You may have AngularJS loaded to the page in a traditional manner too (script tag) although defeats RequireJS benefits.
More details on having RequireJS support from AngularJS core from 2.0 version on my blog post.
Based on my blog post "Making sense of RequireJS with AngularJS", here is the link.