I've been using other MVC Frameworks but I'm new to AngularJS and have ran into an issue. I have a controller called "Projects" and the route is /projects but I want to be able to do /projects/java where i would call a new page template/view and display that content.
How would I do this in AngularJS? Is there a way to create actions for projects or would I have to do something else?
angular
.module('konradApp', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
title : 'Welcome',
templateUrl : 'views/main.html',
controller : 'MainCtrl',
controllerAs : 'main'
})
.when('/about', {
title : 'About',
templateUrl : 'views/about.html',
controller : 'AboutCtrl',
controllerAs : 'about'
})
.when('/projects', {
title : 'Projects',
templateUrl : 'views/projects.html',
controller : 'ProjectsCtrl',
controllerAs : 'projects'
})
.when('/contact', {
title : 'Contact',
templateUrl : 'views/contact.html',
controller : 'ContactCtrl',
controllerAs : 'contact'
})
.otherwise({
redirectTo : '/'
});
});
Controller:
angular.module('konradApp')
.controller('ProjectsCtrl', function () {
});
You'll want to do this using something called $routeParams which will allow you to code out your views. As a result your route configuration becomes:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
title : 'Welcome',
templateUrl : 'views/main.html',
controller : 'MainCtrl',
})
.when('/:view', {
title : function($routeParams){return $routeParams.view},
templateUrl : function(params){return 'views/'+params.view+'.html'},
controller : function($routeParams){return $routeParams.view+'Ctrl'},
})
.otherwise({
redirectTo : '/'
});
});
What you're after is a way to add nested views. Refer to the ui-router docs on how to do that: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
The idea is to add a nested ui-view in your projects.html and add a child route for your sub-view.
Related
I have the following code
var balaitus = angular.module("balaitus", ["ngRoute"]);
// configure our routes
balaitus.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
.when('/home_usuario', {
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
})
// route for the about page
.when('/estadisticas', {
templateUrl : 'estadisticas.html',
controller : 'estadisticasCtrl'
})
// route for the contact page
.when('/hashtags', {
templateUrl : 'hashtags.html',
controller : 'hashtagsCtrl'
})
.otherwise({
templateUrl : 'home_usuario2.html',
controller : 'usuarioCtrl'
});
});
// create the controller and inject Angular's $scope
balaitus.controller('usuarioCtrl', function($scope) {
// create a message to display in our view
$scope.message = 'Hi! This is the home page.';
});
balaitus.controller('estadisticasCtrl', function($scope) {
$scope.message = 'Hi! This is the estadisticas page.';
});
balaitus.controller('hashtagsCtrl', function($scope) {
$scope.message = 'Would you like to contact us?';
});
The code simply routes different pages, and set the corresponding controller. It works fine, but when I add another angular module between [ ], for example ngFileUpload or ui.bootstrap.demo, ng-route doesn't work, ¿but why?
you should add it in the constructor, like:
var balaitus=angular.module("balaitus", ['webix', 'ngRoute','ui.router']);
balaitus.config(['$stateProvider', '$urlRouterProvider', '$routeProvider', '$locationProvider', '$qProvider', function ($stateProvider, $urlRouterProvider, $routeProvider, $locationProvider, $qProvider) {
$routeProvider ....
and of course include the js files in ur html code
<script src="Scripts/angular-route.js"></script>
If we edit the URL forcefully the web page shows the same content with different URL.
For example http://www.example.com/# and http://www.example.com/#/abc serves same content.
Wants to Redirect edited URL on Home page every time show correct path in URL.
.state('system.confirmation', {
url: '/confirmation',
templateUrl: 'tpls/views/system/confirmation/confirmation.html',
controller: 'ConfirmationController',
controllerAs:'confirmationController',
}
What you're looking for is the otherswise() function. Try adding this in your config function:
$urlRouterProvider.otherwise('/')
This will make sure that all uncaught routes will be redirected to your base URL.
$rootScope.$on('$routeChangeStart', function (event, next, last) {
console.log(event, next, last)// get all info, about current controller
$scope.someFunction();
});
You can do everything with this, before change any routes, this function will call, there you can check for something you are talking about.
try this
App.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/index', {
templateUrl : 'views/site/index.html',
controller : 'indexController'
})
// route for the about page
.when('/about', {
templateUrl : 'views/site/about.html',
controller : 'aboutController'
})
.when('/404', {
templateUrl : 'views/site/404.html',
controller : '404Controller'
})
.when('/signup', {
templateUrl : 'views/site/signup.html',
controller : 'signupController'
})
.when('/forgotPass', {
templateUrl : 'views/site/forgotPassword.html',
controller : 'forgotPassController'
})
.when('/login', {
templateUrl : 'views/site/login.html',
controller : 'loginController'
}).otherwise({
redirectTo: '/404'
});;
});
App.controller('404Controller',['$scope', function($scope) {
$scope.message = 'Page not found 404.';
}]);
Hi currently i am using ngRoute to fetch template from backend. but because of the size of template, it freezes till the template is loaded. What i want is a progress bar that shows the status of template as it is downloading .
I have found that ngProgress might be something that i want but i have not been able to integrate the same. Here is a small snippet for the ngRoute
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : '/templates/home.html',
controller : 'landing'
})
.when('/login', {
templateUrl : '/templates/login.html',
controller : 'authCtl'
})
.when('/signup', {
templateUrl : '/templates/signup.html',
controller : 'authCtl'
})
.otherwise({
templateUrl : '/templates/404.html',
controller : 'mainController'
});
$locationProvider.html5Mode(true);
});
Have you tried angular-loading-bar?
https://chieffancypants.github.io/angular-loading-bar/
I'm trying to handle the 'wheel click' and 'right-click > open in new tab/window' in order to load the targeted view in the new tab/window.
Let's say in one of my view, I have something like this :
<li>Time Tracking</li>
<li>Dashboard</li>
The changeView() function in my controller looks like this :
this.changeView = function(viewPath) {
$location.path(viewPath);
};
And the route configuration like this :
// Routes configuration
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'requests/requestsList.html',
controller: 'requestsController',
controllerAs: 'r'
})
.when('/requests', {
templateUrl: 'requests/requestsList.html',
controller: 'requestsController',
controllerAs: 'r'
})
.when('/projects', {
templateUrl: 'projects/projectsList.html',
controller: 'projectsController',
controllerAs: 'p'
})
.otherwise({
redirectTo: '/'
});
}]);
How could I handle the displaying of a new view in a different tab/window ?
Also, is there a syntax in my $routeProvider that allows me to combine the / and /requests in the same when(...) ?
Simple HTMl will help you there. Add in your HTML code a target="_blank"
Try using $window service:
this.changeView = function(viewPath) {
$window.open(viewPath, '_blank');
};
Trying to learn AngulareJS got stuck with this.
This is the code :
app.config(function ($routeProvider){
$routeProvider
.when('/',
{
templateUrl: '/sort',
controller : 'tasksController'
})
.when('/expression/:expressionId/type/:typeId',
{
templateUrl: '/sort/'+:expressionId +'/'+ :typeId,
controller : 'tasksController'
})});
This is obviously wrong.
Can any one please tell me what is the correct way to do this? Thanks.
Thanks guys,this is what I wanted
.when('/expression/:expressionId/type/:typeId', {
templateUrl: function(params) {
return '/sort/' + params.expressionId +'/'+ params.typeId ;
},
controller: 'tasksController'
});
Probably you are looking for $routeparams
https://docs.angularjs.org/api/ngRoute/service/$routeParams.
you can do something like below:
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: '/sort',
controller : 'tasksController'
})
.when('/expression/:expressionId/type/:typeId', {
templateUrl: '/sort',
controller : 'tasksController'
})
});
app.controller('tasksController', ['$scope', '$routeparams', function($scope, $routeparams) {
var expressionId = $routeparams.expressionId
, typeId = $routeparams.typeId;
}]);