• AngularJS UI-Router：在加载应用程序之前预加载$http数据（angularjs页面加载后再执行）
• Angular2 router.navigate重新加载应用程序
• AngularJS - 利用 ui-route 及 provider 实现页面数据预加载的关键
• angularjs ui-router-如何建立跨应用程序全局的主状态
• AngularJS ui-router：reload：true也重新加载父状态

AngularJS UI-Router：在加载应用程序之前预加载$http数据（angularjs页面加载后再执行）

$stateProvider.state('myState',{
    resolve: {

        // Example using function with simple return value.
        // Since it's not a promise,it resolves immediately.
        simpleObj: function () {
            return { value: 'simple!' };
        },// Example using function with returned promise.
        // This is the typical use case of resolve.
        // You need to inject any services that you are
        // using,e.g. $http in this example
        promiSEObj: function ($http) {
            // $http returns a promise for the url data
            return $http({ method: 'GET',url: '/someUrl' });
        },// Another promise example. If you need to do some 
        // processing of the result,use .then,and your 
        // promise is chained in for free. This is another
        // typical use case of resolve.
        promiSEObj2: function ($http) {
            return $http({ method: 'GET',url: '/someUrl' })
               .then(function (data) {
                   return doSomeStuffFirst(data);
               });
        },// Example using a service by name as string.
        // This would look for a 'translations' service
        // within the module and return it.
        // Note: The service Could return a promise and
        // it would work just like the example above
        translations: "translations",// Example showing injection of service into
        // resolve function. Service then returns a
        // promise. Tip: Inject $stateParams to get
        // access to url parameters.
        translations2: function (translations,$stateParams) {
            // Assume that getLang is a service method
            // that uses $http to fetch some translations.
            // Also assume our url was "/:lang/home".
            translations.getLang($stateParams.lang);
        },// Example showing returning of custom made promise
        greeting: function ($q,$timeout) {
            var deferred = $q.defer();
            $timeout(function () {
                deferred.resolve('Hello!');
            },1000);
            return deferred.promise;
        }
    },// The controller waits for every one of the above items to be
    // completely resolved before instantiation. For example,the
    // controller will not instantiate until promiSEObj's promise has 
    // been resolved. Then those objects are injected into the controller
    // and available for use.  
    controller: function ($scope,simpleObj,promiSEObj,promiSEObj2,translations,translations2,greeting) {
        $scope.simple = simpleObj.value;

        // You can be sure that promiSEObj is ready to use!
        $scope.items = promiSEObj.items;
        $scope.items = promiSEObj2.items;

        $scope.title = translations.getLang("english").title;
        $scope.title = translations2.title;

        $scope.greeting = greeting;
    }
})

Angular2 router.navigate重新加载应用程序

app.components.ts
@RouteConfig([
  {path:'/employees/...',name:'Employees',component:EmployeeComponent},...

employee.component.ts
@RouteConfig([
  {path:'/',name:'EmployeeList',component:EmployeeListComponent,useAsDefault: true},{path:'/:id',name:'EmployeeDetail',component:EmployeeDetailComponent}
])

<button[routerLink]="['EmployeeList']">Close</button>

// template
<button(click)="save()">Save</button>

// EmployeeDetailComponent
saveEmployee() {
  this._employeeServer.updateEmployee(this.employee);
  this._router.navigate(['EmployeeList']);
}

@Directive({
  selector: `click-stop-propagation`
  events: 'stopClick($event)'
})
class ClickStopPropagation {
  stopClick(event:Event) {
    event.preventDefault();
    event.stopPropagation();
  }
}

<button(click)="save()" click-stop-propagation>Save</button>

<button(click)="save($event)" click-stop-propagation>Save</button>

save(event) {
  this._employeeServer.updateEmployee(this.employee);
  this._router.navigate(['EmployeeList']);
  event.preventDefault();
  event.stopPropagation();
}

AngularJS - 利用 ui-route 及 provider 实现页面数据预加载的关键

我在使用 angular 的时候经常碰到一个问题，希望在必要数据加载完成之前暂时不要显示页面。这时，我一般用 ui-route 的 resolve 功能并结合数据接口来实现。（数据 api 我是一般用 provider 来封装）

首先，在 config 中注入 testProvider，并非必须，只是演示下如何配置 provider。这里有个区别就是，在 config 中不能直接访问 provider 的 $get 中的方法，但是可以访问 provider 对象的属性与方法。(比如下面代码中的 this.setPrefix 方法)

其次，然后回到我的需求部分，在 ui-route 里面获取需要预先加载的数据。这个跟 controller 中的注入没有区别，如例子只要在 resolve.userInfo 的方法参数上添加自己需要的 provider 名称，这里就是 test，这样我们就可以直接调用 test.current 了。resolve 也是一个关键，我们用它来获取数据并注入到 controller 中。

最后，在 controller 里面注入我们需要使用的数据，userInfo

angular.module(''logging'', [])
    .provider("test", function() {
        var prefix;
        this.setPrefix = function(p) {
            prefix = p;
        }

        this.$get = function() {
            return {
                log: function(msg) {
                    console.log(prefix,msg);
                },
                current:function(){
                	return {"name":"JMZ"};
                }
            }
        }
    })

angular.module(''myApp'', [''logging'']).config(["$stateProvider", "testProvider" function ($stateProvider, testProvider) {
    testProvider.setPrefix("works: ");

    $stateProvider.state("home/index", {
        url: "/",
        "templateUrl": "home/index.tpl.html",
        "controller": "home/index.ctrl"
        resolve: {
            userInfo: function ($q,test) {
                return test.current();
            }
        }
    });

}]).controller("myCtrl", ["$scope","test","userInfo",function($scope, test,userInfo) {
    test.log(userInfo);    
    $scope.$watch(''myModel'', function(newval) {
        test.log(newval);
    }]);
});

angularjs ui-router-如何建立跨应用程序全局的主状态

<html ng-app="app"><head>...</head><body>  <div id="header"></div>  <div id="notification"></div>  <div id="container"></div>  <div id="footer"></div></body></html>

使用应用程序的给定结构（源自angular-app）：

• 标头：这里是网站导航，登录/退出工具栏等。它是动态的，具有自己的控制器
• notification：全局通知容器。
• 容器：这曾经是我的<ng-view>。这就是所有其他模块的加载位置。
• 页脚：全局页脚。

状态层次结构如何？我已经看过了显示单个模块（联系人）的示例，但是通常一个应用程序将具有全局（根）状态，而在根状态内部则呈现其他模块状态。

我在想的是我的app模块可能具有root状态，然后每个模块都应该具有其自己的状态，而我必须从状态 继承root。我对吗？

同样从ui-state示例中，它们既使用了$routeProvider，$urlRouterProvider也$stateProvider定义了url。我的理解是$stateProvide还处理路由。如果输入错误，应该使用哪个提供商进行路由？

编辑
：http：//plnkr.co/edit/wqKsKwFq1nxRQ3H667LU？p
= preview

谢谢！

答案1

您采用的方法很接近。@ ben-
schwartz的解决方案演示了如何在根状态下为三个基本静态的视图设置默认值。缩孔工具中缺少的是您的孩子仍然需要引用顶部容器视图。

   .state(''root'',{      url: '''',      views: {        ''header'': {          templateUrl: ''header.html'',          controller: ''HeaderCtrl''        },        ''footer'':{          templateUrl: ''footer.html''        }      }    })    .state(''root.about'', {      url: ''/about'',      views: {        ''container@'': {          templateUrl: ''about.html''        }      }    });

请注意views: { ''container@'': ...}，而不是只templateUrl: ...在''root.about''

您可能还想问的是，是否可以让模块定义自己的状态集，然后将其附加到应用程序的状态层次结构中。每个模块提供的路由/状态的一种即插即用功能。

为此，您需要将模块紧密耦合到主应用程序。

在模块中：

angular.module(''contact'', [''ui.router''])  .constant(''statesContact'', [      { name: ''root.contact'',        options: {          url: ''contact'',          views: {            ''container@'': {              templateUrl: ''contacts.html''            }          },          controller:''ContactController''      }}    ])  .config([''$stateProvider'', function($stateProvider){      }])

然后，在应用程序中：

var app = angular.module(''plunker'', [''ui.router'', ''contact'']);app.config(       [''$stateProvider'', ''statesContact'',            function($stateProvider,   statesContact){    $stateProvider    .state(''root'',{ ... })    .state(''root.home'', { ... })    .state(''root.about'', { ... })    angular.forEach(statesContact, function(state) {      $stateProvider.state(state.name, state.options);    })      }]);

这意味着您的所有模块都需要与您的应用程序中设置的这种模式兼容。但是，如果您接受此约束，则可以选择包括模块的任何组合，并且它们的状态会 神奇地
添加到您的应用程序中。如果您想变得更高级，可以state.options.url在statesModuleName循环中进行修改，例如为模块的url结构添加前缀。

还要注意的是，模块ui.compat只需要当你 转换
从$routeProvider到$stateProvider。通常应ui.state改为使用。

另外，请不要忘记在header.html中进行调整$state.includes(''root.contact'')）

更新的插头

AngularJS ui-router：reload：true也重新加载父状态

var app = angular.module("app",['ui.router']);

app.config(function($stateProvider,$urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('state1',{
          templateUrl: 'state1.html',controller: function($scope) {

            $scope.theTime1 = Date.Now();

          }
    })
    .state('state1.state11',{
          templateUrl: 'state11.html',controller: function($scope) {

               $scope.theTime11 = Date.Now();

         }
    });

});

今天关于AngularJS UI-Router：在加载应用程序之前预加载$http数据和angularjs页面加载后再执行的分享就到这里，希望大家有所收获，若想了解更多关于Angular2 router.navigate重新加载应用程序、AngularJS - 利用 ui-route 及 provider 实现页面数据预加载的关键、angularjs ui-router-如何建立跨应用程序全局的主状态、AngularJS ui-router：reload：true也重新加载父状态等相关知识，可以在本站进行查询。