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.
Related
Hi I have created a angularjs+webix project wherein I will be adding CRUD operations.
I have a app.js file where I put the routing:
var app = angular.module('app', [ "webix", "ui.router" ]);
app.config(function($stateProvider) {
$stateProvider
.state("/create", {
templateUrl : "/app/views/CreateTemplate.html",
controller : 'CreateController'
})
.state("/update", {
templateUrl : "/app/views/UpdateTemplate.html",
controller : 'UpdateController'
})
.state("/delete", {
templateUrl : "/app/views/DeleteTemplate.html",
controller : 'DeleteController'
})
});
My index.html file below:
<body ng-app="app">
<div class="container">
<div class="sidenav">
<a ui-sref="create">Create</a>
<a ui-sref="update">Update</a>
<a ui-sref="delete">Delete</a>
</div>
</div>
</body>
My index file contains a navbar. Whenever I click on either Create or Update it should show that particular view i.e. If I click on Create It should load Create view. But in doing so I am unsuccessful.
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 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.
Following this plunker: http://plnkr.co/edit/33572YOSA2s89uEiLmKB?p=preview
I've managed to load into bootstrap modal partial content based on route:
Route defined as follows:
.when('/profile', {
templateUrl: 'modalContainer',
})
Controller hooked up:
myApp.controller('DashboardModal', function($scope, $modal) {
$modal.open({
templateUrl : 'Partials/Dashboard.html',
controller: 'DashboardController',
});
});
Finally in html:
<div>
Click here to open modal!
</div>
<script type="text/ng-template" id="modalContainer">
<div ng-controller="DashboardModal"></div>
</script>
My Problem is that the route of the opener window changes when modal opens.
The code is working exactly as designed. What the <a href="#/profile"> tag is doing is making a call to the $routeProvider with the path '/profile'. Looking in the script.js, you can see this is a new view which is set up to look like a modal in the HTML. You are navigating to a new view, not opening a modal.
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="/" />