Skip to content

Instantly share code, notes, and snippets.

@JBreit

JBreit/app.config.js

Last active June 10, 2017 15:48
Show Gist options
  • Save JBreit/9f8218c5693578192d067074de07e404 to your computer and use it in GitHub Desktop.
Save JBreit/9f8218c5693578192d067074de07e404 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.config.js
import NotFound from './notfound';
const Config = ($stateProvider, $urlRouterProvider, $locationProvider) => {
'ngInject';
$stateProvider
.state('404', NotFound);
$locationProvider
.html5Mode(false)
.hashPrefix('!');
$urlRouterProvider
.otherwise(($injector) => {
$injector
.invoke(['$state', ($state) => {
$state
.transitionTo('404', {}, false);
}]);
});
};
export default Config;
Raw
app.controller.js
class AppController {
constructor() {
this.name = 'app';
}
}
export default AppController;
Raw
app.html
<div class="app">
<div class="view" ui-view></div>
</div>
Raw
app.module.js
import angular from 'angular';
import uiRouter from '@uirouter/angularjs';
import Common from './common/common';
import Components from './components/components';
import Config from './app.config';
import AppComponent from './app.component';
// import 'normalize.css';
const Runtime = ($rootScope, $state, $stateParams) => {
"ngInject";
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
};
angular.module('app', [uiRouter, Common, Components])
.component('app', AppComponent)
.config(Config)
.run(Runtime);
Raw
common.js
import angular from 'angular';
import Navbar from './navbar/navbar';
const CommonModule = angular.module('app.common', [
Navbar,
]).name;
export default CommonModule;
Raw
components.js
import angular from 'angular';
import Home from './home/home';
import About from './about/about';
const componentModule = angular.module('app.components', [
Home,
About,
]).name;
export default componentModule;
Raw
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="app">
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Jason Breitigan">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/img/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/img/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/img/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="assets/img/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="assets/img/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="assets/img/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="assets/img/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="assets/img/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="assets/img/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="assets/img/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="assets/img/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="assets/img/favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="assets/img/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="assets/img/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="iassets/mg/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="assets/img/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="assets/img/mstile-310x310.png" />
<!-- <link rel="icon" href="assets/img/favicon.ico"> -->
<title>Dev Environment</title>
<link rel="stylesheet" type="text/css" href="lib/vendor/normalize.css/normalize.css">
<link rel="stylesheet" type="text/css" href="lib/vendor/Font-Awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css">
</head>
<body>
<app>
Loading...
</app>
</body>
</html>
Raw
navbar.component.js
import template from './navbar.html';
import controller from './navbar.controller';
// import './navbar.scss';
const navbarComponent = {
bindings: {},
template,
controller,
};
export default navbarComponent;
Raw
navbar.controller.js
class NavbarController {
constructor() {
this.name = 'ngIMCO';
}
}
export default NavbarController;
Raw
navbar.html
<nav class="navbar">
<div class="logo">
<h1><a ui-sref="home">{{ $ctrl.name }}</a></h1>
</div>
<div class="nav-links">
<li class="nav-item" ui-sref-active="active">
<a class="nav-link" ui-sref="home">
<i class="fa fa-home fa-lg nav-icon"></i>
<span class="nav-text"> Home</span>
</a>
</li>
<li class="nav-item" ui-sref-active="active">
<a class="nav-link" ui-sref="about">
<i class="fa fa-id-card fa-lg nav-icon"></i>
<span class="nav-text"> About</span>
</a>
</li>
</div>
</nav>
Raw
navbar.js
import angular from 'angular';
import uiRouter from '@uirouter/angularjs';
import NavbarComponent from './navbar.component';
const navbarModule = angular.module('navbar', [
uiRouter,
]).component('navbar', NavbarComponent).name;
export default navbarModule;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment