在角度 js 中使用 $stateProvider 进行路由，尝试使用状态进行路由时页面未加载

Question

我想在单击我的菜单的菜单项时加载一个页面，但状态会反映到我的浏览器 URL 中，并且该页面的内容没有被加载，据我研究教程状态是只有这样声明，我的代码也没有显示任何错误。

这是我的 route.js 文件

app.config(function config($stateProvider)
{
    $stateProvider.state("index",{
        url:"",
        controller:"MainCtrl",
        templateUrl:"templates/home/home.html"
    }),
        $stateProvider.state("development",{
            controller:"EmployeeCtrl",
            templateUrl:"templates/employee/employee.html"
        });

})

这是我在其href 的主页上的列表，我已声明我的索引状态工作正常。

 <ul class="nav navbar-nav">
                <li class="active"><a href="#/development">Development</a></li>
                <li><a href="#/design">Design</a></li>
                <li><a href="#/exercise">Exercise</a></li>
                <li><a href="#/humor">Humor</a></li>
            </ul>

这是页面employee.html的代码，当开发状态完成时我想显示其内容。

<div>
    <input type="text" ng-model="searchText">
    <table>
        <tr ng-repeat="emp in employee.data | filter:searchText"></tr>
        <td>{{emp.firstname}}</td>
        <td>{{emp.lastname}}</td>
    </table>
</div>

Answer 1

状态应该根据它们的 URL 来区分，所以你需要在你的状态中添加 url 参数，对于 development 状态应该是 url: '/development',，这样当浏览器中的 URL 更改时，@ 就会检测到987654324@ 然后通过状态定义加载指定的controller & template。

代码

$stateProvider.state("development",{
    url: '/development',
    controller:"EmployeeCtrl",
    templateUrl:"templates/employee/employee.html"
});

您还应该使用ui-sref 指令来确保您的href 已正确创建。您只需要在ui-sref 中指定stateName，它将呈现来自状态url 的值，就像ui-sref="development" 一样，它将是href="#/development"

Answer 2

使用ui-sref 进行状态路由。做：

<ul class="nav navbar-nav">
    <li class="active"><a ui-sref="development">Development</a></li>
    <li><a ui-sref="design">Design</a></li>
    <li><a ui-sref="exercise">Exercise</a></li>
    <li><a ui-sref="humor">Humor</a></li>
</ul>