Angularjs in rails:在不重新加载的情况下更改页面

Angularjs in rails: Change page without reloading?

本文关键字：加载 情况下 rails in 新加载 Angularjs      更新时间：2023-09-26

使用 angularjs 更改 rails 中的页面以致不刷新的最佳实践是什么？（我将在切换的页面上使用淡入动画）。

除此之外，如果我想将数据库查询逻辑保留在 Angularjs 中，那么有没有办法读取 Angularjs 的 Rails url 参数 （foo.com/:arg） ？

如果你正在使用想要转换为 Angular 的现有 Rails 应用程序，你可能不会保留 Rails 中的大量模板/视图代码。相反，通过保留服务器端 API 开始清理，并静态地提供您的 Angular 应用程序。如果你从一个干净的rails应用程序开始，请记住，提供JSON/XML API并静态地提供Angular应用程序基本上是Rails的工作。

要在 Angular 中更改视图而不重新加载页面，您需要将$routeProvider与 ng-view 协调使用。使用相应的视图模板注册应用程序中的每个路由：

angular.module('user-manager', [])
    .config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html'
            })
            .when('/user/:id', {
                templateUrl: 'views/user.html',
                controller: 'UserCtrl'
            })
            .otherwise({
                redirectTo: '/'
           });
});

然后在主索引中的某个位置声明 ng-view.html：

<body ng-app="user-manager">
    <!-- Main view -->
    <div ng-view></div>
</body>

ng-view 将替换为路线中的相关模板。有关更多详细信息和更完整的示例，请参阅：http://docs.angularjs.org/api/ngRoute.$route

相关文章：