Javascript 角度：简单布线

我有一个简单的应用程序，它有一个块的许多不同变体

我想用Angular实现简单的路由

例如，对于URL#/page1，页面的主块应该从/partials/page1.html加载内容

我有大量具有唯一名称的页面。我如何实现这种路由

注意：我们不能使用Angular

app.config

将所有URL和模板名称存储在那里。

选项一：使用所有可能路由的静态init 类似的东西可以工作，尽管它使用的是

app.config

，但是是以编程的方式

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

    // get your pages from somewhere (e.g. via $http)
    var yourBigChunkOfPages = [
        {route: ..., template: ..., ctrl: ...},
        ...
    ];

    angular.forEach(yourBigChunkOfPages, function (page) { 
        $routeProvider.when(page.route, {
            template: page.template,
            controller: page.ctrl
        });
    });
});

选项二：动态路由到单个控制器 另一个可能更通用的解决方案是为所有请求加载相同的控制器，并在那里决定要做什么。例如：

angular.module('yourApp',['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when("/page/:pagename", {
        template: 'page.html',
        controller: 'PageCtrl'
    });
})
.controller('PageCtrl', function ($scope, $routeParams) {

    // do something with $routeParams.pagename which holds
    // the reference to the requested pagename

});

有一个解释。

选项I：所有可能路由的静态初始化 类似的东西可以工作，尽管它使用的是

app.config

，但是是以编程的方式

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

    // get your pages from somewhere (e.g. via $http)
    var yourBigChunkOfPages = [
        {route: ..., template: ..., ctrl: ...},
        ...
    ];

    angular.forEach(yourBigChunkOfPages, function (page) { 
        $routeProvider.when(page.route, {
            template: page.template,
            controller: page.ctrl
        });
    });
});

选项二：动态路由到单个控制器 另一个可能更通用的解决方案是为所有请求加载相同的控制器，并在那里决定要做什么。例如：

angular.module('yourApp',['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when("/page/:pagename", {
        template: 'page.html',
        controller: 'PageCtrl'
    });
})
.controller('PageCtrl', function ($scope, $routeParams) {

    // do something with $routeParams.pagename which holds
    // the reference to the requested pagename

});

有一个解释。

我知道了

var module = angular.module('appName', ['ngRoute']).
    config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: 'partials/index.html'}).
            when('/:page', {templateUrl: function(routeArgs){
                var path = 'partials';
                path += '/' + routeArgs['page'] + '.html';
                return path;
            }}).
            otherwise({redirectTo: '/'});
    }]);

我知道了

var module = angular.module('appName', ['ngRoute']).
    config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: 'partials/index.html'}).
            when('/:page', {templateUrl: function(routeArgs){
                var path = 'partials';
                path += '/' + routeArgs['page'] + '.html';
                return path;
            }}).
            otherwise({redirectTo: '/'});
    }]);

---

---

ng include可能会起作用。@Rantiev将每个函数拆分为它自己的

模块

。每个模块现在都有自己的

路线

。这样，您就可以得到可分块大小的代码，并且易于理解app@Deeptechtons，您好，假设您有1000个页面，您必须为它们实现路由。它只是应该加载到主页块中的HTML块。您不必实现任何不同的函数性。只是简单的路线，你怎么做？不要使用所有路由的简单列表。ng-include可能会起作用。@Rantiev将每个函数拆分为它自己的

模块

。每个模块现在都有自己的

路线

。这样，您就可以得到可分块大小的代码，并且易于理解app@Deeptechtons，您好，假设您有1000个页面，您必须为它们实现路由。它只是应该加载到主页块中的HTML块。您不必实现任何不同的函数性。只是简单的路线，你怎么做？不要使用所有路由的简单列表。尝试使用json文件存储名称，然后通过$hhtp.get加载并将foreach放入承诺中。实际上，这是我想要避免的。我希望避免存储所有文件名。和模板。这就是我要问的原因@Rantiev，那么angular应该如何知道将您的请求路由到哪里呢？类似于/：pagename->我相信这并不难。只需加载pagetemplate，该名称作为/：pagename参数传递到url。我们在某处有$httpRequest变量，我们可以获取该参数并使控制器加载具有相同名称的模板。这是个问题吗？我不这么认为。最好是列出1000个页面，并在每次更改页面URL时更改链接和模板映射。尝试使用json文件存储名称，然后通过$hhtp.get加载并将foreach放入承诺中。实际上，这是我想要避免的。我希望避免存储所有文件名。和模板。这就是我要问的原因@Rantiev，那么angular应该如何知道将您的请求路由到哪里呢？类似于/：pagename->我相信这并不难。只需加载pagetemplate，该名称作为/：pagename参数传递到url。我们在某处有$httpRequest变量，我们可以获取该参数并使控制器加载具有相同名称的模板。这是个问题吗？我不这么认为。最好是列出1000页，并在每次更改页面URL时更改链接和模板映射。@fdomig检查我的解决方案。@fdomig检查我的解决方案。