I'm currently working on a very large scale application that involves many routes for the many different components the application has. My team and I have decided to try and separate out the different routes into their own file, rather than having a very large routes file.
I have poked around trying to create a variable and importing into my app.js file and passing my created route object to a new state.
I keep running into errors when I try to import a file in my app.js file.
I want to know if there is a way to pass state objects from different files into the main app.config ?
Here is my App.js file that works with a statically defined state
let app = angular.module('ordyxApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/login.html'
})
.state(system)
});
This is what I'm trying to achieve
pages/clockIn/clockInRoute.js
export let ClockIn = {
url: '/clockIn',
templateUrl: 'pages/clockIn/clockIn.html'
};
Then my app.js file would look similar to something like this
let app = angular.module('ordyxApp', ['ui.router']);
import {ClockIn} from "./pages/clockIn/clockIn.route";
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/login.html'
})
.state(ClockIn)
});
you should set a name for the state
stateProvider .state('home', {
url: '/home',
templateUrl: 'pages/login.html'
})
.state('clockIn', ClockIn)
Related
I have a hard time understanding this. I'm attempting to put controllers in separate files so that they only deal with 1 thing, ideally, a partial view
My folder structure is like this...
My app.js file is like this.
angular.module('mikevarela', ['ui.router', 'mikevarela.controller.home', 'mikevarela.controller.about', 'mikevarela.controller.audio'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '../partials/home.partial.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: '../partials/about.partial.html',
controller: 'AboutController'
})
.state('audio', {
url: '/audio',
templateUrl: '../partials/audio.partial.html',
controller: 'AudioController'
});
});
and my controllers each have a module like this...
angular.module('mikevarela.controller.home', [])
.controller('HomeController', ['$scope', function($scope) {
$scope.title = 'Mike Varela Home Page';
}]);
My issues comes with the intial app declaration. I don't want to have to inject all the controllers in the main array app definition, that would be cumbersome and long winded. Isn't there a way to define the controller at the controller file. Kind of like this
angular.module('mikevarela', []).controller('HomeController', ['$scope', function($scope) {
// stuff here
}]);
Use angular.module('mikevarela').controller..... in subsequent files.
angular.module('mikevarela',[]).controller.....
is equivalent to redefining your app. The second param is requires array.
Quoting official angular.module docs
requires
(optional)
!Array.=
If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.
About your Controllers...
I think you're loading the controllers incorrectly.
You don't need to declare controllers as a dependency. Rather stating module.controller('yourController)` makes that controller available throughout the module.
If your controllers are in separate files, all you need to do to make it available is load it in with a script tag. e.g.
<script src="app.js"></script>
<script src="controller1.js"></script>
<script src="controller2.js"></script>
About your Application Structure...
This is not related to your question, but just coming from someone who's developed using Angular, I'd recommend not grouping your application by controllers/ by rather by feature. See: https://scotch.io/tutorials/angularjs-best-practices-directory-structure
I am using angular UI_Router in my project. I want to load specific .less files for specific states. I tried with angular-UI-router-styles, but it didn't work. May be am using less instead of css.
Please check my code. am using angular-ui-router-styles for css adding into the routing. it is working but the styles for the pages are not reflecting.
index.js
require('jquery/dist/jquery.js');
require('bootstrap/dist/css/bootstrap.css');
require('./content/common.css');
require('angular');
require('angular-ui-router/release/angular-ui-router.js');
require('angular-route/angular-route.js');
require('angular-cookies/angular-cookies.js');
require('materialize-css/dist/css/materialize.css');
require('angular-ui-router-styles/ui-router-styles.js');
angular.module('adminsuite',['ui.router','ngCookies','uiRouterStyles']).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login', {
url: '/',
views:{
content:{
templateUrl: 'Login/login.html',
controller: 'loginController',
data:{
css:"styles/login/login.less"
}
},
footer:{
templateUrl: 'common/footer.html',
controller: 'footerController'
}
}
})
// HOME STATES AND NESTED VIEWS ========================================
.state('dashboard', {
url: '/dashboard',
views:{
header:{
templateUrl: 'common/header.html',
controller: 'headerController'
},
content:{
templateUrl: 'dashboard/dashboard.html',
controller: 'dashboardController',
data:{
css:"styles/dashboard/dashboard.less"
}
},
footer:{
templateUrl: 'common/footer.html',
controller: 'footerController'
}
}
});
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
});
require('./Login/loginController.js');
require('./dashboard/dashboardController.js');
require('./common/headerController.js');
require('./common/footerController.js');
require('./services/loginAuthenticationService.js');
require('./services/UserServices.js');
The only way that I'm aware of to achieve this would be to use a Webpack or similar build. This way you can require('./state-1.less') within your component/directive. The idea is that webpack only includes files that are needed. Realistically though, setting up a new compiling tool/task runner is not simple if you've already begun.
There is no issue in providing all css to your application. If switching is your task then you can use ngclass to provide different style blocks based on events that occur within in each state.
The_ehT is correct, you'll need to provide compiled css if you want to use the desired plugin.
For some reason my ui-sref links are not updating and allowing me to change state on my app.
Can someone please tell me what i have done wrong? I have attached a plunkr link for the full code
App.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
'use strict';
// defaults to home
$urlRouterProvider.otherwise('/home');
// states
$stateProvider
.state('app', {
url: '',
abstract: true,
templateUrl: 'app.html',
controller: 'AppController'
})
.state('app.home', {
url: '/home',
templateUrl:'home.html',
controller: 'HomeController'
})
.state('app.settings', {
url: '/settings',
templateUrl: 'settings.html',
controller: 'SettingsController'
});
}]);
http://plnkr.co/edit/m77wrOU0sMLG0fmicTaK
If i navigate to /home, this works and if i go to /settings that also works. but the links are not generated on my pages?
Also, if i want to have multiple layouts, say i would like an admin layout and a normal user layout, maybe the admin layout would hide a few items on the page and show others, would this be best to be done using routing? I have about 6 different parts of the page, currently not setup as views, but i wonder if this is the route i should go down?
Is there anything wrong with having more than 1 abstract state in your stateProvider, or is that stupid?
I know I can load modules (dependencies) in AngulrJS when bootstrap the app like this:
var app = angular.module('myApp', [
'ngSanitize',
'ionic',
]);
I want to load some modules on the given controller, not global.
For example I have two controllers:
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'partials/index',
controller: IndexCtrl
})
.state('addPost', {
url: '/addPost',
templateUrl: 'partials/addPost',
controller: AddPostCtrl
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
});
I want to load ui.tinymce module in AddPostCtrl controller only, so I can use tinymce editor on addPost page. But I don't want to load ui.tinymce when I visit index page.
Is there any way to do it?
You nee to use AngularAMD, it lets you create angular objects on demand:
http://marcoslin.github.io/angularAMD/#/modules
http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs
I am using ui-router in my web application. On one of my views I have a canvas which I am drawing to using a 3rd party library. This library attempts to dynamically load images (HTTP GET). My problem is ui.router's $urlRouterProvider is handling the routing and therefore all image requests are resulting in a 404 error.
How is this typically handled in an AngularJS application? Is there a way to ignore specific routes?
My route configuration looks like this:
app.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/");
//
// Now set up the states
$stateProvider
.state('main', {
url: "/",
templateUrl: "partials/main.html"
})
.state('login', {
url: "/login",
controller: 'LoginCtrl',
templateUrl: "partials/login.html"
})
.state('signup', {
url: '/signup',
controller: 'SignupCtrl',
templateUrl: 'partials/signup.html'
})
});
I'd like to ignore any routes matching '/assets/*' and allow those requests to pass right through to the server.
This is typically dealt with at the server level (Express here):
app.use express.static(path.join(__dirname, "assets"))
So that any url with "/js/app.js" will be rendered as an asset. It shouldn't be something angular has to deal with. I've got a very similar $stateProvider that I grabbed off of some boilerplate and there's no special case for assets in the $stateProvider.
Do you have script or img tags inside of a controller or view boundary? That could explain what you are seeing.