fc-base-pen [ Angular - UI-Router - Bootstrap ] http://codepen.io/beeman/pen/pyZyaB

fc-base-pen [ Angular - UI-Router - Bootstrap ].markdown

fc-base-pen [ Angular - UI-Router - Bootstrap ]

This is a template with :

• angular 1.5.3
• ui-router 1.0.0-alpha.4
• bootstrap-3.3.6
• font-awesome-4.6.1

A couple of notes on this template:

• It is created to have a base with recent versions of these libraries
• It is well structured (according to me ;))
• Angular 1.5.* is used for its components
• UI-Router 1.* can directly route to these component using the component key.
• Templates are defined in the HTML of this pen as text/ng-template scripts
• The component inspects the state for the key menuLabel to add menu items dynamically

Using and extending this template should be fairly straightforward.

Let me know if you have any questions or suggestions!

A Pen by Bram Borggreve on CodePen.

License.

index.html

<!-- The main application HTML -->
<div class="container" ng-app="app">
  <div ui-view/>
</div>

<!-- Template for state app -->
<script type="text/ng-template" id="/component.app.html">
  <base-nav title="{{$ctrl.name}}" text="{{$ctrl.version}}" items="$ctrl.items"></base-nav>
  <div ui-view/>
</script>

<!-- Template for the app.index state -->
<script type="text/ng-template" id="/component.app.index.html">  
  <h1>Hello :)</h1> 
  <p>This is a template with Angular 1.5.*, UI-Router 1.0.* and Bootstrap 3.*.</p>
  <p>A couple of notes on this template:</p>
  <ul>
    <li>It is created to have a base with recent versions of these libraries</li>
    <li>It is well structured (according to me ;))</li>
    <li>Angular 1.5.* is used for its components</li>
    <li>UI-Router 1.* can directly route to these component using the <code>component</code> key.</li>
    <li>Templates are defined in the HTML of this pen as <code>text/ng-template</code> scripts</li>
    <li>The <code>&lt;base-nav&gt;</code> component inspects the state for the key <code>menuLabel</code> to add menu items dynamically</li>
  </ul>
  
  <p>Using and extending this template should be fairly straighforward.</p>
  <p>Let me know if you have any questions or suggestions!</p>
  
  <hr />
  <div class="text-center">
    <a href='https://github.com/beeman/'><i class="fa fa-fw fa-2x fa-github"></i></a>
    <a href='mailto:[email protected]'><i class="fa fa-fw fa-2x fa-envelope"></i></a>
    <a href='https://twitter.com/beeman_nl'><i class="fa fa-fw fa-2x fa-twitter"></i></a>
  </div>
</script>

<!-- Template for the app.about state -->
<script type="text/ng-template" id="/component.app.about.html">  
  <h1>About</h1>Tell something about your app!
</script>

<!-- Template for the base.nav component -->
<script type="text/ng-template" id="/component.base.nav.html">  
  <nav class="navbar navbar-default">  
    	<div class="container-fluid"> 
	      <div class="navbar-header">
        <a class="navbar-brand" href="" ui-sref="app.index">{{$ctrl.title}}</a>
      </div> 
      <div class="navbar-collapse">
        <ul class="nav navbar-nav">
          <li ui-sref-active="active" ng-repeat="item in $ctrl.items">
            <a href="#" ui-sref="{{item.sref}}">{{item.label}}</a>
          </li> 
        </ul>
        <p class="navbar-text navbar-right">{{$ctrl.text}}</p>
      </div>
    	</div>
  </nav>
</script>

script.babel

// Clear the console after each page load
console.clear()

// Here the app gets defined
angular.module('app', [
  'ui.router',
  'app.core',
  'app.components',
]);

// We use app.core to separate our app into Angular modules
const core = angular.module('app.core', []);

core.config($stateProvider => $stateProvider
  .state('app', {
    url: '',
    abstract: true,
    component: 'app',
  })
  .state('app.index', {
    url: '/app',
    component: 'appIndex',
    menuLabel: 'Home',
  })
  .state('app.about', {
    url: '/about',
    component: 'appAbout',
    menuLabel: 'About',
  })
)

core.component('app', {
  templateUrl: '/component.app.html',
  controller: function () {
    this.name = `fc-base-pen`
    this.version = `AngularJS ${angular.version.full}`
  },
})

core.component('appIndex', {
  templateUrl: '/component.app.index.html',
})

core.component('appAbout', {
  templateUrl: '/component.app.about.html',
})

// This line makes sure we navigate to the initial route
core.config($urlRouterProvider => $urlRouterProvider.otherwise('/app'))

// This module holds our components
const cmp = angular.module('app.components', []);
cmp.component('baseNav', {
  templateUrl: '/component.base.nav.html',
  bindings: {
    title: '@',
    text: '@',
  },
  controller: function($state) {
    this.items = $state.get()
      .filter(state => state.menuLabel)
      .map(state => ({
        label: state.menuLabel,
        sref: state.name,
      }))
  }
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.4/angular-ui-router.js"></script>

style.css

body {
  padding-top: 20px
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />