tarlepp / angular-sailsjs-boilerplate

'Boilerplate' for AngularJS + Sails.js
MIT License
307 stars 87 forks source link

New Homepage #119

Closed jjgonver closed 8 years ago

jjgonver commented 8 years ago

Can someone explain to me the detailed steps to assign a new page like the homepage with the '/' route? i.e. homepage/index.html

I'm really lost. Thanks

tarlepp commented 8 years ago

This could be done quite easily. Below is example file which contains definitions for '/' route. Also remember to inject this new module to your application.

(function() {
  'use strict';

  angular
    .module('frontend.foo', []);

  angular
    .module('frontend.foo')
    .config(configure);

  //////////

  /**
   * @ngInject
   * @param $stateProvider
   */
  function configure($stateProvider) {
    $stateProvider
      .state('foo', {
        url: '/',
        data: {
          access: 0
        },
        views: {
          'content@': {
            templateUrl: '/frontend/examples/foo/foo.html'
          },
          'pageNavigation@': false
        }
      });
  }
}());

Closing this one.

jjgonver commented 8 years ago

ok. I follow the next steps to change the homepage to '/' with a new webpage:

  1. Create a folder named homepage inside app
  2. Inside homepage folder create:
// homepage.html
<div class="jumbotron text-center">
  <h1>APP Ayto</h1>
  <p>Participación Ciudadana</p>
  <img src="assets/images/main-icon.png" alt="Participacion ciudadana">
</div>

And

//homepage.js
/**
 * Angular module for frontend.examples.about component. Basically this file contains actual angular module initialize
 * and route definitions for this module.
 */
(function() {
  'use strict';

  // Define frontend.public module
  angular.module('frontend.homepage', []);

  // Module configuration
 /**
 * Angular module for frontend.homepage component. Basically this file contains actual angular module initialize
 * and route definitions for this module.
 */
(function() {
  'use strict';

  // Define frontend.homepage module
  angular.module('frontend.homepage', []);

  // Module configuration
  angular.module('frontend.homepage')
    .config([
      '$stateProvider',
      function($stateProvider) {
        $stateProvider
          .state('homepage', {
            url: '/',
            data: {
              access: 0
            },
            views: {
              'content@': {
                templateUrl: '/frontend/homepage/homepage.html'
              },
              'pageNavigation@': false
            }
          })
        ;
      }
    ])
  ;
}());
  1. In src/app/app.js I change this:
  // Create frontend module and specify dependencies for that
  angular.module('frontend', [
    'frontend-templates',
    'frontend.core',
    'frontend.examples',
    'frontend.admin',
    'frontend.homepage'
  ]);

And this:

  // For any unmatched URL, redirect to /
        $urlRouterProvider.otherwise('/');

At this moment, I can see the new homepage in '/' but I lack the header and the footer. What else do I need to change? Thanks in advance.

tarlepp commented 8 years ago

Another easy fix, add parent: 'frontend', inside your .state(....); This is something that ui-router handles and has basically nothing todo with boilerplate itself.

And for the future add issues to frontend or backend repositories depending which one is in case.

jjgonver commented 8 years ago

ok. I will do. Thanks