I just started my journey through the development of AngularJS and came across problems with routing. The standard does not suit me that the whole page is updated. I always need the same menu, a hanging top with my controller and a changing block of content, depending on the user's actions. I collected a naturally angular-ui-router , did the following ...
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 does not work, and nothing is displayed in <div ng-view></div> ... What am I doing wrong?
