Angular modular application using Angular UI Router and Browserify

Question

Angular modular application using Angular UI Router and Browserify

I have never used Angular UI Router before, but I want to create an application with nested views so that it looks like the most reasonable choice. However. I just can't get around it. My application is modular, so I have an element on my page that I want other modules with their presentation templates to load.

Application wireframe

Then, when some action is performed inside one of the nested views, say, a button click, I would like the state to change, the module to become the only one inside the main view and change for the URL:

Application wireframe - with state change

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

]

? , ? .

+4

angularjs angular-ui-router browserify

Darryl Snow 19 . '14 12:36

1

Radim Köhler · Accepted Answer · 2014-06-19T16:32:24+0000

, , 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;
]

, subodule2.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

Angular modular application using Angular UI Router and Browserify

More articles: