不同模块之间的角度路由(Angular routing between different modules)

不同模块之间的角度路由(Angular routing between different modules)

我有两个模块 - App1和App2。 App1有一个控制器，Main。 App2有2个控制器，第一个和第二个。 我在App1的主控制器的模板（mainTemp）中有一个按钮。 点击该按钮后，如何路由到App1模块中第一个控制器的模板（firstTemp）？

这就是我的App2模块的外观 -

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) { })

这是App1模块主控制器的模板（mainTemp） -

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

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>

最满意答案

有三种方法可以用来解决这个问题：

为这两者创建一个顶级模块，并在ng-app="app"指令中使用它。

var app1 = angular.module（'app1'，[]）

var app2 = angular.module（'app2'，[]）

var app = angular.module（'app'，['app1'，'app2'，'ngRoute']）;

将app1添加为app2的依赖项。 在html： ng-app="app2"

var app = angular.module（'app1'，['ngRoute']）

var app2 = angular.module（'app2'，['app1']）

只有一个模块。 即使它跨越不同的文件。

var app = angular.module（'app'，['ngRoute']）

var app = angular.module（'app'）

我个人更喜欢第三种方法。

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.