I have controller with method that does AJAX request:
.controller('EditProfileController', ['$scope', '$http') {
// Do AJAX query here
// Some methods for update profile
}]);
Also I have $routeProvider in this Angular JS file:
.config(function ($routeProvider) {
$routeProvider
.when('/profile/personal/:type', {
templateUrl: '/personal.html',
controller: 'EditProfileController'
})
}
Problem is that when I open page with URL /profile/personal/:type it calls again controller EditProfileController and calls AJAX method inside.
How I can fix it?
HTML code:
<div ng-controller="EditProfileController">
<!-- Here are loaded data from AJAX response
</div>
Solution:
Problem was in double ng-view in template:
<div ng-show="isLoaded" ng-view></div>
<div ng-show="!AILoading" ng-view></div>
Simply remove the ng-controller directive from the HTML as the router is already taking care of this
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 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 am currently creating an app that has a nav bar. I want a particular function to be invoked every time the submit button in the nav bar is pressed regardless of route/view. I am having trouble because here in my routes file I have created associations that changed based on route. The form is found in <form class="pure-form" ng-submit="somefunc()">
routes.js
angular.module('LiveAPP', ['ngRoute',
'LiveAPP.main',
'LiveAPP.signUp',
'LiveAPP.artist'])
.config(function($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl : '/home.html',
controller : 'mainCtrl'
})
.when('/signup',{
templateUrl : '/signup.html',
controller : 'signUpCtrl'
})
.when('/artist',{
templateUrl : '/artistpage.html',
controller : 'artistCtrl'
})
})
index.html
<body ng-app='LiveAPP'>
<div class="header">
<form class="pure-form" ng-submit="somefunc(field)">
<input ng-model="field" type="text" placeholder="Artist" name="field">
<button type="submit">Search</button>
</form>
Sign Up
artistPage
</div>
<div ng-view></div>
</body>
mainCtrl
angular.module('LiveAPP.main',[])
.controller('mainCtrl', ['$scope','$http', '$location',mainCtrl]);
function mainCtrl($scope,$http,$location){
$scope.somefunc = function(searchvalue){
console.log(searchvalue)
}
};
Right now the submit button is associated with the mainCtrl which is related to the home.html. Any ideas?
In general you have a couple approaches:
If you need some logic to be available in more than one controller you can create a service and inject it to your controllers.
You can implement controller inheritance.
There are a couple ways to implement controller inheritance.
This is one example of how to do that:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function() {
this.methodclick=function(){
alert('I am Parents')
}
});
app.controller('ChildCtrl', function($controller) {
var ChildCtrl=this;
ChildCtrl.child = $controller('MainCtrl',{});
});
But in my opinion it is better to implement a service.
I'm new to angular and following this tutorial:
https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router
but i'm injecting this module into another existing module.
However, I keep getting a "could not resolve states" error - I'm not sure why but suspect its either a routes issue and I'm being dumb, or otherwise its a nested views issue (note nesting of ui-view in index.html, and again in home.html).
using angular ui version 0.2.13
angular version 1.3.14
Please help!!
Below is the relevant code:
structure:
home.html
<div id="form-container">
<div class="page-header text-center">
<h2>Let's Be Friends</h2>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
<a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
</div>
<!-- show our formData as it is being typed -->
<pre>
{{ formData }}
</pre>
index.html
<body> blah blah
<div ui-view></div>
<script src="app.js"></script>
<script src="javascripts/form.js"></script>
<script src="controllers/main.js"></script>
<script src="controllers/form-controller.js"></script>
</body
app.js
angular.module('MyApp', ['ngCookies','ngResource', 'ngMessages', 'mgcrea.ngStrap', 'formApp'])
.config(['$locationProvider', '$stateProvider', function($locationProvider, $stateProvider){
$locationProvider.html5Mode(true);
console.log($stateProvider);
}]);
form.js
angular.module('formApp', ['ngAnimate', 'ui.router'])
// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('.profile', {
url: '/profile',
templateUrl: 'views/form-profile.html'
})
// url will be /form/interests
.state('.interests', {
url: '/interests',
templateUrl: 'views/form-interests.html'
})
// url will be /form/payment
.state('.payment', {
url: '/payment',
templateUrl: 'views/form-payment.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/');
})
form-controller.js
// our controller for the form
// =============================================================================
angular.module('formApp')
.controller('formController', ['$scope', function($scope) {
// we will store all of our form data in this object
$scope.formData = {};
// function to process the form
$scope.processForm = function() {
alert('awesome!');
};
}]);
Your code is not following the tutorial exactly. Note that for child states to function, they must reference their parent state.
In the tutorial code:
.state('form.profile', {
In your code:
.state('.profile', {
If you change your child states to reference the parent, they will function correctly. i.e.
.state('home.profile', {