Блог

Главная - Вопросы по программированию - Модульное приложение Angular с использованием Angular UI Router и Browserify

Модульное приложение Angular с использованием Angular UI Router и Browserify

#angularjs #angular-ui-router #browserify

#angularjs #angular-ui-router #browserify

Вопрос:

Я никогда раньше не использовал Angular UI Router, но я хочу создать приложение с вложенными представлениями, чтобы оно выглядело как наиболее разумный выбор. Однако. Я просто не могу разобраться в этом. Мое приложение является модульным, поэтому на моей странице есть элемент, в который я хочу загрузить другие модули с их шаблонами просмотра.

Каркас приложения

Затем, когда внутри одного из вложенных представлений выполняется какое-либо действие, скажем, нажатие кнопки, я бы хотел, чтобы состояние изменилось, чтобы модуль стал единственным внутри основного представления, а URL-адрес изменился:

Каркас приложения - с изменением состояния

Я пишу на CoffeeScript и использую Browserify для объединения приложения, поэтому все модули находятся в отдельных файлах и требуются. Это то, чего я добился до сих пор, но это не работает, и я не могу в этом разобраться.

app.coffee

 require...
require...
require...

app = angular.module("darrylsnow", [
    "ngAnimate"
    "ui.router"
    "submodule1"
    "submodule2"
    "templates"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$locationProvider"
    ($stateProvider, $urlRouterProvider, $locationProvider) ->

        $urlRouterProvider
            .otherwise "/"

        $stateProvider
            .state "main",
                abstract: true  # because the main module requires the submodules
                url: "/"

        $locationProvider.html5Mode true
]

submodule1.coffee

 submodule1 = angular.module("submodule1", [
    "ui.router"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$routeProvider"
    ($stateProvider, $urlRouterProvider, $routeProvider) ->

        $stateProvider
            .state "main.submodule1",
                url: ""
                templateUrl: "submodule1.html"
            .state "main.submodule1-expanded",
                url: "/submodule1" # template shouldn't change

]

submodule2.coffee

 submodule2 = angular.module("submodule2", [
    "ui.router"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$routeProvider"
    ($stateProvider, $urlRouterProvider, $routeProvider) ->

        $stateProvider
            .state "main.submodule2",
                url: ""
                templateUrl: "submodule2.html"
            .state "main.submodule2-expanded",
                url: "/submodule2" # template shouldn't change

]

Возможно ли вообще иметь дочерние состояния в разных модулях? Если нет, как бы вы порекомендовали мне это сделать? Спасибо.

Ответ №1:

Есть рабочий пример, где я попытался показать, как собрать angular ui-router и coffee вместе. Хотя я не уверен на 100%, чего именно вы пытались достичь… вы можете найти там некоторые ответы и вдохновение.

Во-первых (упрощенный) index.html

   <head> 
    ...
    <script src="app.js"></script>
    <script src="submodule1.js"></script> 
    <script src="submodule2.js"></script>     
  </head>

  <body>
   <ul>    
    <a ui-sref="main.submodule1.expanded">main.submodule1.expanded</a>
    <a ui-sref="main.submodule2({id:22})">main.submodule2</a>
    <a ui-sref="main.submodule2-expanded({id:22})">main.submodule2-expanded</a>
    <div ui-view=""></div>
  </body>

Теперь это будет app.coffee, где наиболее важной частью является template . Это позволит каждому дочернему элементу вводить свой вид в этот шаблон безымянного представления. Другим вариантом было бы использовать абсолютно именованные представления, но это упрощает его:

 app = angular.module("darrylsnow", [
    "ui.router"
    "submodule1"
    "submodule2"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$locationProvider"
    ($stateProvider, $urlRouterProvider, $locationProvider) ->

        $stateProvider
            .state "main",
                template: "<div ui-view />"
                abstract: true  # because the main module requires the submodules
                url: "/" 
     ...

Другие файлы представляют действительно разные модули.

Пример submodule1.coffeee показывает, что даже здесь мы используем вложенность (main.submodule1.expanded является дочерним элементом main.submodule1):

 submodule1 = angular.module("submodule1", [
    "ui.router"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$locationProvider"
    ($stateProvider, $urlRouterProvider, $locationProvider) ->

        $stateProvider
            .state "main.submodule1",
                template: "<div ui-view />"
                abstract: true
            .state "main.submodule1.expanded",
                url: "/submodule1" # template shouldn't change
                templateUrl: "submodule1.html"
                controller: 'Some1Ctrl'

] 
submodule1.controller 'Some1Ctrl', [  
    "$scope"
    "$stateParams"
    "$state"
    ($scope, $stateParams, $state) ->
        $scope.params = $stateParams;
        $scope.state = $state.current;
]

В качестве другого подхода мы можем использовать братьев и сестер в качестве подмодуля 2.coffee показывает:

 submodule2 = angular.module("submodule2", [
    "ui.router"
]).config [
    "$stateProvider"
    "$urlRouterProvider"
    "$locationProvider"
    ($stateProvider, $urlRouterProvider, $locationProvider) ->

        $stateProvider
            .state "main.submodule2",
                templateUrl: "submodule2.html"
                controller: 'Some2Ctrl'
            .state "main.submodule2-expanded",
                url: "/submodule2/{id}" # template shouldn't change
                templateUrl: "submodule2.html"
                controller: 'Some2Ctrl'
       ...

То, как все это сочетается, лучше всего наблюдать в этом plunker