How to Include Jquery plugin AngularJs Multipage application - javascript

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

Related

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>

angularjs v1 script not loading on page change

I have a small issue in my project is that I am using routing for different pages. Page are changing fine butt not loading Java script when I go to another page. Kindly help me out. Also i want to page autoscroll top.
<div class="ng-view" autoscroll="true"></div>
routing code
adminapp.config( function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "frontend/views/home.html",
controller: "common",
css: "frontend/assets/css/style.css"
})
.when('/about', {
templateUrl: "frontend/views/about.html",
controller: "common",
css: "frontend/assets/css/style.css"
})
});

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

How to change a value in AngularJS based on route?

I would like to change the href link of this "next" arrow in my application based on the route I am on. The application is a slideshow and the next arrow should take you through all the routes. What's the best way to do this?
So for example, if I am on the '/' route the next arrow should take me to '/overall-results' and if I am on '/overall-results' the next arrow should take me to '/swim-lane'. I know the easiest thing to do it make this "arrow" on each page and have a different link for it, but if there's an angular way to this I would like to know.
Route file:
angular
.module('ciscoImaDashboardApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/welcome.html',
controller: 'welcomeCtrl'
})
.when('/overall-results', {
templateUrl: 'views/overall.html',
controller: 'overallCtrl'
})
.when('/swim-lane-results', {
templateUrl: 'views/swim-lane.html',
controller: 'swimlaneCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Where my navigation arrow is:
<ng-view></ng-view>
Next
Since you have a controller for each route, you can keep the template the same, and reference a $rootScope that changes on each controller.
<!-- welcomeCtrl -->
$rootScope.nextLink = "overall-results";
<!-- overallCtrl -->
$rootScope.nextLink = "swim-lane-results";
<!-- swimlaneCtrl -->
$rootScope.nextLink = "somethingelse";
<!-- navigation template shared by all controllers/templates -->
<a ng-href="/{{nextLink}}">Next Link</a>

$routeProvider behaving oddly (Angular)

I got this code
var site = angular.module('site', ['ngRoute']).
config(function($routeProvider){
$routeProvider.
when('/home', {templateUrl: '/NexGaming/pages/home.html', controller: 'mainStaysCtrl'}).
/*when('/', {templateUrl: '/na/pages/home.html', controller: 'mainStaysCtrl'}).*/
when('/in-play', {templateUrl: '/na/pages/in-play.html', controller: 'mainStaysCtrl'}).
when('/popular', {templateUrl: '/na/pages/popular.html', controller: 'mainStaysCtrl'}).
otherwise({redirectTo: '/home', tempalteUrl: '/NexGaming/pages/home.html'});
});
site.controller('mainStaysCtrl', function($scope, $location) {
$scope.setRoute = function(route) {
$location.path(route);
};
});
It basically works as it was intended - links with ng-click"setRoute()" calls the tempalte to be displayed in ng-view. All is good.
But for some reason it stops working after few clicks. I mean, for first 3 to 5 clicks it works as it should. And then it stops. Nothing happens. As if setRoute controller would break itself. Do you have any ideas?
EDIT
As it appers, this bug disables ALL THE LINKS on the site. Even those hardcoded.
Silly mistake. Link looked like this
<div class="bullet-link" ng-click="setRoute('/popular')">Popular Events</div>
And it should look like this
<div class="bullet-link" ng-click="setRoute('/popular')">Popular Events</div>

Categories