We Keep Coding

AngularJS trying to use nested state from external module

I got some err when i try to create external module, i think that is something wrong with my nested state in nested.js
The err said:Error: State 'admin.quyensudung' has a 'views' object. It cannot also have "view properties" at the state level. Move the following properties into a view (in the 'views' object): controller
Please help me fix this bug and tell me the reason i got this bug thank too much
app.js:
var app = angular.module('app', [
'ui.router',
'ngCookies',
'quyensudung',
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/admin');
$stateProvider
.state('admin', {
url: '/admin',
templateUrl: 'admin/home/index.html'
}])
nested.js
var quyensudung = angular.module('quyensudung', [])
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('admin.quyensudung', {
url: '/quyensudung',
views: {
"container#": {
templateUrl: 'admin/quyensudung/index.html'
},
},
controller: 'quyensudungController',
})
}])

Error: State 'admin.quyensudung' has a 'views' object. It cannot also have "view properties" at the state level. Move the following properties into a view
Just move controller: 'quyensudungController', into views -> "container#"
Instead:
.state('admin.quyensudung', {
url: '/quyensudung',
views: {
"container#": {
templateUrl: 'admin/quyensudung/index.html'
},
},
controller: 'quyensudungController',
})
Should be:
.state('admin.quyensudung', {
url: '/quyensudung',
views: {
"container#": {
templateUrl: 'admin/quyensudung/index.html',
controller: 'quyensudungController'
},
}
})
Ref: Nested-States-and-Nested-Views

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');
});

how to write bunch of pages efficently using angular js ng-route

If I want to add more pages approximately to 100 so how can I write the below code? I just want the shortcut of "when" which is given below. I don't want to write the "when" 100 times.
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
templateUrl: 'angular-route-template-1.jsp',
controller: 'RouteController'
}).
when('/route2', {
templateUrl: 'angular-route-template-2.jsp',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("RouteController", function($scope) {
})

module.config(['$routeProvider', 'routes'
function($routeProvider, routes) {
// routes is the list of my routes
// e.g.
// routes = [{
// url: '/about',
// options: {
// templateUrl: '/about.html',
// controller: 'AboutController as vm',
// }
// }]
routes.forEach(function(route) {
$routeProvider.when(route.url, route.options);
});
$routeProvider.
otherwise({
redirectTo: '/'
});
}
]);

You can alternatively use the ui-router module to achieve this more cleanly.
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
You can save your 100 'state' objects inside an array (perhaps even in its own js file), and loop them through the $stateProvider.state(stateObject);.

Ionic template does not work on mobile

I have been making an app in AngularJS with Angular-ui-router based on Ionic Framework. It works perfect on the desktop in every web browser, but it does not show anything on my mobile (after build I run it on 2 devices). The problem is that it doesn't load template inside ui-view.
I have got an index.html file, the body section is below (in head section there is everything included):
<body ng-app="starter">
<div ui-view=""></div>
</body>
And the part of app.js - run and config.
angular.module('starter', ['ionic', 'ngStorage', 'ngAnimate', 'naif.base64', 'ui.router'])
.run(function($ionicPlatform, $rootScope, $location) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
history = [];
$rootScope.$on('$routeChangeSuccess', function() {
history.push($location.$$path);
});
$rootScope.back = function () {
history.back();
};
})
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
$stateProvider
.state('connectionCheck', {
url: '/',
controller: ['$scope', '$location', '$http',
function($scope, $location, $http) {
$http.get('http://pingurl.com')
.success(function(data) {
jdata = data;
if (data.status === "success") {
$location.path('/login');
}else{
$location.path('/error');
}
})
.error(function() {
$location.path('/error');
});
$scope.retry = function() {
$location.path('/');
};
}
]
})
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('main', {
url: '/main',
templateUrl: 'main.html',
controller: ['$scope', '$location', '$localStorage',
function($scope, $location, $localStorage) {
$scope.username = $localStorage.username;
$scope.token = $localStorage.token;
$scope.email = $localStorage.email;
$scope.goToAlerts = function() {
$location.path('/alerts');
};
$scope.goToSettings = function() {
$location.path('/settings');
};
$scope.goToLocation = function() {
$location.path('/location');
};
$scope.goToSymptoms = function() {
$location.path('/symptoms');
};
$scope.getClass = function(path) {
if ($location.path().substr(0, path.length) == path) {
return "active"
} else {
return ""
}
};
}
]
})
.state('error', {
url: '/error',
templateUrl: 'error.html'
})
.state('register', {
url: '/register',
templateUrl: 'register.html',
})
.state('push', {
url: '/push',
templateUrl: 'push.html',
})
.state('alerts', {
url: '/alerts',
templateUrl: 'alerts.html'
})
.state('newSymptom', {
url: '/newSymptom',
templateUrl: 'newsymptom.html'
})
.state('symptoms', {
url: '/symptoms',
templateUrl: 'symptoms.html'
})
.state('newAlert', {
url: '/newalert',
templateUrl: 'newalert.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('location', {
url: '/location',
templateUrl: 'location.html'
});
$urlRouterProvider.otherwise('/');
}).
//some controllers goes here
What I have already checked/tried to do?
I put example content to index.html - it worked.
I tried chanage the name of ui-view and add them in templateURL values of each state.
I changed the .html files to exlude error in them, but it did not helped.
Can anyone more experienced with Ionic/Angular give me a hint what is wrong here?

I seem to notice that it's often due to the modules you're loading in. So It's likely in this line.
angular.module('starter', ['ionic', 'ngStorage', 'ngAnimate', 'naif.base64', 'ui.router'])
Try checking each module by making sure:
You added it to your index.html
it's being called correctly
it's up to date
You can figure out by removing each, one at a time and then seeing if it works on the device.
Also know that AngularJS out of the box uses AngularUI Router and this uses a thing called routing for views. The UI-Router uses a thing called states that is the most used but the unofficial way for AngularJS and Ionic uses their own view state system that is basically the same thing as the UI-Router just with the Ionic namespace. So that is something you need to look up or you may find yourself running into a lot of walls during you builds because you are calling ui.router and I bet it's what's confusing your app, so remove it.

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?