With the new angular-route version, you need to require('angular-route') in your dependencies but I can't seem to get this working. In the angular-route npm page, it says to do angular.module('myApp', [require('angular-route')]);
This is my code:
angular.module('app.routes', [require('angular-route')])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'app/views/pages/home.html'
});
$locationProvider.html5Mode(true);
});
When I run my server, I get the error: require is not defined.
Can anyone help me here.
You need to use browserify if you want to use require in frontend.
Browserify is a node module that takes your main JavaScript file, read all its required dependencies (and dependencies of dependencies), and spits out a single JavaScript file, ready to be included in your HTML. This file contains JavaScript code that is actually compatible with browsers, in other words, it browserfies your Node modules.
Also you can see the following link how he structure the angular js with browserify
http://omarfouad.com/blog/2015/03/21/advanced-angularjs-structure-with-gulp-node-and-browserify/
Other wise you need to use the following code snippet.
angular.module('app.routes', ['ngRoute']);
You should use the dependency injection as normally:
angular.module('app.routes', ['angular-route']);
Remember that you need to load the angular-route module before you load your app.js.
require is from requirejs
Related
I am building an angular app with multiple modules. Each module is a view component (rather than having one giant module with all the view components) as recommended by John Papa's Angular style guide. However, whereas previously I could just do...
angular.module('app').config( <config for all client routes and their controllers> )
I've realized that I can't do this since controllers are on separate modules now. So, I've split off the $routeProvider login into their respective files:
angular.module('app.<modulename>').config( <config for app.modulename routes and its controllers> );
However, when I navigate to any route not defined on my app module, I see an empty page, so it seems the $routeProvider for other modules doesn't seem to be working. How do I make multiple modules share the ng-view?
In order for your modules to be configured, you need to include them in the main application module via the dependency array. For example, say you have the following modules...
angular.module('app.module1', ['ngRoute'])
.config(function($routeProvider) { ... })
angular.module('app.module2', ['ngRoute'])
.config(function($routeProvider) { ... })
You configure and include them via
angular.module('app', ['app.module1', 'app.module2'])
I read this article about best practices for AngularJS project structure:
https://scotch.io/tutorials/angularjs-best-practices-directory-structure
Under the title "App Folder" he explains shortly the difference between the files app.module.js and app.route.js but I didn't understand.
Can anyone give me an example with a short pseudo code for both of the files?
Any help will be profoundly appreciated!
Under this structure, app.module.js would be used to create the main module for your application (eg. App), configure services that you are using throughout your application, or for running arbitrary code once the module has loaded all of its dependencies and configured any services it may wish to configure.
app.route.js would be for specifically configuring one service: the router that you are using to handle state in your application. It could create its own module or re-use the one from app.module.js, but if it were to use a custom module, it would have to depend on your choice of router directly. In addition, you would have to add it as a dependency for the main app.module.js eg.
angular.module('App', ['App.Routes']);
angular.module('App.Routes', ['RouterModule']);
Example using just one module named App, which also depends on some other arbitrary module SomeModule and the routing module RouterModule:
app.module.js
angular.module('App', ['SomeModule', 'RouterModule'])
.config(function (SomeServiceProvider, SomeOtherServiceProvider) {
// Configure SomeServiceProvider/SomeOtherServiceProvider.
})
.run(function () {
console.log('Done loading dependencies and configuring module!');
});
app.route.js
angular.module('App')
.config(function (YourRouterProvider) {
// Configure YourRouterProvider to define the states for the application.
});
Angular Modules:
https://docs.angularjs.org/api/ng/function/angular.module
Routing in Angular using ngRouter:
https://docs.angularjs.org/api/ngRoute
I'm new on AngularJS and I have problems each time I follow a tutorial and add an external module. And I have some questions about how not to get injection errors.
Q1. How I can solve the injector/module problem? I have used bower to install 'ngSanitize', included in the HTML like:
<body ...>
<script src="assets/js/angular.min.js"></script>
<script src="bower_components/ngSanitize/index.js" type="text/javascript"></script>
</body>
Q2. If the order of adding the modules affects the results, is there a plugin for NetBeans, or an online application to check modules dependencies so they can be added in order?
Q3. Finally, what are the correct steps to inject external modules to an AngularJS single page application without injector/modulerr?
Original:
angular.module('app', [
'ngRoute',
'ngAnimate',
'angularMoment',
'angular-preload-image',
'truncate',
'app.core'
]);
Objective situation that throws injection error for 'ngSanitize':
angular.module('app', [
'ngRoute',
'ngSanitize',
'ngAnimate',
'angularMoment',
'angular-preload-image',
'truncate',
'app.core'
]);
The displayed error that crashes the application loading
I got the same error using angularjs.org/1.4.8.
The main problem I think is from using that specific ngSanitize.
You should install it using: bower install angular-sanitize and not bower install ngSanitize.
Despite being related to the same thing, ngSanitize is, according to it's repo description:
angular-sanitize module without including angular.js for Backbone and
other frameworks
As you can see they belong to different repos:
angular-sanitize: https://github.com/angular/bower-angular-sanitize
ngSanitize: https://github.com/gdi2290/ngSanitize
Script loading in HTML is important. I always start by inserting jQuery, then angular, then angular specific modules like (angular-animate, angular-sanitize, etc) and then my custom angular modules scripts.
Regarding Q3, I don't think you messed up with module injection. It just showed that error because of using ngSanitize instead of angular-sanitize.
I can't seem to get Webpack or Browserify to work with UI-Router. Can anybody help?
Here is my module file:
"use strict";
require("angular");
angular
.module("app", [require("angular-ui-router")])
.config(require("./app.routes"));
And my file for the routes:
"use strict";
module.exports = function($urlRouteProvider, $stateProvider) {
$urlRouteProvider.otherwise("/state1");
$stateProvider
.state("state1", {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state("state2", {
url: "/state2",
templateUrl: "partials/state2.html"
});
}
So sadly when you combine bower and the angularjs dependency injection system, quite frequently a component won't use the same bower package name as it's angular module name. This is completely annoying and frustrating, but it is sadly quite common. In this case, the bower component named "angular-ui-router" declares itself with angular module name "ui.router", which is also what it exports in commonjs. So:
In your package.json "browser" section, configure it like this:
"ui.router": "./bower_components/angular-ui-router/release/angular-ui-router.js",
Then in your browser code, you can both require it (so browserify includes it in your bundle) and inject it into your angular app at the same time (this is a bit advanced/confusing, but it happens to be supported by this particular module, whereas most angular js add-ons in bower don't have any support for commonjs baked in).
angular.module("app", [require("ui.router")]);
If you want to use bower with webpack, you need a line like this: https://github.com/jeffling/angular-webpack-example/blob/master/template/webpack.config.coffee#L83
This will teach webpack to read the main property in bower.json files. This works for angular-ui-router - I use it on our projects.
I'm trying to use the $stateProvider in Angular to load in partial modules on a certain view. However I can't get past the first step, which is injecting 'ui.router'
var app = angular.module('app-training', ['ui.router']);
http://tinyurl.com/m5hsfr8
Failed to instantiate module portalExchange due to:
Error: [$injector:modulerr]
You must include the ui.router file to your index.html after the AngularJS library. In the last versions of angular the Google team separated the ng-router to a separate module to alow users choose between ng-router and ui-router. I do believe that in the next releases the ui.router will be default.