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
Related
ui-router and ngRoute at the same time
I'm working on a quite large project that uses very old angularjs (version 1.4.3) along with ui-router (version 0.2.15). Updating to newer version at the moment it's not possible.
The app use simple state-routing.
What I succesfully tried to achieve was to open a modal (ui.bootstrap) with a sub-routing within.
First I tried to use ui-router only, but the ui-router do not recognize ui-view inside modal template so it not worked.
After that I tried to use ui-router for normal navigation only and ngRoute for managing the routing inside the modal and it worked.
My question is if the use of both ui-router and ngRoute could cause side-effects or other hard-to-detect issues.
Here is a Plunker with a my test app.
Plunker
angular.module('router_app', ['ui.router', 'ui.bootstrap', 'ngRoute'])
.config(function ($stateProvider, $routeProvider) {
$stateProvider
.state('my_state', {
url: '/my_state',
views: {
'my_view': {
templateUrl: '/templates/my_state.tpl',
controller: 'ctrl_my_state'
}
}
});
$routeProvider
.when("/my_state/my_modal", {
templateUrl: "/templates/my_modal.tpl",
controller: "ctrl_my_modal"
})
.when("/my_state/my_modal/my_modal_a", {
templateUrl: "/templates/my_modal_a.tpl",
controller: "ctrl_my_modal_a"
})
.when("/my_state/my_modal/my_modal_b", {
templateUrl: "/templates/my_modal_b.tpl",
controller: "ctrl_my_modal_b"
});
})
.run(function ($state) {
$state.go("my_state");
})
my_modal.tpl
<div ng-controller="ctrl_my_modal">
MODAL
<button ng-click="closeModal()">close</button>
<button ng-click="gotoA()">goto a</button>
<button ng-click="gotoB()">goto b</button>
<div ng-view></div>
</div>
index.html
<html ng-app="router_app">
<body>
<div ui-view="my_view"></div>
</body>
</html>
I continued trying to not use two different routers at the same time and finally I came up with a working solution.
It is based on this. I was running around the solution for some time, but finally I've got it working as I wanted.
Here is my final test app.
I have the following controllers, and I want the template of the CategoryController to be shown on all pages (ie with all other views). the app displays all categories with this controller, when you click a category it shows all books in that category, then when you click a book it shows the books details. I want the categories to be always shown, can this be done ng-include?
app.config(function ($routeProvider) {
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.when('/books/:bookId', {
controller: 'BookController',
templateUrl: 'views/book.html'
})
.when('/categories', {
controller: 'CategoryController',
templateUrl: 'views/categories.html'
})
.when('/categories/:categoryId', {
controller: 'BookCategoryController',
templateUrl: 'views/booksincategory.html'
})
.otherwise({
redirectTo: '/books'
});
});
html
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
As #Hadi says, use angular-ui-router, or why not just place the controller directly over the view when it should be shown on every page, anyway?
<div class="main">
<div class="container">
<div ng-controller="CategoryController"></div>
<div ng-view></div>
</div>
</div>
I have some HTML which looks like this:
<body ng-controller="main">
<div id="main">
<div ng-view></div>
</div>
</body>
Here is the controller:
var app = angular.module('buildson', ['ngRoute', 'ngAnimate']);
app.controller('main', function($scope) {
$scope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
window.scrollTo(0, 0);
});
});
And here is the Routing:
//ROUTING
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'home.html'
})
.when('/courses', {
templateUrl : 'views/coursesTeaching.html'
});
});
Here is coursesTeaching.html
<div class="coursesList">
[Display a list of courses here]
Display Documentation
</div>
And here is documentationWidget.html
Documentation Content is in this file
What I want to do is when they click on this link Display Documentation It loads the documentationWidget.html content into the <div class="documentationWidget"></div> spot, I suppose it is a view within a view or a sub-route. I can't do it with jQuery Ajax or anything because I want to be able to use Angular variables inside of the loaded html file.
Take a look at ui-router as an alternative to ngRoute. This has good support for nested views amongst other things: https://github.com/angular-ui/ui-router
This has also been discussed in more detail here: Difference between ng-route & ui-router
I've been told you should use the third-party library ui-router for complex routing operations.
i have the problem that AngularJS refreshes full Page and not only the ng-view
my config:
myApp.config(function($httpProvider, $routeProvider) {
//ROUTE
$routeProvider.when('/', {
templateUrl : 'views/mainForm.html',
controller : 'TabController'
}).when('/login', {
templateUrl : 'views/loginForm.html',
controller : 'LoginController'
}).otherwise({
redirectTo : '/',
});
});
my index:
<body>
<!--NAVBAR -->
<navbarform></navbarform>
<!--Login oder MainView -->
<div class="container-fluid">
<div class="main">
<div ng-view></div>
</div>
</div>
If i click on my Navbar button: {{username}} its not opening the dropdown. its refresh the full page...
what i`m doing wrong?
First Check :-
Was ng-app set ?
Is the controller TabController loaded ?
Checked for other JS error in the page.
After that :-
Debug using Firebug & AngScope.
And even after this issue is not resolved create a JSfiddle and post the link here.
Hope this helps.
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="/" />