I'm using Ui-router and in severals $states I have a parameter as a Guid like the example bellow (":numeroSolicitacao"):
.state('solicitacoes/aprovacoes', {
url: '/solicitacoes/aprovacoes/:numeroSolicitacao',
views: {
'conteudo-view#': angularAMD.route({
templateUrl: 'js/app/visoes/solicitacoes/aprovacoes/aprovacoes.html',
controller: 'ctrlAprovacoes',
controllerUrl: 'controles/solicitacoes/aprovacoes/ctrlAprovacoes'
})
}
})
Is there a way for doing globally to remove all ":numeroSolicitacao" parameters from track event with angulartics ? Otherwise each hit on this $state will be a different page for Google Analytics
Note: I'm adding the "$analytics.pageTrack('/solicitacoes/aprovacoes');" in all controllers already, but as I said I need some globally implementation.
Related
I am in trouble with a specific requirement here for our Application.
We a are setting-up an angular application inside a pre-existent Rails Application.
As a full refactor of our code-base is currently out-of-the-question we are dealing with some hard customization and hackings on both sides to allow a incremental introduction of Angular.
What we need for now is a way to tell the ui-router to bind only to the links we have the ng-sref attribute and do not bother with all the regular href links within our app.
Is there a way to achieve this behavior ?
Below is my current code:
angular.module('app').config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state('test', {
url: "/1/test",
template: 'test'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: false
})
}
)
With this approach, all links, even those ones without any route setup for it, and without a ui-sref attribute, are being watched by angular routing service and prevented to work like it`s previous behaviour. I do not want to add every route of our huge app to the angular routing setup (this is a terrible idea) because most of theses links are to non-angular pages. I just want angular routing service to ignore this links, or these locations that are not defined. Maybe a setting for the $location service to let those guys fallow along with its previous behaviour (ajax requests, regular requests, or Turbolinks requests). I am pretty sure this is something really trivial that I might be missing the point.
What happens when I click on theses links is that the window location changes, but nothing happen. The browser request is not triggered.
Thank you very much in advance.
###################################################################################
# My suggestion is use the ui-router to route to specific pages as shown
# in the example below.
# <a ui-sref="/login">
# <a ui-sref="/logout">
# <a ui-sref="/signup">
# <a ui-sref="/profile">
# 'ui-sref' will take you to the specific pages.
# You can also use '$state.go' to take you to specific pages as shown below.
# $state.go('authentication.login');
# $state.go('authentication.logout');
# $state.go('authentication.signup');
# $state.go('authentication.profile');
###################################################################################
(function() {
'use strict';
angular
.module('app.foo.authentication')
.config(moduleConfig);
/* #ngInject */
function moduleConfig($translatePartialLoaderProvider, $stateProvider) {
$translatePartialLoaderProvider.addPart('app/foo/authentication');
$stateProvider
.state('authentication.login', {
url: '/login',
templateUrl: 'app/foo/authentication/login/login.tmpl.html',
controller: 'LoginController',
controllerAs: 'vm'
})
.state('authentication.logout', {
url: '/logout',
templateUrl: 'app/foo/authentication/logout/logout.tmpl.html',
controller: 'LogoutController',
controllerAs: 'vm'
})
.state('authentication.signup', {
url: '/signup',
templateUrl: 'app/foo/authentication/signup/signup.tmpl.html',
controller: 'SignupController',
controllerAs: 'vm'
})
.state('authentication.profile', {
url: '/profile',
templateUrl: 'app/foo/authentication/profile/profile.tmpl.html',
controller: 'ProfileController',
controllerAs: 'vm'
});
}
})();
My project was built on PHP and has some pages on Angular JS. There are three types of accounts in system. Authorization system is based on PHP/Mysql.
For each account I have personal.html template. When user is logged via account(1) I need to show him template /public/html/personal.html from route, if account(2) - template /public/html/personal2.html .etc. So, path /profile/personal/:type is the same for each.
How I can manage this accounts pages with a good level of security?
I use routeProvider:
$routeProvider
.when('/profile/personal/:type', {
templateUrl: '/public/html/personal.html',
controller: 'ProfileController'
})
You can use a function as templateUrl parameter and use it to select the template for the current account type:
$routeProvider
.when('/profile/personal/:type', {
templateUrl: function(params) {
switch(params.type) {
case 1:
return: '/public/html/personal1.html';
}
},
controller: 'ProfileController'
});
I'm trying to configure my AngularJS app with optional route parameter.
The URLs that I need to support may have a locale at the beginning. e.g.
/fr-FR/Welcome
/Welcome
I tried the following
$routeProvider.when('/:locale?/Welcome', {
...
})
However, it seems, it satisfies the "/fr-FR/Welcome" case and not the "/Welcome" case.
Is it because I'm always prepending a "/" in the beginning.
Will the following work?
$routeProvider.when('/:locale/?Welcome', {
...
})
https://docs.angularjs.org/api/ngRoute/service/$route#example
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
Also you can use for multiple language support like this tutorials
https://scotch.io/tutorials/internationalization-of-angularjs-applications
It is not possible in Angular.
remember /:locale is not optional. it is route parameter which means its value could be different but it should be there to execute that route (controller and template).
like
/fr/Welcome
/en/Welcome
fr and en must be there which help angular to select that route.
I have a SPA that will display data from an API in two separate parts of the page. One section displays products and prices. This information will remain on the page. The other section is a basic CRUD view. It allows the user to create new selections, read their selections, edit their selections, and remove their selections. I'm trying to determine the best way to display these two views. The CRUD section uses ng-view. Should the price/product section use a directive, a separate controller, or should I break up the page into two modules?
I'm new to Angular, and want to make sure that I do things right to avoid unforeseen issues down the road.
HTML:
<div ng-view="">
<!--user selections go here -->
</div>
<!--Product/Price info will go here. Unsure whether to insert ng-app="new module", ng-controller="new controller", or a directive with its own element-->
Javascript for user selections view:
myApp.config(function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/list.html',
controller: 'ProjectListCtrl as projectList'
})
.when('/edit/:projectId', {
templateUrl: 'views/detail.html',
controller: 'EditProjectCtrl as editProject'
})
.when('/new', {
templateUrl: 'views/detail.html',
controller: 'NewProjectCtrl as editProject'
})
.otherwise({
redirectTo: '/'
});
});
Factory for CRUD / user form section:
myApp.factory('Projects', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL+'/projects')).$asArray();
});
Factory for product list/price section:
myApp.factory('Products', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL + '/products')).$asArray();
});
The native Angular router is limited when creating complex and nested UIs, but AngularUI Router is a great alternative and very widely used. If you want to include multiple views in your interface then this is the way to go. It's not much more complicated than the native router but the wins are huge.
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
Here's a Plunker to demo your particular case: http://plnkr.co/edit/xZD47L?p=preview
With ui-router you can name views
<div ui-view="viewName"></div>
and include templates and controllers in the corresponding ui-router configuration
myApp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home',{
url: "/",
// list your views
views: {
"viewName": {
templateUrl: "viewName.html" ,
controller: "viewNameCtrl"
}
}
})
});
Checkout this Wiki for Multiple Named Views.
I hope this helps.
My angular application has multiple pages which users can visit and I would like to hide all other urls and only show users the base url. So imagine my base url is: www.example.com and I have other pages like About, Contact Us etc. Currently, when the user clicks on About, the url changes to www.example.com/about. Is it possible for angular not to add the "/about"? Is this possible using angular js? Also, I have been searching for solutions and have experimented with ui-router.js, is it also possible with this module?
If you are using ui-router, then you can define states without specifying urls like
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "state1.html",
controller: 'Controller3'
})
.state('state2', {
templateUrl: "state2.html",
controller: 'Controller2'
})
.state('state3', {
templateUrl: "state3.html",
controller: 'Controller3'
})
});
So by default the url will be /state1. And you can implement navigation by using ui-sref directive in your template like ui-sref="state2" or using $state service in your controller like $state.go('state2').