├── .gitignore
├── LICENSE
├── README.md
├── app
    ├── components
    │   ├── app
    │   │   ├── app.html
    │   │   └── app.js
    │   └── navbar
    │   │   ├── navbar.html
    │   │   └── navbar.js
    ├── routes
    │   ├── about
    │   │   ├── about.html
    │   │   └── about.js
    │   ├── admin
    │   │   ├── admin.html
    │   │   └── admin.js
    │   ├── dashboard
    │   │   ├── dashboard.html
    │   │   └── dashboard.js
    │   ├── home
    │   │   ├── home.html
    │   │   └── home.js
    │   ├── login
    │   │   ├── login.html
    │   │   └── login.js
    │   └── notfound
    │   │   └── notfound.js
    └── services
    │   └── auth
    │       └── auth.js
├── gulpfile.js
├── package.json
└── views
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
 1 | logs/*
 2 | !.gitkeep
 3 | node_modules/
 4 | bower_components/
 5 | tmp
 6 | .DS_Store
 7 | .idea
 8 | .build
 9 | !dist/index.html
10 | dist/
11 | npm-debug.log
12 | 
13 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Brandon
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # angularjs-component-router
 2 | 
 3 | An Angular 1.x example app using the component router and module component helper
 4 | 
 5 | ## Installation
 6 | 
 7 |   Clone this repo
 8 | 
 9 |   Install the dependencies
10 | 
11 |   	npm install
12 | 
13 |   Build the app
14 | 
15 |   	npm start
16 | 
17 |   Navigate to http://localhost:8080 in your browser
18 | 


--------------------------------------------------------------------------------
/app/components/app/app.html:
--------------------------------------------------------------------------------
1 | <nav-bar></nav-bar>
2 | <main>
3 |   <ng-outlet></ng-outlet>
4 | </main>
5 | 


--------------------------------------------------------------------------------
/app/components/app/app.js:
--------------------------------------------------------------------------------
 1 | var app = angular.module('myApp', [
 2 | 	'ngComponentRouter',
 3 | 	'app.templates',
 4 | 	'app.home',
 5 | 	'app.navbar',
 6 | 	'app.about',
 7 | 	'app.login',
 8 | 	'app.admin',
 9 | 	'app.admin.dashboard',
10 | 	'app.404'
11 | ]);
12 | 
13 | app.value('$routerRootComponent', 'app');
14 | app.component('app', {
15 | 	templateUrl: 'components/app/app.html',
16 | 	$routeConfig: [
17 | 		{ path: '/', component: 'home', name: 'Home' },
18 | 		{ path: '/about/:name', component: 'about', name: 'About' },
19 | 		{ path: '/login', component: 'login', name: 'Login' },
20 | 		{ path: '/admin/...', component: 'admin', name: 'Admin' },
21 | 		{ path: '/**', component: 'notfound', name: 'NotFound' }
22 | 	]
23 | });
24 | 


--------------------------------------------------------------------------------
/app/components/navbar/navbar.html:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-default">
 2 |   <ul class="nav navbar-nav">
 3 |     <li><a ng-link="['/Home']">Home</a></li>
 4 |     <li><a ng-link="['/About', { name: 'Me' }]">About</a></li>
 5 |     <li><a ng-if="!vm.Auth.loggedIn" ng-link="['/Login']">Login</a></li>
 6 |     <li><a ng-if="vm.Auth.loggedIn" ng-click="vm.logout()">Logout</a></li>
 7 |     <li><a ng-link="['/Admin', 'Dashboard']">Dashboard</a></li>
 8 |   </ul>
 9 | </nav>
10 | 


--------------------------------------------------------------------------------
/app/components/navbar/navbar.js:
--------------------------------------------------------------------------------
 1 | angular.module('app.navbar', []).component('navBar', {
 2 |   templateUrl: 'components/navbar/navbar.html',
 3 |   controllerAs: 'vm',
 4 |   controller: ['Auth', '$rootRouter', function(Auth, $rootRouter) {
 5 |     var vm = this;
 6 | 
 7 |     vm.Auth = Auth;
 8 | 
 9 |     vm.logout = function() {
10 |       vm.Auth.logout();
11 |       $rootRouter.navigate(['/Home']);
12 |     }
13 |   }]
14 | });
15 | 


--------------------------------------------------------------------------------
/app/routes/about/about.html:
--------------------------------------------------------------------------------
1 | About {{ vm.name }}
2 | 


--------------------------------------------------------------------------------
/app/routes/about/about.js:
--------------------------------------------------------------------------------
 1 | angular.module('app.about', []).component('about', {
 2 |   templateUrl: 'routes/about/about.html',
 3 |   controllerAs: 'vm',
 4 |   controller: function() {
 5 |     var vm = this;
 6 | 
 7 |     vm.$routerOnActivate = function(toRoute, fromRoute) {
 8 |     	this.name = toRoute.params.name;
 9 |     };
10 |   }
11 | });
12 | 


--------------------------------------------------------------------------------
/app/routes/admin/admin.html:
--------------------------------------------------------------------------------
1 | Admin
2 | <hr/>
3 | <ng-outlet></ng-outlet>


--------------------------------------------------------------------------------
/app/routes/admin/admin.js:
--------------------------------------------------------------------------------
1 | angular.module('app.admin', []).component('admin', {
2 | 	templateUrl: 'routes/admin/admin.html',
3 | 	$routeConfig: [
4 | 		{ path: '/dashboard', component: 'dashboard', name: 'Dashboard' }
5 | 	]
6 | });
7 | 


--------------------------------------------------------------------------------
/app/routes/dashboard/dashboard.html:
--------------------------------------------------------------------------------
1 | <p>
2 | 	Dashboard
3 | </p>


--------------------------------------------------------------------------------
/app/routes/dashboard/dashboard.js:
--------------------------------------------------------------------------------
 1 | angular.module('app.admin.dashboard', []).component('dashboard', {
 2 |   templateUrl: 'routes/dashboard/dashboard.html',
 3 |   $canActivate: ['Auth', '$rootRouter', function(Auth, $rootRouter) {
 4 |     return Auth.check().then(function(auth) {
 5 |       if (auth) {
 6 |         return true;
 7 |       } else {
 8 |         $rootRouter.navigate(['/Login']);
 9 |         return false;
10 |       }
11 |     });
12 |   }]
13 | });
14 | 


--------------------------------------------------------------------------------
/app/routes/home/home.html:
--------------------------------------------------------------------------------
1 | Home


--------------------------------------------------------------------------------
/app/routes/home/home.js:
--------------------------------------------------------------------------------
1 | angular.module('app.home', []).component('home', {
2 |   templateUrl: 'routes/home/home.html'
3 | });
4 | 


--------------------------------------------------------------------------------
/app/routes/login/login.html:
--------------------------------------------------------------------------------
1 | <form ng-if="!vm.Auth.loggedIn">
2 | 	<input type="text" ng-model="vm.username">
3 | 	<input type="password" ng-model="vm.password">
4 | 	<button ng-click="vm.login()" value="Login">Login</button>
5 | </form>
6 | <p ng-if="vm.Auth.loggedIn">You are logged in!</p>
7 | 


--------------------------------------------------------------------------------
/app/routes/login/login.js:
--------------------------------------------------------------------------------
 1 | angular.module('app.login', ['app.services.auth']).component('login', {
 2 | 	templateUrl: 'routes/login/login.html',
 3 | 	controller: ['Auth', LoginController],
 4 | 	controllerAs: 'vm'
 5 | });
 6 | 
 7 | function LoginController(Auth) {
 8 | 	var vm = this;
 9 | 
10 | 	vm.Auth = Auth;
11 | 
12 | 	vm.login = function() {
13 | 		vm.Auth.auth(this.username, this.password);
14 | 	}
15 | }
16 | 


--------------------------------------------------------------------------------
/app/routes/notfound/notfound.js:
--------------------------------------------------------------------------------
1 | angular.module('app.404', []).component('notfound', {
2 | 	template: 'Page Not Found'
3 | });
4 | 


--------------------------------------------------------------------------------
/app/services/auth/auth.js:
--------------------------------------------------------------------------------
 1 | angular.module('app.services.auth', []).service('Auth', ['$q', Auth]);
 2 | 
 3 | function Auth($q) {
 4 | 	this.loggedIn = false;
 5 | 	this.$q = $q;
 6 | }
 7 | 
 8 | Auth.prototype.auth = function(username, password) {
 9 | 	this.loggedIn = true;
10 | 
11 | 	return this.check();
12 | }
13 | 
14 | Auth.prototype.check = function() {
15 | 	var _this = this;
16 | 	return this.$q(function(resolve) {
17 | 		resolve(_this.loggedIn);
18 | 	});
19 | }
20 | 
21 | Auth.prototype.logout = function() {
22 | 	this.loggedIn = false;
23 | }
24 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var concat = require('gulp-concat');
 3 | var watch = require('gulp-watch');
 4 | var connect = require('gulp-connect');
 5 | var ngTemplates = require('gulp-ng-templates');
 6 | var sourcemaps = require('gulp-sourcemaps');
 7 | var headerfooter = require('gulp-headerfooter');
 8 | 
 9 | gulp.task('default', [
10 |     'build','deps',
11 |     'html', 'style',
12 |     'connect', 'templates'
13 |     ], function() {
14 | 
15 |     gulp.watch([
16 |         './app/**/*.js',
17 |         './app/**/*.html',
18 |         './views/index.html',
19 |         './lib/*.js'
20 |     ], ['build', 'html', 'templates', 'deps']);
21 | });
22 | 
23 | gulp.task('deps', function() {
24 |     return gulp.src([
25 |         'node_modules/@angular/router/angular1/angular_1_router.js'
26 |     ])
27 |     .pipe(sourcemaps.init())
28 |     .pipe(concat('dependencies.js'))
29 |     .pipe(sourcemaps.write())
30 |     .pipe(gulp.dest('./dist/'));
31 | });
32 | 
33 | gulp.task('build', function() {
34 |     return gulp.src([
35 |         './app/**/*.js'
36 |     ])
37 |     .pipe(sourcemaps.init())
38 |     .pipe(concat('bundle.js'))
39 |     //.pipe(headerfooter.header("(function() {\n"))
40 |     //.pipe(headerfooter.footer("}());\n"))
41 |     .pipe(sourcemaps.write())
42 |     .pipe(gulp.dest('./dist/'));
43 | });
44 | 
45 | gulp.task('html', function() {
46 |     return gulp.src([
47 |         './views/index.html'
48 |     ])
49 |     .pipe(gulp.dest('./dist/'));
50 | });
51 | 
52 | gulp.task('style', function() {
53 |     return gulp.src([
54 |         'node_modules/bootstrap/dist/css/bootstrap.css'
55 |     ])
56 |     .pipe(gulp.dest('./dist/'));
57 | });
58 | 
59 | gulp.task('connect', function() {
60 |   connect.server({
61 |     root: 'dist',
62 |     port: 8080
63 |   });
64 | });
65 | 
66 | gulp.task('templates', function () {
67 |     return gulp.src([
68 |         'app/**/**.html'
69 |     ])
70 |     .pipe(ngTemplates({
71 |         filename: 'templates.js',
72 |         module: 'app.templates',
73 |         path: function (path, base) {
74 |             return path.replace(base, '');
75 |         }
76 |     }))
77 |     .pipe(gulp.dest('./dist/'));
78 | });
79 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angularjs-component-router",
 3 |   "version": "0.1.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "start": "gulp"
 7 |   },
 8 |   "author": "",
 9 |   "license": "ISC",
10 |   "dependencies": {
11 |     "@angular/router": "^0.2.0",
12 |     "bootstrap": "^3.3.5"
13 |   },
14 |   "devDependencies": {
15 |     "gulp": "^3.9.0",
16 |     "gulp-concat": "^2.6.0",
17 |     "gulp-connect": "^2.2.0",
18 |     "gulp-headerfooter": "^1.0.3",
19 |     "gulp-ng-templates": "0.0.6",
20 |     "gulp-sourcemaps": "^1.6.0",
21 |     "gulp-watch": "^4.3.5"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/views/index.html:
--------------------------------------------------------------------------------
 1 | <html ng-app="myApp">
 2 | <head>
 3 | 	<title>AngularJS Component Router Example</title>
 4 | 	<link href="bootstrap.css" rel="stylesheet">
 5 | </head>
 6 | <body>
 7 | 	<app></app>
 8 |   <script src="https://code.angularjs.org/snapshot/angular.js"></script>
 9 | 	<script src="dependencies.js"></script>
10 |   <script src="templates.js"></script>
11 |   <script src="bundle.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------