everyone. Has anyone else encountered jQuery console errors when routing to new views with AngularJS?
An example of the error is
Uncaught Error: Syntax error, unrecognized expression: #/projects/project-id
Everything still works, but that error gets thrown whenever a link is clicked that is related to my Angular routing. The error shows up attributed to jQuery, so I assume it's an issue with it not liking links starting with "#/"
HTML
<div class="project" ng-repeat="project in projects">
<a href="#/projects/{{project.id}}">
<h4>{{ project.name }}</h4>
<p>{{ project.subtitle }}</p>
</a>
</div>
JS
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: "HomeController",
templateUrl: "js/angular/views/home-view.html"
})
.when('/projects/:projectId', {
controller: 'ProjectController',
templateUrl: 'js/angular/views/project-view.html',
})
.otherwise({
redirectTo: '/'
});
});
The console error isn't a showstoppper, because like I said, everything still works. But if anyone has encountered this before and has a fix, I'd really appreciate it.
Set the $locationProvider to work in HTML5 mode. See here: https://docs.angularjs.org/api/ng/provider/$locationProvider
An example of how to use it would be the following:
app.config(function ($locationProvider) {
// use the HTML5 History API
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
Related
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>
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.
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
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);
I am new to angularjs, was just trying to build a CRUD app with it.
My code is like this http://jsfiddle.net/fpnna/1/
And I am using apache as webserver, when turing on the
$locationProvider.html5mode(true);
then getting
uncaught TypeError: Object #<Ic> has no method 'html5mode' from testApp
When I am clicking to "Add new" the path changing to "/new" but getting error
404 The requested URL /new was not found on this server.
Any idea where I am doing wrong.
I went through the official manual, couldn't figure it out.
Thanks in advance.
You have a couple issues, first in jsfiddle you don't need the body tags plus you have multiple body tags. Also your fiddle has two ng-apps, the routes are defined incorrectly (should be /new for instance), invalid ng-view closing tag, there should only be one. You should include the javascript with No wrap in head and lastly it is html5Mode with a capital M on the mode and none of your partials exist at their urls nor are they defined as local scripts.
I would suggest you use plunkr as it allows you to add other local files, ie your partials which don't exist in the fiddle.
I've cleaned up all of the issues on this plunkr: http://plnkr.co/edit/A23Fxn9Ji02TGZ0jouZR?p=preview
angular.module('testApp', []).
config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true); // case is important
$routeProvider.
when("/", {
templateUrl: "list.html"
}).
when("/new", { // make sure and use absolute link to route
templateUrl: "edit.html"
})
})
function testCtrl($scope) {
$scope.persons = [{
name: "X"
}, {
name: "Y"
}, {
name: "Z"
}]
}
and the html:
<body ng-controller="testCtrl" >
<div class="main-nav"> Add Me
</div>INDEX
<div >
<div ng-view>
</div>
</div>
</body>
Please review the documentation and tutorials to learn the basics on setting up a project. http://docs.angularjs.org/guide/bootstrap