Angular routing between different modules

Question

I have two modules- App1 and App2. App1 has one controller, Main. App2 has 2 controllers, First and Second. I have a button in the template (mainTemp) of Main controller of App1. On the click of that button how do route to the template(firstTemp) of First controller in App1 module?

This is what my App2 module looks like-

angular.module('App1', ['ngRoute']) 
.config(function ($routeProvider, $locationProvider) {

$routeProvider
.when('/first', {
    templateUrl: '/Template/firstTemp.html',
    controller: 'First'
})
.when('/second', {
    templateUrl: '/Template/secondTemp.html',
    controller: 'Second'
})
$locationProvider.html5Mode(false).hashPrefix('!'); 
})
.controller('First', function ($scope, $http, $location) {

    $scope.savedata = function (employee) {

        $scope.employees = "";
        $http.post("/Data/AddEmployee", { empl: employee })
        .success(function (result) {

            $scope.employees = result;
            $location.path('/second');
        })
        .error(function (result) {
            alert(result);
        });
    }
})
.controller('Second', function ($scope,$http) {
 })

And This is the template (mainTemp) of Main controller of App1 module-

<div ng-app="App2" ng-controller="Main">
     <input type="button" value="submit" name="btnSave" ng-click="route_()" />
</div>

There can only be one ng-app in the page. All modules other than main one must be injected as dependencies — charlietfl
– charlietfl, Commented Sep 29, 2016 at 13:08

Phillis Peters · Accepted Answer · 2016-09-29 12:29:19Z

There are three ways you can use to solve this:

Create a top level module for the two and use it in the ng-app="app" directive.

var app1 = angular.module('app1', [ ])

var app2 = angular.module('app2', [ ])

var app = angular.module('app', ['app1', 'app2', 'ngRoute']);
Add app1 as a dependency for app2. In the html: ng-app="app2"

var app = angular.module('app1', ['ngRoute'])

var app2 = angular.module('app2', ['app1'])
Just have one module. Even if it is across different files.

var app = angular.module('app', ['ngRoute'])

var app = angular.module('app')

Personally, I prefer the third approach.

Collectives™ on Stack Overflow

Angular routing between different modules

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related