We Keep Coding

Angular JS multi level routing

I have an application as following structure
Index.html
which has app.js with all routing and ng-view is added inside index.html
I have another template which am loding on successive login over this ng-view is home.html
can i have a ng-view inside the home.htmlas well ? and load to that ng-view when I click on any menus inside link of home page ?
I am adding my routing details bellow
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'modules/authentication/views/login.html'
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}])
can I add a new routing and load a tempale and controler inside home.html in place of index.html ?

If I understood correctly you want a ng-view inside a ng-view. I think you cannot do that. But the solution would be use the parameter reloadOnSearch which you can set as false, so everytime you reload the page changing it's route it will not reload the previously loaded html structure.
.when('/home', {
controller: 'HomeController',
templateUrl: 'modules/home/views/home.html',
reloadOnSearch: false
})
But to make it work this way you have to type in the fixed html structure in every page you want. A way of doing that is adding includes to your home page and set the view pages by scope variables.
<!--home.html-->
<!--define your structure here-->
<!--includes that will load the desired pages-->
<div>
<div ng-include="'./indexGeneral.html'" ng-if="Page == 'general'"></div>
<div ng-include="'./indexContacts.html'" ng-if="Page == 'contacts'"></div>
<div ng-include="'./indexVehicles.html'" ng-if="Page == 'vehicles'"></div>
</div>

How to Include Jquery plugin AngularJs Multipage application

I am developing a multipage application in AngularJs. My requirement is to open a sublist from a main list in sidebar menu. The sublist collapse out with a transition. I already have a Jquery plugin. It was working perfectly. But when $routeprovider was used in Angular application, it no longer works.
Function for loading jquery is
$.sidebarMenu($('.sidebar-menu'));
The sidebar is common to all pages.
My app.config is as follows
app.js
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/web', {
templateUrl: 'templates/web.html',
controller: 'webctrl'
}).
when('/login', {
templateUrl: 'templates/login.html',
controller: 'webctrl'
}).
when('/register', {
templateUrl: 'templates/register.html',
controller: 'webctrl'
}).
when('/account', {
templateUrl: 'templates/account.html',
controller: 'accountctrl'
}).
when('/subtran', {
templateUrl: 'templates/subtran.html',
controller: 'subtranctrl'
}).
otherwise({
redirectTo: '/web'
});
}]);
Where do I include the above jquery function
When I included as a script in main html page, it threw a JavaScript runtime Error.
index.html
<script>
$.sidebarMenu($('.sidebar-menu'));
</script>
Help me.

The problem is resolved. I just copied the js scripts from the particular file into instead of calling it using a function

AngularJS Route Change Shows Next Template Before Previous One Goes Away

I'm working on an angularjs application.
I cant figure out why the template for my second page briefly shows up below the home page template during route change?
Home Page: http://www.stalwil.com/admin/#/
Enter ZIP: 77056
During transition, watch the second page template show up before the home page template goes away. It's very annoying and I cant figure out why!
Second Page: http://www.stalwil.com/admin/#/enrollment
Here is my config for $routeProvider:
homeServices.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: 'zipController',
templateUrl: 'app/views/zip.html'
})
.when('/enrollment',
{
controller: 'enrollController',
templateUrl: 'app/views/enroll.html'
})
.when('/thankyou',
{
controller: 'thankyouController',
templateUrl: 'app/views/thankyou.html'
})
.otherwise({ redirectTo: '/' });
});

Login page loading as partial and not full page

Hi I'm having a problem in my Angular app. I have the index page which contains a sidebar and a topbar. With ng-view I then load the contents based on what is clicked on the sidebar.
However, this page requires authentication and as such I have a login page to which I want to redirect when the user is not authenticated. The problem is the html is loading as a partial with the sidebar and topbar aswell, when I want it to be a different page.
Here's my code:
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'partials/dashboard.html'
//controller: 'mainController'
//controllerAs: 'vm'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
;
$locationProvider.html5Mode(true);
});
Any additional code that is required to help please say so!
Thank you!

If your problem is user seeing content which he should not see without login in then add the authentication in resolve function inside when block. If you put the login page inside the view with sidebar and topbar user will always see those things. create a separate page for login if you don't want user to see topbar and sidebar, then route to home on login success.

Angular ui-router not loading template

I'm building a toy app in Angular/Rails and I have most of the angular ui routing working, but it doesnt seem to display the template. I know the controller is being loaded because I put a debugger and it freezes in the chrome dev tools.
Link to github branch
EDIT: Its probably because the templateUrl specified isnt a valid route. It's injected the root html file into itself and requiring angular multiple times. Absolute paths don't work either. Still no solution.
Here's some of my code:
I also know the redirect routing works because I've tested it in local host.
angular.module('SwoleMetrics', [
'ui.router',
'templates'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
/**
* Routes and States
*/
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard.html',
controller: 'DashboardCtrl'
});
// default fall back route
$urlRouterProvider.otherwise('/dashboard');
// enable HTML5 Mode for SEO
$locationProvider.html5Mode(true);
});
Here's the controller:
angular.module('SwoleMetrics')
.controller('DashboardCtrl', function ($scope) {
$scope.things = ['Angular', 'Rails 4.1', 'UI Router', 'Together!!'];
});
And finally the template:
<div class="container">
<h1>The Home View!</h1>
<ul>
<li ng-repeat="thing in things">{{thing}}</li>
</ul>
</div>
It goes inside this tag but I dont think this is the issue:
<div class="main-view-container" ui-view></div>
I'm using angular-ui-templates 1.4.0 if that helps.