Im building a big app , and my structure goes like this:
Each module has its own folder structure for controllers, directives, etc...
Each folder has an index.js file and then other files to separates each controller, each directive, etc...
The index.js file contains the definition of the module. For instance for the controllers of the businessModule above:
angular.module('myCompany.businessModule.controllers', []);
There's no dependencies here, but there could be any.
Then in firstCtrl.js, I can reuse that module and add the controller to it:
angular.module('myCompany.businessModule.controllers').controller('firstCtrl', function(){
});
Then the app.js aggregates all the module that I want for my application by adding them to the dependencies array.
angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule'],'ngRoute');
Now comes the route that include the other modules view.
My Route goes like:
var myApp = angular.module('myApp');
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'firstCtrl'
})
});
Now the question is can i connect a controller that from another module to the specific controller that have this module injected like in my situation when myApp contains myCompany.businessModule.controllers and has firstCtrl ?
Your modules file :
angular.module('myApp').config(function($routeProvider){
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'firstCtrl'
});
});
Include it as a dependency when you want to use it.
angular.module('app',[other deps]);
Related
I was looking at some how-tos on doing angular-routing and to pass parameters into a controller. This is what i did:
.controller("myController", ["$scope", "$routeParams", function($scope, $routeParams, Units, Tests){
//Units and Tests are both factories i created to reference within this function.
var id = $routeParams.id;
console.log(id);
}]);
When I did this, it failed to inject "$routeParams" into my application.
I looked at the angular.js file, and it looks like i am running: #license AngularJS v1.5.3
Is this way of doing it no longer the correct way? I tried to update it to:
.controller("myController", ["$scope", "ngRoute", function($scope, ngRoute, Units, Tests){
// ...
}]);
but that seemed to also not inject correctly.
Is there something I am missing?
Currently I am developing with the Ionic Framework, which is leveraging the AngularJS tools.
When dealing with ionic, as stated within the question, you connect to the $stateProvider so when you are creating a state such as:
$stateProvider
.state("unit", {
url: "/unit/:id",
templateUrl: "templates/unit.html",
controller: "UnitController"
})
you would then in your controller do:
.controller("myController", ["$scope",
"$stateParams",
function($scope, $stateParams, Units, Tests){
var id = $stateParams.id;
console.log(id);
}]);
This is the way to do it in Ionic, since it is leveraging a $stateProvider over a $routeProvider
If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire application.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
})
.when("/blue", {
templateUrl : "blue.html"
});
});
Your application needs a container to put the content provided by the routing.
This container is the ng-view directive.
like this
<div ng-view></div>
You can also define controllers for each view
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/london", {
templateUrl : "test.html",
controller : "myController"
})
});
I built a single page app based on this tutorial:
https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
this is the file structure that they suggested:
- script.js <!-- stores all our angular code -->
- index.html <!-- main layout -->
- pages <!-- the pages that will be injected into the main layout -->
----- home.html
----- about.html
----- contact.html
the part about the html pages is pretty straightforward - a page to every ng-view. cool...
but the script.js seems to me like a bad modeling.
should I really put all my js code in one file?
it seems to me like this isn't the best way to model it.
what happened if I will have a lot of pages in my single page app?
I will have a long long one js file with all the controllers..
what is the best practice to model a single page app in angularjs?
Thanks!
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
This exhaustive styleguide recommends creating folders and organzing your app based on features. https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure
I recommend reading the whole "Application Structure" section, which really helped me organizing my angular projects
I'm writing a simple product information management app using angular js. To keep my app as modular as possible i've split it into multiple modules with one module "pim" as startpoint. For each module I want to have a different route, so that it is easy to plug in a new module or remove it without having to maintain a huge route in the pim module config.
Currently I have two routes (the first route):
(function(){
angular
.module("pim")
.config(router)
function router($routeProvider){
$routeProvider
.when("/",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/info",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/alcohol",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
});
}
})();
The second route
(function(){
angular
.module("alcohol")
.config(router)
function router($routeProvider){
$routeProvider
.when("/alcohol/list",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
})
.when("/alcohol/info",{
templateUrl: "view/alcohol.info.html",
controller: "alcoholController"
});
}
})();
As you can see /alcohol has a templateUrl and a controller, the same as /alcohol/list, but i want to know if there is a simple (standard) way to change to another URL for example /alcohol/list, so that I do not have to repeat the templateUrl and controller and keep this information in the alcohol module, where it belongs.
For example
.when("/alcohol",{
routeTo: "/alcohol/list"
})
Thank you for your help
SOLVED
The option to redirect exists, did not look in the $routeProvider documentation well enough:
.when("/alcohol",{
redirectTo:"/alcohol/list"
});
The code above works
You can use $routeProvider's redirectTo route map.
.when("/alcohol", {
redirectTo: "/alcohol/list"
});
Read more: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
I get this error, described on this url:
Description This error occurs when a module fails to load due to some
exception. The error message above should provide additional context.
Using ngRoute In AngularJS 1.2.0 and later, ngRoute has been moved to
its own module. If you are getting this error after upgrading to 1.2.x
or later, be sure that you've installed ngRoute.
But I don't see why it's going wrong, I've added ngRoute like so:
var myApp = angular.module("myProject", ["ngRoute"]);
(and a whole bunch more, but I don't think that matters)
And the ngRoute JS file is added in the _Layout.cshtml file:
<script src="~/Scripts/External/Angular/angular-route.js"></script>
What else should I look at?
controller.js
var app = angular.module('app', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Add external file for angular-route.js after angular script in index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
working code at W3school:
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing
I have a main.html with multiple subpages:users.html,usergroups.html,... which all of them have their own app files and controllers separately: mainapp.js,usersapp.js,usergroupsapp.js,...
And I use ui-router to route to particular sub page as needed:
var myApp = angular.module("myApp",['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('users', {
url: "/users",
templateUrl: "pages/users.html",
controller : 'UsersCtrl'
})
.state('usergroups', {
url: "/usergroups",
templateUrl: "pages/usergroups.html",
controller : 'UsergroupsCtrl'
})
...
Everything works fine until I need to use one of the module multiselect.jsin my usergroups.html. When I added it directly to UsergroupsCtrl in usergroupsapp.js:
var app= angular.module('myApp',['am.multiselect']);
...
But immediately I have an error:
Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
Which MainCtrl is from main app.js.
How can I resolve this issue?
Here is correct way to add am.multiselect module dependency to your main myApp module:
var myApp = angular.module("myApp", ['ui.router', 'am.multiselect']);
In usergroupsapp.js you should just have module getter, not setter (don't recreate module once again). Note, that there are no [...] when you retrieve existing module:
var app = angular.module('myApp');