Angularjs 我不知道'；我不知道如何组织使用基于组件的web框架的web应用程序

我正在尝试学习前端应用程序的基于组件的框架。目前，我正在使用RiotJS，但它适用于任何使用相同概念的框架（React、Angular 2.0等）

在基本的MVC前端框架（例如AngularJS）中，控制器和路由器之间的连接非常紧密。但是，有了基于组件的框架，路由器和控制器之间的界限要宽得多。这就是我最困惑的地方

下面是我正在尝试构建的应用程序的一个示例：

我有三个主要的UI元素：导航栏、内容区和登录表单。因此，我创建了三个组件：导航栏、内容和登录。我能够为每个组件创建多个路由。例如，如果路线发生变化，导航栏会更新活动的“模块”。这样做很容易，因为我所做的只是改变列表项的类别

现在，我想在

中加载其他标记。在AngularJS中，我总是完全改变视图（使用ui路由器）。如何在基于组件的框架中实现这一点。假设我还有另外两个组件，叫做我的内容用户列表视图，我的内容用户详细视图。如何根据路线将它们添加到组件

my content

？我是否像添加document.innerHTML+='那样添加它

我知道我的大部分语法都是RiotJS，但是如果你用另一个框架的语法来编写，我会理解的

---

谢谢大家!

本质上，是的，您可以将标记附加为DOM节点，然后调用Riot挂载它：

riot.route('/awesome-route', () => {
    const tag = 'your-awesome-tag';
    const options = { ... };
    const elem = document.createElement(tag);
    // TODO empty your content container using pure DOM or jQuery to get rid of the previous route's view...
    document.querySelector('#content').appendChild(elem);
    riot.mount(elem, tag, options);
});

---

本质上，是的，您可以将标记附加为DOM节点，然后调用Riot挂载它：

riot.route('/awesome-route', () => {
    const tag = 'your-awesome-tag';
    const options = { ... };
    const elem = document.createElement(tag);
    // TODO empty your content container using pure DOM or jQuery to get rid of the previous route's view...
    document.querySelector('#content').appendChild(elem);
    riot.mount(elem, tag, options);
});

看一看AngularJS看一看AngularJS