From e2dc415b2a5eaf9fb0d7540927366bad0ecab374 Mon Sep 17 00:00:00 2001 From: Andrew Koroluk Date: Sun, 17 Jun 2018 01:00:01 -0700 Subject: [PATCH] docs(v5): update docs for v5 --- docs/content/developing/01_Adding_a_Route.md | 102 ++++--------- docs/content/developing/index.md | 152 ++++++++++--------- docs/content/get-started/index.md | 6 +- docs/content/get-started/overview.md | 23 +-- 4 files changed, 126 insertions(+), 157 deletions(-) diff --git a/docs/content/developing/01_Adding_a_Route.md b/docs/content/developing/01_Adding_a_Route.md index 99b09274e..ec2ce68be 100644 --- a/docs/content/developing/01_Adding_a_Route.md +++ b/docs/content/developing/01_Adding_a_Route.md @@ -1,59 +1,29 @@ -> ATTENTION: THIS PAGE IS OUT-OF-DATE - # 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: +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 -create client\app\foo\foo.component.js -create client\app\foo\foo.component.spec.js -create client\app\foo\foo.html -create 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]); +? Where would you like to create this route? client/app/ +? What will the url of your route be? example + create client\app\foo\foo.component.js + create client\app\foo\foo.component.test.js + create client\app\foo\foo.html + create client\app\foo\foo.module.js ``` -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 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: +We give it our route name ('foo'), which folder to put the route under ('client/app/foo/'), and the URL of the route +('/foo'). -`client/app/app.js` -```js -... -import FooModule from './foo/foo.component'; -angular.module('aftestApp', [ - ... - main, - FooModule, -]) - .config(routeConfig) - .run(...); +This will create an Angular component (`foo.component.js`) with an Angular module (`foo.module.js`), a template file +(`foo.html`), a CSS file (`foo.scss`), and a unit test file (`foo.component.test.js`). -angular.element(document) - .ready(() => { - angular.bootstrap(document, ['aftestApp'], { - strictDi: true - }); - }); -``` +Since generator version 5.0.0, the generator should automatically import the new route's module into the root app +module. -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: +Now we should be able to navigate to `http://localhost:8080/foo` and see our new route: Foo route screenshot @@ -63,36 +33,28 @@ Now, our user's aren't going to know to go to the `/foo` route. Let's add a navb `client/components/navbar/navbar.component.js` ```js -import angular from 'angular'; +//... +@Component({ + selector: 'navbar', + template: require('./navbar.html'), +}) 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; - } + menu = [{ + title: 'Home', + 'link': '/home', + }, { + // Add here + title: 'Foo', + 'link': '/foo', + }]; + //... } - -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. +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. Foo route screenshot -You can read about all the other subgenerators that are available in the [Generators](../Generators) section of the docs. + diff --git a/docs/content/developing/index.md b/docs/content/developing/index.md index b5361cdf5..16e2e9f1d 100644 --- a/docs/content/developing/index.md +++ b/docs/content/developing/index.md @@ -5,94 +5,95 @@ sort: 0 # Starting your app -Now that you've gone through everything in the Getting Started section, lets get our app up and running. We do this by running the following: +Now that you've gone through everything in the Getting Started section, lets get our app up and running. We do this by +running the following: ```bash -$ gulp serve +$ npm run start:server +``` +and +```bash +$ npm run start:client ``` We should see something like this spit out after it: ```bash -$ gulp serve -[12:15:45] Requiring external module babel-register -(node:23392) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. -[12:16:03] Using gulpfile ~/aftest/gulpfile.babel.js -(node:23392) DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead. -(node:23392) DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead. -[12:16:04] Starting 'serve'... -[12:16:04] Starting 'clean:tmp'... -[12:16:04] Starting 'lint:scripts'... -[12:16:04] Starting 'lint:scripts:client'... -[12:16:04] Starting 'lint:scripts:server'... -[12:16:04] Starting 'inject'... -[12:16:04] Starting 'inject:scss'... -[12:16:04] Starting 'copy:fonts:dev'... -[12:16:04] Starting 'env:all'... -[12:16:04] Finished 'env:all' after 63 ms -[12:16:04] Finished 'clean:tmp' after 370 ms -[12:16:06] gulp-inject 6 files into app.scss. -[12:16:06] Finished 'inject:scss' after 2.63 s -[12:16:06] Finished 'inject' after 2.63 s -[12:16:08] Finished 'copy:fonts:dev' after 4.04 s -[12:16:08] Finished 'lint:scripts:server' after 4.74 s -[12:16:09] Finished 'lint:scripts:client' after 5.33 s -[12:16:09] Finished 'lint:scripts' after 5.33 s -[12:16:09] Starting 'start:server'... -[12:16:09] Finished 'start:server' after 16 ms -[12:16:09] Starting 'start:client'... -[nodemon] 1.9.2 -[nodemon] to restart at any time, enter `rs` -[nodemon] watching: /home/user/aftest/server/**/* -[nodemon] starting `node server` -(node:22180) DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead. -(node:22180) DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead. -Express server listening on 9000, in development mode -(node:22180) DeprecationWarning: crypto.pbkdf2 without specifying a digest is deprecated. Please specify a digest -[12:16:18] Finished 'start:client' after 8.97 s -[12:16:18] Starting 'watch'... -[12:16:18] Finished 'watch' after 234 ms -[12:16:18] Finished 'serve' after 15 s +$ npm run start:server + +> myapp@0.0.0 start:server ~/myapp +> node server + +finished populating things finished populating users -webpack: wait until bundle finished: / -[BS] Proxying: http://localhost:9000 -[BS] Access URLs: - ---------------------------------- - Local: http://localhost:3000 - External: http://10.0.75.1:3000 - ---------------------------------- - UI: http://localhost:3002 - UI External: http://10.0.75.1:3002 - ---------------------------------- -webpack done hook -Hash: eb4e167635a3952856e9 -Version: webpack 1.13.1 -Time: 16538ms - Asset Size Chunks Chunk Names - app.bundle.js 2.83 MB 0 [emitted] app - polyfills.bundle.js 209 kB 1 [emitted] polyfills - vendor.bundle.js 2.62 MB 2 [emitted] vendor - app.bundle.js.map 3.34 MB 0 [emitted] app -polyfills.bundle.js.map 271 kB 1 [emitted] polyfills - vendor.bundle.js.map 3.06 MB 2 [emitted] vendor - ../client/app.html 1.39 kB [emitted] +Express server listening on 9000, in development mode +``` + +```bash +$ npm run start:client + +> myapp@0.0.0 start:client ~/myapp +> webpack-dev-server --config webpack.dev.js + +i ｢wds｣: Project is running at http://localhost:8080/ +i ｢wds｣: webpack output is served from / +i ｢wds｣: Content not from webpack is served from ./client/ +i ｢wds｣: 404s will fallback to app.html + +[at-loader] Using typescript@2.9.2 from typescript and "tsconfig.json" from ~/myapp/tsconfig.json. + + +[at-loader] Checking started in a separate process... + +[at-loader] Ok, 0.267 sec. +‼ ｢wdm｣: Hash: 086b125c69250600bc89 +Version: webpack 4.12.0 +Time: 23788ms +Built at: 2018-06-16 23:52:27 + Asset Size Chunks Chunk Names + app.bundle.js 6.07 MiB app [emitted] app + polyfills.bundle.js 481 KiB polyfills [emitted] polyfills + vendor.bundle.js 880 KiB vendor [emitted] vendor + app.bundle.js.map 6.24 MiB app [emitted] app +polyfills.bundle.js.map 551 KiB polyfills [emitted] polyfills + vendor.bundle.js.map 1.03 MiB vendor [emitted] vendor + ../client/app.html 1.31 KiB [emitted] +Entrypoint app = app.bundle.js app.bundle.js.map +Entrypoint polyfills = polyfills.bundle.js polyfills.bundle.js.map +Entrypoint vendor = vendor.bundle.js vendor.bundle.js.map + +WARNING in ./node_modules/@angular/core/fesm5/core.js 4826:15-36 +System.import() is deprecated and will be removed soon. Use import() instead. +For more info visit https://webpack.js.org/guides/code-splitting/ + @ ./client/app/app.ts 3:0-47 + @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./client/app/app.ts + +WARNING in ./node_modules/@angular/core/fesm5/core.js 4838:15-102 +System.import() is deprecated and will be removed soon. Use import() instead. +For more info visit https://webpack.js.org/guides/code-splitting/ + @ ./client/app/app.ts 3:0-47 + @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./client/app/app.ts Child html-webpack-plugin for "..\client\app.html": - Asset Size Chunks Chunk Names - ../client/app.html 2.69 kB 0 -webpack: bundle is now VALID. + Asset Size Chunks Chunk Names + ../client/app.html 28.5 KiB 0 + Entrypoint undefined = ../client/app.html +i ｢wdm｣: Compiled with warnings. ``` -And then our default browser should open up to the app: +(The warnings are from Angular. See [#21560](https://github.com/angular/angular/issues/21560)) +And then our default browser should open up to the app: App Screenshot - Fantastic! We're now up and running with our Full-Stack Angular web application! So what can it do? ### Homepage -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. +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. Socket.io demo screenshot @@ -102,9 +103,11 @@ Neat. Let's see what else we can do. ### Auth -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. +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: +You should see inputs for an email address and a password. When running your project in a development environment, +you'll get two user accounts automatically generated: * Test User * email: test@example.com @@ -115,11 +118,14 @@ You should see inputs for an email address and a password. When running your pro * 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: +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: 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. +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. [Next: Adding a Route](01_Adding_a_Route) diff --git a/docs/content/get-started/index.md b/docs/content/get-started/index.md index c15228468..a6da52156 100644 --- a/docs/content/get-started/index.md +++ b/docs/content/get-started/index.md @@ -16,9 +16,9 @@ npm install -g yo gulp-cli generator-angular-fullstack ### MongoDB If you're using MongoDB (which you probably are), you'll have to install it from [here](https://www.mongodb.com/download-center#community). -You should then run the `mongod` process, which is in `/MongoDB/Server//bin/`. You'll also want a `/data/db` folder -somewhere for Mongo to put your database in. It would be wise to make a script to automate this command, and maybe even run this script on -your computer's startup. Example: +Make sure you get at least version 3. You should then run the `mongod` process, which is in `/MongoDB/Server//bin/`. +You'll also want a `/data/db` folder somewhere for Mongo to put your database in. It would be wise to make a script to automate this command, +and maybe even run this script on your computer's startup. Example: ```bash #!/bin/bash diff --git a/docs/content/get-started/overview.md b/docs/content/get-started/overview.md index d136bb596..7f1428492 100644 --- a/docs/content/get-started/overview.md +++ b/docs/content/get-started/overview.md @@ -34,18 +34,18 @@ webpack.make.js // main file for Webpack configuration ``` │ .eslintrc // eslint config for client files -│ polyfills.js // imports of polyfills │ app.template.html // template for the root HTML file of your app │ ├───app -│ │ app.config.js // contains app-wide configuration code -│ │ app.constants.js // gets injected with constants from `server/config/environment/shared.js` -│ │ app.{js,ts} // root JavaScript file of your app │ │ app.{css,scss,stylus,less} // root CSS file of your app +│ │ app.component.{js,ts} // root Angular component for your app +│ │ app.constants.js // gets injected with constants from `server/config/environment/shared.js` +│ │ app.{js,ts} // JavaScript entry point +│ │ app.module.{js,ts} // root Angular module for your app +│ │ polyfills.js // imports of polyfills │ │ │ ├───account // pages related to login / signup / user settings -│ │ │ account.routes.js // route information -│ │ │ index.js // account module root +│ │ │ account.module.js // account module root │ │ │ │ │ ├───login │ │ ├───settings @@ -55,15 +55,15 @@ webpack.make.js // main file for Webpack configuration │ │ │ └───main // main component, homepage │ -├───assets // where static assets are stored +├───assets // where static assets (images/etc) are stored │ └───components + │ directives.module.js // combined module for directives ├───auth │ auth.module.js // module containing auth components │ auth.service.js // authentication service - │ interceptor.service.js // intercepts requests and adds tokens if needed. Also redirects 401s to the login page. - │ router.decorator.js // facilitates auth-based routing configuration - │ user.service.js // user resource service + │ auth.guard.js // Used to guard protected routes from users without access + │ user.service.js // User service │ ├───footer │ @@ -74,6 +74,7 @@ webpack.make.js // main file for Webpack configuration ├───oauth-buttons // buttons for oauth login on signup / login pages │ ├───socket + │ primus.mock.js // mock for Primus │ socket.mock.js // mock service for unit testing │ socket.service.js // service for Socket IO integration │ @@ -130,4 +131,4 @@ webpack.make.js // main file for Webpack configuration End-To-End testing files (use by [Protractor](https://github.com/angular/protractor) with [Mocha](https://github.com/mochajs/mocha)) -[Babel]: https://babeljs.io/ +[Babel]: http