Question

我是Angular JS的新手，我对预先设置表单有疑问。

我的页面的默认网址是，例如， localhost：3000 /＃/ projectconfig。我希望发生以下情况：加载页面时，会自动从控制器调用例程。它在默认URL的情况下设置$ scope.newproject = true，或者在URL包含项目ID之后调用服务器以填充某些数据，即看起来像 localhost：3000 /＃/ projectconfig / 1 。所以我需要调用一些例程并检查URL中的数据，我是如何在表单及其控制器中精确声明的？

调用页面时，我需要从服务器获取一些数据。我不希望在收到数据之前呈现页面。这涉及上述指定projectId时的情况，我需要用表格预先填写表格。

提前谢谢你，阿斯卡

Answer 1

您需要两件事， router 和resolve功能。

来自官方文档的引用

应该注入的可选依赖关系图控制器。如果任何这些依赖是承诺，路由器将等待他们全部解决或一个被拒绝之前控制器被实例化。如果所有承诺都得到解决成功地，已经解决的承诺的值被注入和触发$ routeChangeSuccess事件。如果有任何承诺拒绝了$ routeChangeError事件被触发。

一个简单的例子：

    app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/something/:param', {templateUrl: 'home.html', controller: 'MyCtrl',resolve: {
            myVar: function($q,$http){
                var deffered = $q.defer();

                    // make your http request here and resolve its promise

                return deffered.promise;
            }
        }}).
        otherwise({redirectTo: '/'});
}]);

然后将myVar注入您的控制器，其中包含promise数据。

关于网址参数

注意第一条路线/something/:param

的参数

如果您拨打localhost:3000/#/projectconfig/something/foobar，可以通过$route服务访问该参数：

$route.current.params.param == 'foobar'

通过服务注入

您还可以通过返回您要注入的服务来避免额外的DI参数：

app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: 'home.html', controller: 'MyCtrl',resolve: {
                myService: function($q,$http,myService){
                  var deffered = $q.defer();

                      /*  make your http request here
                      *   then, resolve the deffered's promise with your service.
                      */

                  deffered.resolve(myService),

                  return deffered.promise;
                }
            }}).
            otherwise({redirectTo: '/'});
    }]);

查看egghead，这是学习Angular资源的重要资源

从AngularJS表格到控制器的初始调用？收集所有数据后如何呈现页面？

1 个答案: