Merge branch 'master' of github.com:aniknafs/generator-angular-fullstack

Author: aniknafs

Diff for: daux/templates/layout/00_layout.php

@@ -25,6 +25,8 @@
     echo "<link href='$css' rel='stylesheet' type='text/css'>";
 } ?>
 
+    <link href="<?= $base_url; ?>docs.css" rel="stylesheet" type="text/css">
+
     <?php if ($params['html']['search']) {
     ?>
         <!-- Tipue Search -->

Diff for: docs/02_Developing/00_Starting_Up.md

@@ -80,7 +80,7 @@ webpack: bundle is now VALID.
 And then our default browser should open up to the app:
 
 
-<img src="/images/afs-screenshot.png" style="max-width: 800px; box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);" alt="App Screenshot">
+<img src="../images/afs-screenshot.png" alt="App Screenshot">
 
 
 Fantastic! We're now up and running with our Full-Stack Angular web application! So what can it do?
@@ -90,11 +90,29 @@ Fantastic! We're now up and running with our Full-Stack Angular web application!
 Assuming you scaffolded with a back-end database, you should see some 'features'. If you scaffolded with socket.io, you should see 'x' buttons next to each, and an input box. Try opening two browser windows to the same page side-by-side, and hitting the 'x' on one of the features. You should see the feature get removed on both web pages. Neat! This is because these database object changes are communicated to clients using socket.io.
 
 
-<img src="/images/socket.io-demo.gif" style="max-width: 800px; box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);" alt="Socket.io demo">
+<img src="../images/socket.io-demo.gif" alt="Socket.io demo screenshot">
 
 
 Neat. Let's see what else we can do.
 
-### Sign Up
+### Auth
 
-[TODO]
+Assuming you scaffolded with auth support, you should see a 'Sign Up' and a 'Log In' button at the top-right of your page. Let's go to the Log In page.
+
+You should see inputs for an email address and a password. When running your project in a devlopment environment, you'll get two user accounts automatically generated:
+
+ * Test User
+   * email: [email protected]
+   * password: test
+   * role: user
+ * Admin
+   * email: [email protected]
+   * password: admin
+   * role: admin
+
+Go ahead and log in with the admin account, so we can see the extra admin bits too. You should then get sent back to the home page, but should notice that the navbar looks a bit different:
+
+<img src="../images/logged-in.jpg" alt="Logged in as admin screenshot">
+
+
+First, at the top right, we see a greeting for our username, a cog icon (for user settings), and a logout button. Then, since we're an admin, we see a new 'Admin' state on the navbar. The admin section lists users and allows you to delete them. The user settings page allows you to change your password.

Diff for: docs/02_Developing/01_Adding_a_Route.md

@@ -0,0 +1,94 @@
+# Adding a Route
+
+Alright, now let's add another route to our app. We'll call it 'foo'. We can easily do this with the `yo angular-fullstack:route` subgenerator command:
+
+```bash
+$ yo angular-fullstack:route foo
+? What module name would you like to use? (aftestApp.foo)
+? What module name would you like to use? aftestApp.foo
+? Where would you like to create this route? (client/app/)
+? Where would you like to create this route? client/app/
+? What will the url of your route be? (/foo)
+? What will the url of your route be? /foo
+identical client\app\foo\foo.routes.js
+identical client\app\foo\foo.component.js
+identical client\app\foo\foo.component.spec.js
+identical client\app\foo\foo.html
+identical client\app\foo\foo.scss
+
+In the parent of this component, you should now import this component and add it as a dependency:
+
+    import FooComponent from './foo/foo.component';
+    ...
+    export angular.module('myParentModule', [FooComponent]);
+```
+
+We give it our route name ('foo'), and a few more details: the name of the Angular module to create ('myApp.foo'), which folder to put the route under ('client/app/foo/'), and the URL of the route ('localhost:3000/foo').
+
+This will create an Angular 1.5 component with an Angular module (`foo.component.js`), a template file (`foo.html`), a CSS file (`foo.scss`), a unit test file (`foo.component.spec.js`), and a routing file (`foo.routes.js`).
+
+Since we're using Webpack, We'll need to import our component somewhere. Since this is a generic app route (and for simplicity), we'll import it in `app.js`, under our root Angular module, like so:
+
+`client/app/app.js`
+```js
+...
+import FooModule from './foo/foo.component';
+angular.module('aftestApp', [
+  ...
+  main,
+  FooModule,
+])
+  .config(routeConfig)
+  .run(...);
+
+angular.element(document)
+  .ready(() => {
+    angular.bootstrap(document, ['aftestApp'], {
+      strictDi: true
+    });
+  });
+```
+
+Now that we've imported our new Angular module and added it to the dependency list of our root Angular module, we should be able to navigate to `http://localhost:3000/foo` and see our new route:
+
+<img src="../images/foo-route.jpg" alt="Foo route screenshot">
+
+It's not a very impressive page right now, but it works.
+
+Now, our user's aren't going to know to go to the `/foo` route. Let's add a navbar entry for it.
+
+`client/components/navbar/navbar.component.js`
+```js
+import angular from 'angular';
+
+export class NavbarComponent {
+  menu = [{
+    title: 'Home',
+    state: 'main'
+  }, {
+    title: 'Foo',
+    state: 'foo'
+  }];
+  isCollapsed = true;
+
+  constructor(Auth) {
+    'ngInject';
+    this.isLoggedIn = Auth.isLoggedInSync;
+    this.isAdmin = Auth.isAdminSync;
+    this.getCurrentUser = Auth.getCurrentUserSync;
+  }
+}
+
+export default angular.module('directives.navbar', [])
+  .component('navbar', {
+    template: require('./navbar.html'),
+    controller: NavbarComponent
+  })
+  .name;
+```
+
+Easy enough. Now we should see our entry for 'Foo' in our navbar. It should also be highlighted if you're still on the '/foo' route.
+
+<img src="../images/foo-route-navbar.jpg" alt="Foo route screenshot">
+
+You can read about all the other subgenerators that are available in the [Generators](../Generators) section of the docs.

Diff for: docs/docs.css

@@ -0,0 +1,8 @@
+.s-content img {
+    max-width: 800px;
+    width: 100%;
+    margin-bottom: 20px;
+    box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
+        0px 10px 14px 1px rgba(0, 0, 0, 0.14),
+        0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+}

Diff for: docs/generators/app.md

@@ -4,6 +4,7 @@ Sets up a new AngularJS + Express app, generating all the boilerplate you need t
 Usage:
 ```bash
 Usage:
+  yo angular-fullstack [options] [<name>]
   yo angular-fullstack:app [options] [<name>]
 
 Options:

Diff for: docs/generators/route.md

@@ -20,9 +20,9 @@ Produces:
 Your new `myroute.component.js` will contain Angular code registering a new module, defaulting to `myApp.myRoute`. The default export of the component will be this name. Make sure to import this name in a parent Angular module, and add it as a dependency like so:
 
 ```js
-import myRouteComponent from './myroute/myroute.component';
+import MyRouteModule from './myroute/myroute.component';
 
 ...
 
-angular.module('myApp.myParent', [myRouteComponent]);
+angular.module('myApp.myParent', [MyRouteModule]);
 ```

Diff for: docs/images/foo-route-navbar.jpg

@@ -43,7 +43,7 @@
     "babel-plugin-transform-flow-strip-types": "^6.14.0",
     "bluebird": "^3.4.5",
     "chalk": "^1.1.0",
-    "generator-ng-component": "~1.0.3",
+    "generator-ng-component": "~1.0.4",
     "glob": "^7.0.5",
     "gulp-babel": "^6.1.2",
     "gulp-beautify": "^2.0.0",