We Keep Coding

AngularJS, ocLazyLoad and ui-router: How to load on demand without centralize 'state' on the main app.js class

I'm very new on ui-router and ocLazyLoad and probably this question could be easy to resolve but the fact that I'm writing here its because I did not have luck searching on blogs. My app is running nice with ocLazyLoad now.
This is my configuration on my main app.js class:
angular.module('me', [
'ui.router',
'oc.lazyLoad',
'me.partials.footer',
'me.partials.header'
])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/ini')
$stateProvider
.state('ini', { // Login
url: '/ini',
templateUrl: 'views/ini/ini.html'
})
.state('signin', {
url: '/signin',
templateUrl: 'views/signin/signin.html'
})
.state('home', {
url: '/home',
templateUrl: 'views/home/home.html',
resolve: {
home: function($ocLazyLoad) {
return $ocLazyLoad.load(
{
name: "views.home",
files: [
"views/home/home.js",
]
}
);
}
}
})
.state('home.profile', {
url: '/profile',
templateUrl: 'views/profile/profile.html'
})
.state('home.board', {
url: '/board',
templateUrl: 'views/board/board.html'
});
}]);
Now I wish to stop put more states on the same class otherwise my app.js will be huge in a couple of months. So I've removed some states from here to my other module, called 'home-module':
home.js
angular
.module('views.home', [{
name: "views.home.controller",
files: ["views/home/home-controller.js"]
}
])
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'views/home/home.html',
resolve: {
home: function($ocLazyLoad) {
return $ocLazyLoad.load(
{
name: "views.home",
files: [
"views/home/home.js",
]
}
);
}
}
})
.state('home.profile', {
url: '/profile',
templateUrl: 'views/profile/profile.html'
})
.state('home.board', {
url: '/board',
templateUrl: 'views/board/board.html'
});
}]);
BUT I'm getting this error: Could not resolve 'home.board' from state 'ini' which makes totally sense because the file home.js it's not being loaded before. How can I resolve this?.
Writing all my app states on my unique main app.js class it's the only way?

it is error of state. not resolve.
i prefer use ocLazyLoad from my controllers. in there we have a lot more control
.controller("MyCtrl", function($ocLazyLoad) {
$ocLazyLoad.load('views/home/home.js');
});

Using ui-router - is there a way to provide a path to controller file ?

I am making a very basic angular app using ui-router, and I have 3 "modules" right now, which are home, login, and register. Here is how I have defined them:
'use strict';
var app = angular.module('exampleApp', [
'ui.router',
'ngAnimate',
'ui.bootstrap'
]);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: './main/home/home.html',
controller: './main/home/home-controller.js'
})
.state('login', {
url: '/login',
templateUrl: './main/login/login.html',
controller: './main/login/login-controller.js'
})
.state('register', {
url: '/register',
templateUrl: './main/register/register.html',
controller: './main/register/register-controller.js'
})
})
However, I think I am doing the controller: portion wrong. I want to define each controller for each "module", and I'm not sure how to go about doing that.
Here's my file structure -

First define your controller.
angular.module('exampleApp').controller('loginCtrl', function () {
// ctrl task goes here.
});
Mapping controller to a route.
$stateProvider.state('login', {
url: '/login',
templateUrl: 'path/to/login.html',
controller: 'loginCtrl'
})

Nested views on UI Router in MEAN Application

I am working on a MEAN application and I don't know how can I make my ui-router work as expected.
I have an index.html template where i load all my javascript and css that my application needs to work like angular, jquery, angular-ui-x, bootstrap and inside the index's body i have set an ui-view.
The first state I'm using is login, that uses all index's body ui-view. When users is logged in succesfully, it redirects to a home.html page (state: home) which also is using all index's body. Home has a sidebar a header and a content. Inside home's content i'm placing a nested ui-view.
I want every content that comes next inside home's ui-view. And if it's possible i want to make home abstract so i dont have to do home.state1, etc.
To clarify things i have draw an image (I know, my mspaint level is impressive).
And here are my states:
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("login");
$stateProvider
.state('login', {
url: '/login',
templateUrl: '../views/login.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'myApp',
files: [
'js/controllers/LoginCtrl.js',
'css/login.css'
]
}]);
}]
}
})
.state('home', {
url: '/home',
templateUrl: '../views/home.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'myApp',
files: [
'js/controllers/homeCtrl.js',
'css/template.css'
]
}]);
}]
}
})
});

Here is an exemple of multiple states with some statics parts (menus etc...)
See it working in this plunker
Here are the states definitions :
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
//This is not a real view so we put it abstract
//This will manage the menus
.state('app', {
abstract: true,
templateUrl: 'app.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.state('app.greetings', {
url: '/greetings',
templateUrl: 'greetings.html',
controller: 'GreetCtrl'
})
});
Hope it helped, if you have any other question feel free to ask.
EDIT : I personally prefer to call the abstract state "app" cause it symbolize the application view.

AngularJS UI Router data persists when navigating from grand-child to parent

I am having weird issue probably caching issue while navigating from grand-child(/dashboard/1/production) to parent(/dashboard).
Following are few screenshots:
The selections i.e Delphi-UI and production shouldn't persists.
Following is my snippet of application config:
$stateProvider
.state('root', {
url: '/',
views: {
'header': {
templateUrl: 'ngapp/templates/header.html'
}
}
})
// dashboard routes
.state('root.dashboard', {
url: 'dashboard',
views: {
'content#' : {
templateUrl: 'ngapp/home/templates/dashboard.html',
controller: 'DashboardCtrl',
controllerAs: 'vm'
}
}
})
.state('root.dashboard.app', {
url: '/{id:int}',
views: {
'body#root.dashboard' : {
templateUrl: 'ngapp/home/templates/dashboard-body.html',
controller: 'DashboardBodyCtrl'
}
}
})
.state('root.dashboard.app.env', {
url: '/:name',
views: {
'body#root.dashboard' : {
templateUrl: 'ngapp/home/templates/env-content.html',
controller: 'EnvContentCtrl'
}
}
});
And DashboardCtrl is:
controllers.controller('DashboardCtrl', ['$scope', '$http', '$state', '$timeout', 'appsFactory', function($scope, $http, $state, $timeout, appsFactory) {
$scope.envs = [];
$scope.deps = [];
$scope.envBtnText = $scope.appBtnText = "Choose here";
$scope.headerTitle = "Environment Configuration And Management";
$scope.appStatus = {
isopen: false
};
$scope.envStatus = {
isopen: false
};
appsFactory.list(function(data) {
$scope.apps = data;
});
}]);
Full controller code : http://goo.gl/BWtiU5
Project hosted here : https://github.com/budhrg/atlantis-dashboard
Also, navigating back to Atlantis UI(dashboard) doesn't reset data like
$scope.envs, $scope.deps, $scope.envBtnText and $scope.appBtnText.
What might be issue here? Am I missing anything?

Nested States & Views
When the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well. Below, when the "contacts.list" state is active, the "contacts" state is implicitly active as well, because it's the parent state to "contacts.list".
Your controller isn't getting re-instantiated (expected). There are a couple ways to handle this.
See:
How to make angular ui-router's parent state always execute controller code when state changes?

angular - controller excute more than 1 time

I know it's asked before, but can't find solution that works for me.
I get each controller start 3 times!
It's problematic for me because I have sound in my app and it's display 3 times.
I'm new to angular. i don't know if it's meaningful but i have all controllers defined in one file controllers.js. I check and the file app.js called only once.
this is my app.js:
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatAnimations',
'ui.router',
'phonecatControllers',
'phonecatFilters',
'phonecatServices',
'ui.utils',
'angularCircularNavigation',
'timer'
]);
phonecatApp.config(['$stateProvider',
function ($stateProvider, $urlRouterProvider) {
var home = {
name: 'home',
url: '',
views: {
'': {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}
}
};
var learn = {
name: 'learn',
url: '/learn',
views: {
'': {
templateUrl: 'partials/learn.html',
controller: 'learnCtrl'
}
}
};
var articles = {
name: 'articles',
url: '/articles',
views: {
'': {
templateUrl: 'partials/articles.html',
controller: 'articlesCtrl'
}
}
};
$stateProvider.state(articles);
$stateProvider.state(learn);
$stateProvider.state(home);
} ]);
thanks!

From my experience the most common issue that leads to controller double calling is:
You have controller call from $stateProvider state, at the same time you call controller from HTML.
For example consider:
$stateProvider
.state('sidemenu.groups', {
url: "/groups",
views: {
'mainContent': {
templateUrl: 'partials/groups/groups.html',
controller: 'GroupsCtrl' // <-- 1st call
}
}
})
and in HTML:
<div ng-controller="GroupsCtrl"></div> <!-- 2nd call -->
So remove ng-controller
Hope it will help you

decided to use $routeProvider instead and the problem solved..