I'm setting up a very simple AngularJS application and am running into a minor, yet frustrating, issue. Here is the sample application using $routeProvider:
angular.module('thought', [], function($routeProvider, $locationProvider) {
$routeProvider.
when('/thought', {
templateUrl: 'partials/thought/posts.html',
controller: ThoughtCntl
}).
when('/thought/edit/:id', {
templateUrl: 'partials/thought/edit.html',
controller: EditCntl
}).otherwise({
redirectTo: '/thought'
});
$locationProvider.html5Mode(true);
});
Here is the content of posts.html:
<div>
<button>Create</button>
<div>
<h3>Posts</h3>
<ul>
<li ng-repeat="post in publishedPosts">
{{post.title}}
</li>
</ul>
</div>
</div>
When I navigate to /thought, posts.html loads with the appropriate data content. The the link contains 'href=localhost:8080/thought/edit/1234' as it should. However, when I click the link, it attempts to load the template from 'localhost:8080/thought/edit/partials/thought/edit.html'. The templateUrl path is appended to the href path. I'm sure that something simple is mis-configured, but I can't find it. Any ideas what I should look at?
Thanks!
Use the <base> tag :
<base href="/" />
Related
This is the link for the hotels
<ul>
<li ng-repeat="hotel in vm.hotels">
<a ng-href="#/hotel/{{ hotel._id }}">{{ hotel.name }}</a>
</li>
</ul>
and the route is this
angular.module('myApp', ['ngRoute']).config(config);
function config($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'angular-app/hotel-list/hotels.html',
controller: HotelsController,
controllerAs: 'vm'
})
.when('/hotel/:id', {
templateUrl: 'angular-app/hotel-display/hotel.html',
controller: HotelController,
controllerAs: 'vm'
});
}
there is no error in the console, I have put <div ng-view></div> in the correct place
but it is not giving what I wanted. Any corrections please?Thank you!
With AngularJS V1.6, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c
<ul>
<li ng-repeat="hotel in vm.hotels">
̶<̶a̶ ̶n̶g̶-̶h̶r̶e̶f̶=̶"̶#̶/̶h̶o̶t̶e̶l̶/̶{̶{̶ ̶h̶o̶t̶e̶l̶.̶_̶i̶d̶ ̶}̶}̶"̶>̶{̶{̶ ̶h̶o̶t̶e̶l̶.̶n̶a̶m̶e̶ ̶}̶}̶<̶/̶a̶>̶
<a ng-href="#!/hotel/{{ hotel._id }}">{{ hotel.name }}</a>
</li>
</ul>
For more information, see AngularJS Developer Guide - Migrating to V1.6 - $location
i am just starting with angular and i have a problem,
I am using ng-view with route to make an SPA,
then i have my controler
App.config(function ($routeProvider) {
$routeProvider.
when('/Home', {
templateUrl: '/Templates/Home.html',
controller: 'HomeController'
}).(...) otherwise({
templateUrl: '/Templates/Home.html',
controller: 'HomeController'
});
});
Everything was ok and the SPA worked like a charm, until i created a new template
/template/XPTO.html
that contained an NG repeater with multiple includes:
<div class="content" ng-switch on="control.CONTROL_TYPE">
<div ng-switch-when="MAIN_PANEL_TITLE">
<div ng-include="'/HomeControls/Title.html'" ng-controller="HomeControlsController"
onload="InstanceId = control.ID; LoadTitle(InstanceId)">
</div>
</div>
<div ng-switch-when="FULL_PANEL_NEWS">
<div ng-include="'/HomeControls/FullPageNews.html'" ng-controller="HomeControlsController"
onload="InstanceId = control.ID; LoadFullNews(InstanceId)">
</div>
</div>
</div>
After this any time i go to the XPTO page the browser breaks, but works ok with all other pages... any ideia what it migth be? i assume its a problem with route against nested ng-view / ng-template
Thanks
view / ui router solved the problem
thanks every one
I'm developing on http://localhost:3000/af2015/web/ (the extra directories will not be present on the production site) and using wordpress. My Angular app is on the /recommendations page, which includes this template:
<div ng-app="af2015App">
<div ng-controller="MapCtrl as vm">
<map center="[52.374, 4.899]" zoom="12">
</map>
</div>
<section>
<div ui-view>
</div>
</section>
</div>
The ui-view template is not being loaded, nor the controller being initialised. This is my config function, and I have tried all sorts of permutations of <base href="/af2015/web" /> tag. There are no errors in my console.
angular.module('af2015App')
.config(function($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider.state('list', {
//url: '/:alpha/:beta/:gamma',
url: '/recommendations',
template: '<h2>List</h2>',
controller: "ListController",
controllerAs: 'list'
});
});
Didn't try enough permutations. This one worked:
<base href="/af2015/web/recommendations/" />
And then
$stateProvider.state('list', {
url: '/',
I'm using Angular ui route and I'm trying to pass query parameters but it doesn't work. I have followed the official wiki.
In the view I have the following code very simple
<div ng-controller="MainController">
<a ng-href="#/foo/bar?param={{make}}"><li>{{make}}</li></a>
</div>
and this is the config
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state('foo', {
url: '/foo',
templateUrl: '/partials/foo.html',
controller: 'MainController'
})
.state('foo.bar', {
url: '/bar?param',
templateUrl: 'partials/foo.bar.html',
controller: 'SecondaryController'
});
}
but when I click on the link in the view the url I get it is what I get but the route doesn't receive the request.
Use ui-sref directive to generate href link
Markup
<div ng-controller="MainController">
<a ui-sref="foo.bar({param: make})"><li>{{make}}</li></a>
</div>
I'm using AngularUI Router and I'm trying to have nested/children links.
All works fine but how do I have selected/active link in Contact tab?
Basically, I need to be able to have selected/active contact one link when the Contact page is loaded. Currently it does not read for some reason the controlleroneCtrl unless I click on the link contact one.
angular
.module ('myApp', ['ui.router'
])
.config (['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise ('/summary');
$stateProvider.
state ('summary', {
url: '/summary',
templateUrl: 'summary.html',
controller: 'summaryCtrl'
}).
state ('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'aboutCtrl'
}).
state ('contact', {
url: '/contact',
templateUrl: 'contact.html',
controller: 'contactoneCtrl'
})
// Sub page
.state('contact.one',{
url: '/contact.contactone',
templateUrl: 'one.html',
controller: 'contactoneCtrl'
})
// Sub page
.state('contact.two',{
url: '/contact.contacttwo',
templateUrl: 'two.html',
controller: 'contacttwoCtrl'
});
}]);
Plunker: http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview
There's a much quicker way to do this. Just use the ui-sref-active="active" attribute instead of ui-sref.
An example:
<ul>
<li ui-sref-active="active">
<a ui-sref="state">State 1</a>
<li>
<ul>
When the state is active the list item gets the class active. If you want a different class for active states or more than one class, just add it as follows
<ul>
<li ui-sref-active="active so-active super-active">
<a ui-sref="state">State 1</a>
<li>
<ul>
I use the pattern of exposing state on the root scope and using state.current.name in templates. I justify this global exposure because it's an app-level concern. If your navigation directive has isolate scope you'll need to pass it in, but that's no biggie.
In practice it's been very good for us I think.
Looks like this:
javascript
app = angular.module ('myApp', ['ui.router']);
app.controller('MainController', function($scope, $state){
$scope.state = $state;
});
html:
<nav>
<ul>
<li ng-repeat="tab in tabs" ng-class="{active: state.current.name === tab.id}>{{tab.name}}</li>
</ul>
</nav>
here is the updated plunk - http://plnkr.co/edit/UjjNm4JJIsjb4ydWZRDi?p=preview
Changes
added a new controller contactCtrl
setup $state.go('contact.contactone'); inside the contactCtrl
updated app.js so that /contact points to contactCtrl
I'm using ng-class like this:
ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"
My "state" name is structured like:
app
app.homepage
app.profile
app.profile.user
.etc
For example, in my homepage, it's button became like this:
<li ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"><a ui-sref="app.homepage">Home</a></li>
So just define scope of $state like #Simple As Could Be said at root of the app controllers, and you can use ng-class to whatever your app's state and how deep your app's state nested.
See my plunk http://embed.plnkr.co/bRfl1S9KXQuvL0Bvt9jD/preview.
Also try updating the version of ui-router to 0.2.12.
Only client tab as really been implemented.