AngularJS add Action to Controller - javascript

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

ng-route doesn't work with other modules

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>

wants to redirect to home page in angular js if user type wrong path and show correct URL

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.';
}]);

Progress bar with ngRoute in angularjs

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/

Open new view in new tab/window

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');
};

How to pass URL parameters through templateUrl in AngularJS?

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;
}]);

Categories

Resources