Модули и маршруты AngularJS

категория: AngularJS
С праздничками всех! Успехов в Новом Году и творческой разработки. Сегодня рассмотрю модули и маршруты AngularJS. На любом сайте есть много представлений, для которых потребуется много контроллеров, директив и тп. и чтоб еще это как-то наследовалось - для этого и существуют модули. Модуль - это контейнер, в который будет напихиваться всякая вкуснятина Ангуляра :) Создать его не составит большого труда:
appTest = angular.module 'appTest', []
Теперь у нас есть модуль, а в список в конце - для других модулей, от которых можно будет тянуть данные. В шаблоне вписываем его в директиву ng-app и все - теперь наш модуль будет отвечать за это представление. Напишем контроллер для нашего модуля:
.controller 'TestCtrl', ($scope) ->
  $scope.friends = [
    name: 'Acman'
    city: 'Muk'
  ,
    name: 'Vita'
    city: 'Uzh'
  ]
Теперь когда у нас есть модуль и контроллер, нам понадобятся маршруты, чтобы отображать разные представления. Если нажмем на ссылку /view1 - откроется одно представление, на /view2 - другое и тд. Для этого нам нужно наследовать наше приложение от ngRoute:
angular.module 'app', ['ngRoute']
А теперь напишем конфиг для маршрутов к представлениям view1.html и view2.html:
.config ($routeProvider) ->
  $routeProvider
    .when('/',
      templateUrl: 'partials/view1.html'
      controller: 'TestCtrl'
    ).when('/view2',
      templateUrl: 'partials/view2.html'
      controller: 'TestCtrl'
    ).otherwise redirectTo: '/'
В главном шаблоне index.html вставляем ссылки на наши шаблоны и директиву ng-view, где будут отображаться представления:
<a href="#/">VIEW 1</a> - <a href="#/view2">VIEW 2</a>
  <ng-view></ng-view>
А в view1.html, view2.html что-то типа:
<div ng-controller="TestCtrl">
  <h2>представление 1</h2>
  <ul ng-repeat="item in friends">
    <li>{{ item.name }} - {{ item.city }}</li>
  </ul>
</div>
И не забываем подключить angular-route.min.js, если вы используете AngularJS 1.2+


blog comments powered by Disqus