angular.js - angularjs ui-router dynamically switches the view to the specified ui-view

Question

a.html

<p ui-view='index'></p>

b.html

<p ui-view='content'></p>

c.html

<p>content1</p>

d.html

<p>content2</p>

The binding event in a.html triggers the content view to switch to c.html or d.html

How to configure the config of $stateProvider
How to manually switch in js?

Answer 1

Your question lacks some necessary contextual information, so I can only rely on speculation or guessing to complete it

The routing system of any SPA framework is the same: each route corresponds to the status of the application, and changes in the application status are reflected in changes in URLs; conversely, changes in URLs will cause the routing system to dynamically refresh the application The status of the program.

In your example, there is only one constant entrance to the routing ui-view='content'，但却要不同的视图（c.html 和 d.html）动态的进入其中，这就意味着 c.html 和 d.html It needs to correspond to the different states of the application, so that the routing system can dynamically update it accordingly.

Suppose your example looks like this:

• when /posts/show/c 的时候，ui-view='content' 显示 c.html

• when /posts/show/d 的时候，ui-view='content' 显示 d.html

So we can correspond to ui-router:

• state 是 posts.show

• Dynamic fragments, that is, the variable parts of URLs, correspond to state 里的 url，我把它命名为 :name

• view 的入口是 content@posts.show

This is enough to write most of the code:

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            'content@posts.show': {
                templateUrl: /* TODO */,
                controller: ...
            }
        }
    });

});

The only question left is: when :name 变化的时候，如何更新 templateUrl?

As mentioned before, changes in URLs will cause the routing system to update the application's state, and these changes are saved in the routing system $params 对象中，我们可以用该对象提取变化的部分并生成正确的 templateUrl. Here I write a helper function to do this:

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            'content@posts.show': {
                templateUrl: getTemplateUrl,
                controller: ...
            }
        }
    });

    function getTemplateUrl() {
        return: 'templates/posts/' + $params.name + '.html';
    }

});

ui-router This module templateUrl not only receives strings, but can also receive function return values. So you can get:

• When /posts/show/c, /posts/show/c 的时候，templateUrl 是 templates/posts/c.html is templates/posts/c.html

• When /posts/show/d, /posts/show/d 的时候，templateUrl 是 templates/posts/d.html is templates/posts/d.html

Correspondingly, after your index 里的导航链接就要负责切换 /posts/show/:name changes, the link on how to generate the corresponding dynamic fragment is in the ui-router documentation, go find it yourself.

Answer 2

I think the people above are making the game too complicated. Wouldn’t it be nice to just watch a ui-view tutorial
https://scotch.io/tutorials/a...