Только начал свой путь по освоению AngularJS и наткнулся на проблемы с роутингом. Стандартный меня не устраивает тем, что вся страница обновляется. Мне же нужно всегда одно и то же меню, висящий топ со своим контроллером и меняющийся, в зависимости от действий пользователя, блок контента. Накопал естественно angular-ui-router
, сделал следующее ...
index.html:
<!DOCTYPE html>
<html lang="ru" ng-app="app" ng-controller="MainCtrl">
<head>
<meta charset="utf-8">
<title ng-bind="title"></title>
<!-- подключаем app.css и bootstrap.css -->
<!-- подключаем jquery, bootstrap, angular, angular-ui-router -->
<!-- подключаем app.js и pages/start/controller.js -->
</head>
<body ng-cloak>
<div class="ui-top"><!-- Верхняя шапка с плюшками --></div>
<div class="ui-main-nav">
<ul>
<li ng-repeat="item in mainMenu">
<a ui-sref="{{item.path}}">{{item.name}}</a>
</li>
</ul>
</div>
<div class="ui-main-conteiner">
<div ng-view></div>
</div>
</body>
</html>
app.js:
angular.module("app", [ 'app.start', 'ui.router' ])
.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state("start", {
url: '/start',
templateUrl: 'pages/start/index.html',
controller: 'StartCtrl'
});
$urlRouterProvider.otherwise("start");
$locationProvider.html5Mode(true);
}])
.controller('MainCtrl', ['$scope', '$location', function($scope, $location) {
$scope.title = "MyFirst Page in Angular";
$scope.mainMenu = [
{
name: 'Menu 1',
path: '/path1'
},
{
name: 'Menu 2',
path: '/path2'
}
];
}]);
pages/start/controller.js:
angular.module('app.start', [ 'ui.router' ])
.controller('StartCtrl',['$scope', function ($scope) {
$scope.message = "Message from StartCtrl";
}]);
pages/start/index.html:
<h2>Start Page</h2>
<p>{{message}}</p>
StartCtrl
не отрабатывает и в <div ng-view></div>
ничего не отображается ... Что я делаю не так?