Bootstrap 4 navbar with Angular - アイテムをアクティブにする方法

Question

角型ルータの状態でB4 navbarをまとめています。ここに私のコードは次のとおりです。

HTML：

<ul class="nav" id="myTab" role="tablist"> 
    <li class="nav-item"> 
     <a class="nav-link active" ui-sref="state1" href="#">Active</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" ui-sref="state2" href="#">Link</a> 
</li> 
</ul> 

<div ui-view></div> 

コントローラー：

var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]); 

myApp.config(function ($stateProvider, $urlRouterProvider){ 
$stateProvider.state("state1", { 
    url: "#", 
    template: "<p>State 1</p>", 
    controller: "Ctrl1" 
    }).state("state2", { 
    url: "#", 
    template: "<p>State 2</p>", 
    controller: "Ctrl2" 
    }); 
}); 

var ctrls = angular.module("AppCtrls", []); 

ctrls.controller("Ctrl1", function($scope) { 
console.log("Ctrl1 loaded."); 
}); 

ctrls.controller("Ctrl2", function($scope) { 
    console.log("Ctrl2 loaded."); 
}); 

私が達成したい何が示されているその内容をデフォルトのアクティブな項目を持つことです。私はアクティブに最初のリンクを設定していますが、何もしません。 はここにある私の Fiddle

Answer 1

このHTMLのコードを試してみてください。

<ul class="nav" id="myTab" role="tablist"> 
    <li class="nav-item" ui-sref-active="active"> 
     <a class="nav-link" ui-sref="name1">Active</a> 
    </li> 
    <li class="nav-item" ui-sref-active="active"> 
    <a class="nav-link" ui-sref="name2">Link</a> 
</li> 
</ul> 

<div ui-view></div> 

そして、この角度：

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

myApp.config(function($stateProvider, $urlRouterProvide) { 
$urlRouterProvider.otherwise("/"); 
$stateProvider 
    .state('name1',{ 
     url: "/name1", 
     conontroller:'ctrl1', 
     templateUrl: "name1.html" 
    }) 
    .state('name2',{ 
     url: "/name2", 
     conontroller:'ctrl2', 
     templateUrl: "name2.html" 
    }) 
}); 


myApp.controller("ctrl1", function($scope) { 
console.log("Ctrl1 loaded."); 
}); 

myApp.controller("ctrl2", function($scope) { 
    console.log("Ctrl2 loaded."); 
}); 

を