Я следую за инициалом MVA в Angularjs. У меня есть два вопроса. Первый; есть ли какой-нибудь лучший учебный веб-сайт, который вы бы предложили.
Во-вторых, используется ui-router. Я смотрел на него часами; пошел искать ответ и просто не мог понять, что может быть неправильно. Все выглядит как учебник; библиотека сошла с нее; и все работало, пока я не переключил ng-route с ui-router (и все href с ui-sref). Я думаю, что проблема в модуле mainApp, так как страница белая (когда у меня были проблемы с mainPageModule, навигационная панель появлялась, но она имела бы {{event.something [0]}}, указанную сверху). Это сводит меня с ума.
index.html
<div ng-include src="'app/event/directives/header.html'"></div>
<div class="container">
<ui-view></ui-view>
</div>
<script src="/angular.min.js"></script>
<script src="/mainApp.js"></script>
<script src="/ui.router.js"></script>
<script src="/mainpageModule.js"></script>
<script type="text/javascript">
console.log("angular object",angular);
</script>
</body>
mainApp.js
angular.module('mainApp', ['mainPageModule','ui.router'])
.config(['$urlRouterProvider','$stateProvider',
function ($urlRouterProvider, $stateProvider) {
$stateProvider
.state("home", {
url: "/home",
templateUrl: 'main.html'
})
.state("area", {
url: "/area",
templateUrl: "area.html"
})
.state("personal", {
url: "/personal"
templateUrl: "personal.html"
})
.state("contact", {
url: "/contact"
templateUrl: "contact.html"
})
$urlRouterProvider.otherwise('','/home')
}])
.run([function () {
/* Run is when the app gets kicked off*/
console.log("Run hook");
}])
mainPageModule.js
(function(){
angular.module('mainPageModule', [])
.factory('SiteName', [function () {
return {
title:"Website Name"
};
}])
.config([function () {
console.log("Event Module:: config");
}])
.run([function () {
console.log("Event Module::running");
}])
.controller('navigationbarController', ['$scope', 'SiteName',function ($scope,SiteName)
{ this.menu=[
{
name:"Website Name",
href:"home.html"
},
{
name:"Your Area",
href:"area.html"
},
{
name:"Personal",
href:"personal.html"
},
{
name:"Contact",
href:"contact.html"
}
]
this.index = 0;
this.setIndex=function(val)
{
this.index = val;
console.log("called")
}
this.getIndex=function(){
return(this.index);
}
}])
})();
header.html
<nav ng-controller="navigationbarController as event" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{event.title}}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-click="setIndex(0)" ng-class="(index==0) ? 'active' : ''">
<a ui.sref="home">{{event.menu[0].name}}</a>
</li>
<li ng-click="setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui.sref="area">{{event.menu[1].name}}</a>
</li>
<li ng-click="setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui.sref="personal">{{event.menu[2].name}}</a>
</li>
<li ng-click="setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui.sref="contact">{{event.menu[3].name}}</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Как было предложено @tom вам необходимо загрузить angular-ui-router
сразу после angular.js
был загружен после вы можете загрузить mainApp.js
.
Вам нужно заменить всю ui-sref
директиву ui-sref
во всех местах.
ui-sref="home"
вместо ui.sref="home"
Для любого другого, у кого есть эта проблема, основным недостатком был порядок скриптов в нижней части страницы. Это важно. Во-вторых, ошибка моего скрипта не включала запятую после url в mainApp. Двигаясь вперед, я заменил все ui.sref на ui-sref, и это сработало.
Спасибо за вашу помощь, Панкайпаркар и Том были великолепны. Любой, кто начинает и сталкивается с этой проблемой, проверяет консоль, он скажет вам, что случилось