Develop Reference

How I can run two controllers via two routing?

I have two modules, where two routes:
angular
.module('lang', ['ngRoute'])
.config('lang', ['$routeProvider', config])
.controller('lang', lang);
function config(route){
route.when('/:lang/:page', {
template : '',
controller : lang
})
}
and route for guide module:
angular
.module('guide', ['ngRoute'])
.config('guide', ['$routeProvider', config])
.controller('guide', guide);
function config(route){
route.when('/:lang/guide', {
template : '/view/guide.html',
controller : guide
})
}
But the second controller not run. How can I run two controllers using two routes?

ng-route using for SPA applications.
If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
Therefore you need to define main module, config routes there and inject dependencies. Example:
var app = angular.module('app',['ngRoute', 'firstModule', 'secondModule']);
var configFunction = function($routeProvider){
$routeProvider
.when('/:lang/:page', {
templateUrl: '/view/guide.html',
controller : 'FirstCtrl'
})
.when('/:lang/guide', {
templateUrl: '/view/guide2.html',
controller: 'SecondCtrl'
})
configFunction.$inject = ['$routeProvider'];
app.config(configFunction);
app.config(['$locationProvider',
function ($locationProvider) {
$locationProvider.hashPrefix('');
}]);
And this is your injected controllers :
var app = angular.module('firstModule', []);
app.controller('FirstCtrl',function(){});
var app = angular.module('secondModule', []);
app.controller('SecondCtrl',function(){});
Be aware regarding syntax. Check syntax for Angular version you use.

$route depend on the current URL ($location)

in my angularJS app I use symfony as rest API.
Depending on my current url I'm using the $http under app_dev.php or not.
I realized this with the following code:
app.run (function( $rootScope, $location ){
$rootScope.dev = "";
if ( $location.absUrl().search("app_dev.php") > 0 ) {
$rootScope.dev = "app_dev.php/";
}
}
app.controller('OfferIndexCtrl', function($scope, $http, $location, $filter, $rootScope){
$http.get( $rootScope.dev + 'stage/offer/get').success(function(json){
$scope.offerList = json.offerList;
});
}
This works fine. But the .run() runs after .config() and its not possible to integrate it into the routeProvider.
Can anyone help me to integrate this into my routeProvider
app.config(['$routeProvider', '$locationProvider',
function( $routeProvider, $locationProvider ){
$routeProvider.
when('/', {
templateUrl: 'stage/view/offer/index',
controller: 'OfferIndexCtrl'
}).
otherwise({
redirectTo: '/'
})
}
]);

You should use <base> tag to set base URL for your app, and set your base to "/" or "/app_dev.php/" depending on your Symfony environment, using TWIG helpers for environment. You can use this for "app_test.php" as well.
<base href="{{ path('homepage') }}">
With this your whole application will just work on that base URL, you don't need anything more.
How base HTML5 tag works with AngularJS application is described in detail here ngRoute set base url for all routes

If I'm using plain JS befor the Angular part I can use this variable from there.
Following code worked for me:
var dev = "";
if ( location.pathname.search("app_dev.php") > 0 ) {
dev = "app_dev.php/";
console.log( "App läuft unter dev");
}
App.config(['$routeProvider', '$locationProvider',
function( $routeProvider, $locationProvider ){
$routeProvider.
when('/', {
templateUrl: dev + 'stage/view/offer/index',
controller: 'OfferIndexCtrl'
}).
}

Convert Javascript (angular app) to Typescript

I want to implement pluginable angular app and i use this tutorial for solve problem and this tutorial uses RequireJs for load scripts in correct order
I want to convert this project to type script and i don't know how to use RequireJs in Typescript
for example this is my App.js Code :
define(['require', 'angular', 'underscore', 'src/modules/definitionsLoader.js', 'ngMaterial', 'ui.router', 'ngCookies', 'ngFileUpload' , 'src/controllers/controllers.js'],
function (require, angular, _ , definitionsLoader) {
require(definitionsLoader.scriptsToLoad, function () {
return initializeApp(angular);
});
function initializeApp(angular) {
var application = angular.module('app', definitionsLoader.modulesToLoad)
.config([
'$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', '/home');
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'src/views/dashboard.html',
controller: function() {
},
controllerAs: 'ctrl'
});
var states = definitionsLoader.statesToConfigure;
for (var i = 0; i < states.length; i++) {
var state = states[i];
$stateProvider.state(state.stateName, { url: state.url, controllerAs:'vm' , abstract: state.abstract, templateUrl: state.templateUrl, controller: state.controller });
}
}]).run(['$rootScope', function ($rootScope) {
$rootScope.modules = definitionsLoader.modules;
}])
angular.bootstrap(document, ['app']);
};
});

Since valid JavaScript code is also valid TypeScript code, your snippet "is already" TypeScript. If you also want intellisense and all the good stuff that comes with TypeScript you have to use a .d.ts file. You can find the requirejs.d.ts here. For an easy install I would recommend typings.

AngularJS - Creating shorthand routes with $route.routes

Plnkr
I am migrating AngularJS from 1.1.5 to 1.2.27. In the older version, I was able to use shorthand routes i.e.,
var app = angular.module('app', []);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/show/:list/:type', {templateUrl: 'product.html', controller: 'product_controller'})
.otherwise({redirectTo: '/show/product'});
}]);
app.controller('app_controller', ['$route', function($route){
$route.routes['/show/product'] = {
redirecTo: 'show/product/active'
};
$route.routes['/show/user'] = {
redirecTo: 'show/user/active'
};
}]);
In the above code, when the user enter a url as 'show/product', it redirects to the route 'show/product/active' which was happening in 1.1.5 but this doesn't seems to be works in 1.2.X.
Do you have any idea, why it is not working?
I have a solution in my mind,
app.run(['$rootScope', function($rootScope){
$rootScope.$on('$routeChangeStart', function(event, current_route, previous_route){
//do the conditional redirection using $location.path();
}
}]);
Does this idea looks meaningful and will it work, any suggestion or help?

Loading Controllers Separately using Controller As Syntax and ngRoute

I have the following Angular Module, Routes and Controllers inside my index.js file. Nothing complex. So far I load this one javascript file into my Index.html file and everything work fine so far as I have the ng-app & ng-view in the Index.html file. Simple enough
// /ng-modules/render-index.js
angular
.module("homeIndex", ["ngRoute"])
.config(config)
.controller("homeController", homeController)
.controller("aboutController", aboutController);
function config($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/ng-templates/homeView.html",
controller: "homeController",
controllerAs: "vm"
})
.when("/about", {
templateUrl: "/ng-templates/aboutView.html",
controller: "aboutController",
controllerAs: "vm"
})
.otherwise({ redirectTo: "/" });
};
function homeController() {
var vm = this;
vm.title = "Home Page";
};
function aboutController() {
var vm = this;
vm.title = "About Us";
};
Now I understand that to break this apart at this point in time would be silly because if this was all I was using angular for, why not just keep it all in one javascript file. Understood, But I want to know how to separate these things properly at this level so that I have a basic understanding.
Here is what I want to do. I want to separate the two controllers (homeController & aboutController) to their own files. I also want to know what to do with the routes. DO they get moved into their own javascript file, do they stay in the index.js file? I want to assume that these two controllers will eventually do something complex and therefore I am separating them now.
QUESTION:
Using the (Controller as syntax) How exactly do I do this and what does the index.js file look like and the two home.js and about.js files look like when they have been separated?
What I have tried:
I have tried to put each controller into their own file and inject them into the index.js file
angular
.module("homeIndex", ["ngRoute", "homeController", "aboutController])
I had left the routing inside that file. FOr some reason I was either using the wrong syntax or doing it wrong.

What you tried don't work because you are trying to load controllers as module dependency.
You can split the files like this and add all of them in your index.html
// index.js
angular
.module("homeIndex", ["ngRoute"]);
//route.js
angular
.module("homeIndex")
.config(config);
function config($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/ng-templates/homeView.html",
controller: "homeController",
controllerAs: "vm"
})
.when("/about", {
templateUrl: "/ng-templates/aboutView.html",
controller: "aboutController",
controllerAs: "vm"
})
.otherwise({ redirectTo: "/" });
};
// homeController.js
angular
.module("homeIndex")
.controller("homeController", homeController)
function homeController() {
var vm = this;
vm.title = "Home Page";
};
// aboutController.js
angular
.module("homeIndex")
.controller("aboutController", aboutController);
function aboutController() {
var vm = this;
vm.title = "About Us";
};