Angular ui-router not loading template - javascript

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.

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 change view in ng-view from a controller

I have a JavaScript web app where I used AngularJS to ease things up, but now I bumped into a little problem.
I want to change viewfrom an ng-controller. I use $location.path to do this, but sadly, nothing happens. If I check the $location object, the path will be changed correctly, but the view isn't changing.
I have an ng-view in my Home.html. This is the config I wrote for it:
<html ng-app="app">
...
<body>
<div id="navigation-menu" ng-controller="NavigatorController">
<a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page2">Page2</a>
<a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page3">Page3</a>
</div>
<div ng-view></div>
</body>
</html>
This is the config I made for the $routeProvider which works flawlessly when used in the menusystem
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Page1.html',
controller: 'Page1Controller'
})
.when('/page2', {
templateUrl: 'Page2.html',
controller: 'Page2Controller'
})
.when('/page3', {
templateUrl: 'Page3.html',
controller: 'Page3Controller'
});
});
Upon opening the app I want to show the Page1.html in the ng-view, so that's sorted with the '/' url thing, I guess.
The problem is, that from every other controller, I want to be able to get back to the Page1.html.
I tried making an event in every other controller, like this:
$scope.NavigateBack = function() {
$location.path('/');
}
It's not working, sadly. I don't get any error messages though... I tried it with different addresses in the path, like "/page2", but nothing worked.
What am I doing wrong, that the view isn't changing and the page isn't navigating?
I recommend use
$window.location = "#/"
but don't forgot to inject $window to your controller
Define behaviour in the Page2Controller, for example:
$scope.goBack = function(){
$location.path("#/");
}
And add some button inside of Page2.html:
<button ng-click="goBack()">Return</button>
You might also need to change your navigation links href attribute to #/page2 and #/page3

Using $stateProvider and ui.router in AngularJS

Working through this tutorial on AngularJS with MeteorJS, but have run into some issues with ui.router, $stateProvider, and $locationProvider.
My issues is that, as far as I can tell, everything should be wired up properly for routing, but my links don't actually work. Contents of my main files are below, but first more information about the problem:
The problem seems to be with the line //$locationProvider.html5mode(true); in app.js. Its currently commented out, which allows the page to load, but doesn't route the links properly. If I uncomment it, then the page returns the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module socially due to:
TypeError: undefined is not a function
I assume in reference to $locationProvider being undefined. This looks a lot like a dependency injection error, but I can't find any dependency injection errors. Any help much appreciated.
app.js
if (Meteor.isClient){
angular.module("socially", ['angular-meteor', 'ui.router']);
angular.module("socially").config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {
$stateProvider
.state('parties', {
url: '/parties',
templateUrl: 'parties-list.ng.html',
controller: 'PartiesListCtrl'
})
.state('partyDetails', {
url: '/parties/:partyId',
templateUrl: 'party-details.ng.html',
controller: 'PartyDetailsCtrl'
});
$urlRouterProvider.otherwise('/parties');
//$locationProvider.html5mode(true);
}]);
angular.module("socially").controller("PartiesListCtrl", ['$scope', '$meteor', function($scope, $meteor){
$scope.parties = $meteor.collection(Parties);
$scope.remove = function(party){
$scope.parties.remove(party);
};
$scope.removeAll = function(){
$scope.parties.remove();
};
}]);
angular.module("socially").controller('PartyDetailsCtrl', ['$scope', '$stateParams', function($scope, $stateParams){
$scope.partyId = $stateParams.partyId;
}]);
}
index.html
<head>
<base href="/">
</head>
<body>
<div ng-app="socially">
<h1>
Home
</h1>
<div ui-view></div>
</div>
</body>
parties-list.ng.html
<form>
<label>Name</label>
<input ng-model="newParty.name">
<label>Description</label>
<input ng-model="newParty.desc">
<button ng-click="parties.push(newParty)">Add</button>
</form>
<ul>
<li ng-repeat="party in parties">
{{party.name}}
<p>{{party.desc}}</p>
<p>{{party.name}}</p>
<button ng-click="remove(party)">X</button>
</li>
</ul>
party-details.ng.html
Here you will see the details of party number: {{ partyId }}
I just started using meteor-angular recently as well.
After testing - it looks like your issue was a simple lowercased 'm'.
I can see how the '5' could make camel case confusing.
Corrected: $locationProvider.html5Mode(true);

Index page separate from rest of AngularJS app?

I'm working on two projects right now using AngularJS, and I'm running into the same problem with both of them.
The problem is that I have an index page that looks completely different from any of the inner pages, which means that my ng-view has to consist of the entire page. This makes it so that any time a route changes, the whole page has to reload instead of just the main content area. This causes things like the header or sidebar to flash briefly.
The only good approach I can think of to make my index page separate from my app is to literally have a separate, static index.html and then all my angularJS pages inside a separate folder so that I can use a more focused ng-view.
Is this the only/best approach there is? Has anyone achieved this, or have any ideas on how to? thanks.
A way to solve this problem would be using UI-Router.
For example:
You could have an app.html which is a page that holds all of your application views. In it add a:
<body>
<div ui-view></div>
</body>
and styles/scripts required by the entire application.
All of your views will go there including the index.html view.
Assuming that the pages except the index have some sort of header/body/footer layout in which the body changes according to the actual page you can use a configuration as follows:
var app = angular.module('app', [])
.config(['$stateProvider', function ($stateProvider)
{
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index.html',
controller: 'IndexController'
})
.state('root', {
templateUrl: 'root.html',
controller: 'RootController'
})
.state('root.somePage', {
url: '/some-page',
templateUrl: 'some-page.html',
controller: 'SomePageController'
})
.state('root.anotherPage', {
url: '/another-page',
templateUrl: 'another-page.html',
controller: 'AnotherPageController'
});
}
The root.html will be like a masterpage in ASP.NET Webforms so it would be in the form:
<!-- header markup here -->
<div ui-view></div>
<!-- footer markup here -->

Categories