I have the following Index.html file (I put div with ng-view as well):
<ul ng-controller="myController">
<li>
Do it!
</li>
</ul>
routes config:
$routeProvider.when('/doit', {
templateUrl: 'partials/doit.html'
controller: 'myController'
});
$routeProvider.otherwise({
redirectTo: 'index.html'
});
Controller:
app.controller('myController', ['$scope', '$location', function ($scope, $location) {
$scope.name = "name";
alert($scope.name);
$location.path("/");
}]);
The weird thig is that after I click on the Do it! link, it goes to http://localhost:3000/#/doit.html (the code of myController executes after the click, I see the alert pop-up), and then I go back to http://localhost:3000/#/index.html (this is what I want, I put $location.path("/") in the controller.
However, this time, for some reason, the controller code doesn't execute. It only runs after I refresh the page, even though it is assigned to the unordered list. Could anyone help please?
Your routes config should be something like:
$routeProvider.
when('/', {
templateUrl: '/index.html',
controller: 'homeCtrl'
}).
when('/doit', {
templateUrl: 'partials/doit.html',
controller: 'myController'
}).
otherwise({
redirectTo: '/'
});
and you do not need to specify controller name at two places i.e. in the partial and in your route config, specifying at the config level should be sufficient.
The doit view should be the one which is loaded in the ng-view tag as it is a state of your application.
Related
This is my app.js
var mainApp = angular.module("myapp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/search/login.html'
}).
when('/dashboard', {
templateUrl: 'admin/index.html'
}).
otherwise({
redirectTo: '/'
});
}]);
mainApp.controller('logincntrl',function($scope,$location){
$scope.submit=function(){
var uname=$scope.username;
var upass=$scope.password;
if($scope.username=="admin" && $scope.password=="admin"){
$location.path('/dashboard');
}
};
});`
After clicking on submit.It will redirect to dashboad..That is seperate folder with index.But as i have given view on the first page ..my dashboard contain coming on the first page even with styling..how to make seperate view for dashboard page
You can use <ng-view><ng-view> to have load different
partials. You can have a look into this to have an ideahttp://codepen.io/dhanrajjay/pen/dOjmxL/
Am creating a simple angularjs application with ng-route, the index.html page have a bootstrap carousel which have next and previous button when click on that button am being navigated to the next Html page below is my plunkr link as well as my script.js file please do corrections if am wrong, I have searched a lot but didn't find a proper solutions for this issue
Working Link
var appname = angular.module('appname', ['ngRoute', 'ngAnimate']);
appname.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'indexView.html',
controller: 'indexController'
}).
when('/about', {
templateUrl: 'about.html',
}).
when('/contact', {
templateUrl: 'contact.html',
}).
otherwise({
redirectTo: '/'
});
}]).controller('MainCtrl', function($scope, $location) {
$scope.isIndexPage = function() {
return $location.path() === '/';
}
});
Check this, everything works nicely now.
http://plnkr.co/edit/JcInw9ZUz6vfFO5InV7N?p=preview
Rewrote the MainCtrl part, before the MainCtrl was created once and never updated, but now it listens to route change and hides the carousel accordingly.
$scope.$on('$routeChangeSuccess', function () {
$scope.isIndexPage = $location.path() === '/';
});
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/success', {
templateUrl: 'success.html',
controller: 'sucCtrl'
}).
otherwise({
redirectTo: '/index'
})
}])
app.controller('validateCtrl', function($scope, $http, $location) {
$scope.submit = function(user,password) {
//for local storage validation
$http.get('credentials.json').then(function(response) {
$scope.credentials = response.data;
if((user === $scope.credentials.username) && (password === $scope.credentials.password)){
alert("ok");
$location.path('/success');
}
else{
alert("nit "); }
});
};
})
app.controller('sucCtrl',['$scope', function($scope) {
alert("succs");
}]);
This might be well a beginner question. I am trying to validate my login form and redirect to success.html on success. But I am unable to navigate to next page. I tried using $location.path('/success').
here is the working sample in plunker..
http://plnkr.co/edit/0v7njznHdtwgpaG2NfwA?p=preview
You missed to write ng-view directive to get route changes to displayed on the view. Also you are messed up with the structuring of your page html. Refer below comments that will help you to make it working and improve it.
You should put that ng-view directive in body so that all the view will get loaded on basis of route changes.
Also you should load your form html from the route only, I'd suggest you to add one more route to your config that will say on /login show the form.html(login form)
Config
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/success', {
templateUrl: 'success.html',
controller: 'sucCtrl'
})
.when('/login', {
templateUrl: 'form.html',
controller: 'validateCtrl'
}).
otherwise({
redirectTo: '/login'
})
}])
Markup
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src="login.controller.js"></script>
</body>
Your success.html should be partial, it shouldn't have the script references again to it they have been loaded from the index page only
success.html
<div>
Success Message
</div>
Working Demo
I have problem with below code. When I go to main controller url #/, Angular naturally calls main controller - it execute AJAX request. Problem is, that when I click #/some-url, and then #/ url again, this AJAX request is executed again, which is not desired and unnecessary due to performance. I thought controllers are called only once, but it doesn't look like this is the case, at least with ngRoute.
angular.module('robotsApp', ['ngRoute', 'controllers'])
.config(['$routeProvider', function($routeProvider){
var root = '/static/js/partials/';
$routeProvider.
when('/', {
templateUrl: root + 'main.html',
controller: 'main as main'
}).
when('/some-url', {
templateUrl: root + 'some_template.html',
controller: 'someController'
}).
otherwise({
redirectTo: '/'
});
}]);
angular.module('controllers', [])
.controller('main', ['$http', function($http){
$http.get('/user/recent-gain-loss').success(function(data){
this.recent_gain_loss = data;
}.bind(this));
}]);
<p>{{ main.recent_gain_loss }}</p>
Save the data in to a value and then check if the data are already set.
angular.module('values', [])
.value('recentGainLoss', {})
angular.module('controllers', ['values'])
.controller('main', ['$http', 'recentGainLoss', function($http, recentGainLoss){
if (Object.keys(recentGainLoss).length < 1) {
$http.get('/user/recent-gain-loss').success(function(data){
recentGainLoss = angular.extend(recentGainLoss, data);
});
}
this.recent_gain_loss = recentGainLoss;
}]);
I have the following code in my app.js:
var myApp = angular.module('myApp', ['ngRoute'])
myApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).
otherwise({
templateUrl: '/angularjs/public/angular/views/home.html'
});
$locationProvider.html5Mode(true);
}]);
When I go to home at http://localhost/angularjs/public, the .otherwise kicks in correctly.
If I go to http://localhost/angularjs/public/products, nothing happens, or more precisely, I believe .otherwise is invoked again, since is displayed the home.html view. Also no error is throwed in batarang's console.
What could be the problem?
you need to add "public" to product slug in your route
when('public/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).