AngularJS进阶(一)深入理解ANGULARUI路由_UI-ROUTER_angularjs ui-router_angular-ui-router

和ngRoute相似，开发者可以指定任何已经被注册的控制器，或者在路由里面创建一个作为控制器的函数。但如果没有定义模板，控制器将无效。

五、预载入Resolve

使用预载入功能，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证（promises）。在使用这个选项时比使用angular-route有更大的自由度。

预载入选项需要一个对象，这个对象的key即要注入到控制器的依赖，这个对象的value为需要被载入的factory服务。

如果传入的是字符串，angular-route会试图匹配已经注册的服务。如果传入的是函数，该函数将会被注入，并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证（promise），这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。

    $stateProvider.state('home', {

      resolve: {

        //这个函数的值会被直接返回，因为它不是数据保证

        person: function() {

          return {

            name: "Ari",

            email: "ari@fullstack.io"

          }

        },

        //这个函数为数据保证, 因此它将在控制器被实例化之前载入。

        currentDetails: function($http) {

          return $http({

            method: 'JSONP',

            url: '/current_details'

          });

        },

        //前一个数据保证也可作为依赖注入到其他数据保证中！（这个非常实用）

        facebookId: function($http, currentDetails) {

          $http({

            method: 'GET',

            url: 'http://facebook.com/api/current_user',

            params: {

              email: currentDetails.data.emails[0]

            }

          })

        }

      },

      //定义控制器

      controller: function($scope, person, currentDetails, facebookId) {

          $scope.person = person;

      }

    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

六、URL

url选项将会为该应用的状态指定一个URL基于用户浏览该应用所在的状态。这样当在浏览该应用的时候便能实现深度链接的效果。 该选项与ngRoute的URL相似，但可以被视为对ngRoute主要的升级，在接下来的文章里你便会认可这一点。开发者可以这样指定一个基本的路由。

    $stateProvider

      .state('inbox', {

        url: '/inbox',

        template: '<h1>Welcome to your inbox</h1>'

      });
1
2
3
4
5
6
7
8
9

当用户浏览到/inbox时，该应用将状态改为inbox同时向主ui-view元素中插入模板中的内容(‘Welcome to your inbox’)。URL参数有多个选项，因此它非常强大。开发者可以像设置ngRoute一样设置最基本的参数：

    $stateProvider

      .state('inbox', {

        url: '/inbox/:inboxId',

        template: '<h1>Welcome to your inbox</h1>',

        controller: function($scope, $stateParams) {

          $scope.inboxId = $stateParams.inboxId;

        }

      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

现在将:inboxId作为URL的第二个部分，例如：访问/inbox/1,那么$stateParams.inboxId就为1（$stateParams为{inboxId:1}）。同时也可使用不同的语法：url: ‘/inbox/{inboxId}’

路径必须匹配URL，与ngRoute不同的是，当用户访问到/inbox/时，上面的的路径会被激活，然而当访问到/inbox时不会被激活。路径同时也使开发者可以使用正则表达式来匹配，例如：

    // 限定id为6位16进制数字

    url: '/inbox/{inboxId:[0-9a-fA-F]{6}}',

    // 或者

    // 匹配任何在 `/inbox`后面的url（慎用）并匹配值到indexId

    url: '/inbox/{inboxId:.*}'
1
2
3
4
5
6
7
8
9

注意，在路由中目前还无法使用路由组，路由数据预载入器无法预载入。

在路径里可以指定查询参数：

    // /inbox?sort=ascending 将会被匹配

    url: '/inbox?sort'
1
2
3

七、嵌套路由

使用url参数可以实现嵌套的路由，有了嵌套路由便可在同一个模板同一个路由实现多层次的ui-view，例如在/inbox中嵌入更多路由：

    $stateProvider

      .state('inbox', {

        url: '/inbox/:inboxId',

        template: '<div><h1>Welcome to your inbox</h1>\

                <a ui-sref="inbox.priority">Show priority</a>\

                <div ui-view></div>\

                </div>',

        controller: function($scope, $stateParams) {

          $scope.inboxId = $stateParams.inboxId;

        }

      })

      .state('inbox.priority', {

        url: '/priority',

        template: '<h2>Your priority inbox</h2>'

      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

第一个路由是传统的，注意第二个，它是/inbox下的一个子路由：state( . )语法指定了它使子路由。/inbox/1将匹配第一个路由，而/index/1/priority会匹配第二个路由。使用这种语法，在父视图中的ui-view元素将会由第二个路由控制。

八、Params 路由参数

params选项是一个包含路径中的参数和正则表达式匹配结果的数组。该选项不能和url选项混用！当某状态被激活时，应用将这个数组赋值给$stateParams服务。

九、Views 视图

开发者可以在一个状态中设置多个有名称的视图。该功能在ui-router中很强大，开发者可以在同一个模板中改变和切换不同的视图。

<如果设置了视图选项，则该状态的‘template’，‘templateUrl’及‘templateProvider’将被忽略。如果想在路由里包含父级模板，就需要创建一个包含模板的抽象模板。

例如有这样的视图：

<div>

  <div ui-view="filters"></div>

  <div ui-view="mailbox"></div>

  <div ui-view="priority"></div>

</div>
1
2
3
4
5
6
7
8
9

接下来就可以创建将被分别被插入到上述ui-view的有命名的视图了，每个子视图可以包含自己的模板、控制器和预载入数据。

$stateProvider

  .state('inbox', {

    views: {

      'filters': {

        template: '<h4>Filter inbox</h4>',

        controller: function($scope) {}

      },

      'mailbox': {

        templateUrl: 'partials/mailbox.html'

      },

      'priority': {

        template: '<h4>Priority inbox</h4>',

        resolve: {

          facebook: function() {

            return FB.messages();

          }

        }

      }

    }

  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

十、abstract 抽象模板

抽象模板不能被激活，但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板，或者它可以传递作用域变量$scope给子模板。使用它可以在同一个url下传递自定义数据或者预载入的依赖。除了需要添加abstract属性外，其他设置和设定一个常规状态是相同的：

$stateProvider

  .state('admin', {

    abstract: true,

    url: '/admin',

    template: '<div ui-view></div>'

  })

  .state('admin.index', {

    url: '/index',

    template: '<h3>Admin index</h3>'

  })

  .state('admin.users', {

    url: '/users',

    template: '<ul>...</ul>'

  });


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

十一、onEnter,onExit 回调函数

当应用进入或者离开当前状态的视图时会调用这两个函数。这两个函数可以访问预载入的数据。这两个回调函数使开发者可以根据状态改变来采取某些动作，例如在用户要离开时可以弹出对话框‘你确定吗？’以及防止意外操作等。

十二、Data 数据

自定义数据也可以被附加到状态控制对象state configObject.该数据和预载入数据resolve属性相似，但是该数据不会被注入到控制器中，promise也不会被预载入，它的用途是从父状态传递数据到子状态。

十三、事件

和ngRoute相同的是，angular-route服务会在不同的状态生命周期lifecycle里启动某些事件events。监听$scope对象便可以捕获这些事件然后采取不同的响应或者操作。如下的事件将会在$rootScope上触发，因此在任何$scope对象上都可以监听到这些事件。

13.1 状态改变事件

$scope.$on('$stateChangeStart', 

function(evt, toState, toParams, fromState, fromParams), {

  // 如果需要阻止事件的完成

  evt.preventDefault();

});
1
2
3
4
5
6
7
8
9

可以触发的事件包括：

stateChangeStart
1

当状态改变开始的时候被触发

$stateChangeSuccess
1

当状态改变成功后被触发

$stateChangeError
1

当状态改变遇到错误时被触发，错误通常是目标无法载入，需要预载入的数据无法被载入等。

13.2 视图载入事件

视图载入阶段ui-router也提供了一些事件

$viewContentLoading

当视图正在被载入且在DOM被渲染之前触发。

$scope.$on(‘$viewContentLoading’,

function(event, viewConfig){

// 获取任何视图设置的参数，以及一个特殊的属性：viewConfig.targetView

});

$viewContentLoaded

当视图被载入且DOM已经渲染完成后被触发。

$stateParams 状态参数

在上面提及使用$stateparams来提取在url中的不同参数。该服务的作用是处理url的不同部分。例如，当上述的inbox状态是这样时：

url: ‘/inbox/:inboxId/messages/{sorted}?from&to’

//当用户访问者链接时：

‘/inbox/123/messages/ascending?from=10&to=20’

$stateParams对象的值为：

{inboxId: ‘123’, sorted: ‘ascending’, from: 10, to: 20}

$urlRouterProvider

和ngRoute一样，开发者可以在该对象上设定特定的URL被激活时做什么的规则。由于设定好的状态在特定的url被访问是会自动激活，所以$urlRouterProvider没有必要用来管理激活和载入状态。但当需要管理哪些被发生在当前状态之外的作用域scope时它会非常有用，例如在重定向或者安全验证的时候。在模块的设置函数里便可使用$urlRouterProvider。

when()

该函数需要两个参数：1.当前的路径，2.需要重定向到的路径（或者是需要在路径被访问是运行的函数）。设置重定向前需要为$urlRouterProvider设置when函数来接受一个字符串。例如，当希望重定向一个空的路由到/inbox：

.config(function($urlRouterProvider) {

  $urlRouterProvider.when('', '/inbox');



### 性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）  

2.如何优化webpack构建的性能  

3.移动端的性能优化  

4.Vue的SPA 如何优化加载速度  

5.移动端300ms延迟  

6.页面的重构

**所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。**



![](https://img-blog.csdnimg.cn/20210323221732119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)

![](https://img-blog.csdnimg.cn/20210323221747467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27