Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
135 lines (125 loc) · 23.1 KB
/
index.html
File metadata and controls
135 lines (125 loc) · 23.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Starting Up</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#2B3A42">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:200,400,400i,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<link href="/093c5e94a96399fbbcb5.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
</head>
<body>
<div id="site" class="site"><div class="interactive" id="components/navigation/navigation.jsx" data-props="{"sections":[{"title":"Get-Started","url":"get-started","pages":[{"title":"Installation","url":"get-started/installation"},{"title":"Running","url":"get-started/running"},{"title":"Project Overview","url":"get-started/overview"}]},{"title":"Guides","url":"guides","pages":[{"title":"asdf","url":"guides/asdf"}]},{"title":"Developing","url":"developing","pages":[{"title":"developing/01_Adding_a_Route","url":"developing/01_Adding_a_Route"}]},{"title":"Deployment","url":"deployment","pages":[{"title":"deployment/gcloud-deployment","url":"deployment/gcloud-deployment"}]},{"title":"Examples","url":"examples","pages":[{"title":"Heroku Deploy","url":"examples/Heroku_Deployment"},{"title":"IIS","url":"examples/IIS"}]},{"title":"Generators","url":"generators","pages":[{"title":"App","url":"generators/app"},{"title":"Route","url":"generators/route"},{"title":"Service","url":"generators/service"},{"title":"Component","url":"generators/component"},{"title":"Controller","url":"generators/controller"},{"title":"Decorator","url":"generators/decorator"},{"title":"Directive","url":"generators/directive"},{"title":"Endpoint","url":"generators/endpoint"},{"title":"Filter","url":"generators/filter"},{"title":"Heroku","url":"generators/heroku"},{"title":"Openshift","url":"generators/openshift"}]},{"title":"Other","url":"/","pages":[]}],"pageUrl":"developing/"}"><header class="navigation"><div class="container navigation__inner"></div><div class="navigation__bottom"><div class="container navigation__inner"></div></div></header></div><div class="interactive" id="components/sidebar-mobile/sidebar-mobile.jsx" data-props="{"sections":[{"title":"Get-Started","url":"get-started","pages":[{"title":"Installation","url":"get-started/installation"},{"title":"Running","url":"get-started/running"},{"title":"Project Overview","url":"get-started/overview"}]},{"title":"Guides","url":"guides","pages":[{"title":"asdf","url":"guides/asdf"}]},{"title":"Developing","url":"developing","pages":[{"title":"developing/01_Adding_a_Route","url":"developing/01_Adding_a_Route"}]},{"title":"Deployment","url":"deployment","pages":[{"title":"deployment/gcloud-deployment","url":"deployment/gcloud-deployment"}]},{"title":"Examples","url":"examples","pages":[{"title":"Heroku Deploy","url":"examples/Heroku_Deployment"},{"title":"IIS","url":"examples/IIS"}]},{"title":"Generators","url":"generators","pages":[{"title":"App","url":"generators/app"},{"title":"Route","url":"generators/route"},{"title":"Service","url":"generators/service"},{"title":"Component","url":"generators/component"},{"title":"Controller","url":"generators/controller"},{"title":"Decorator","url":"generators/decorator"},{"title":"Directive","url":"generators/directive"},{"title":"Endpoint","url":"generators/endpoint"},{"title":"Filter","url":"generators/filter"},{"title":"Heroku","url":"generators/heroku"},{"title":"Openshift","url":"generators/openshift"}]},{"title":"Other","url":"/","pages":[]}]}"><nav class="sidebar-mobile"><div class="sidebar-mobile__toggle"></div><div class="sidebar-mobile__content"><i class="sidebar-mobile__close icon-cross"></i><div class="sidebar-mobile__section "><a href="/get-started" class="sidebar-mobile__section-header"></a><a href="/get-started/installation" class="sidebar-mobile__page "></a><a href="/get-started/running" class="sidebar-mobile__page "></a><a href="/get-started/overview" class="sidebar-mobile__page "></a></div><div class="sidebar-mobile__section "><a href="/guides" class="sidebar-mobile__section-header"></a><a href="/guides/asdf" class="sidebar-mobile__page "></a></div><div class="sidebar-mobile__section "><a href="/developing" class="sidebar-mobile__section-header"></a><a href="/developing/01_Adding_a_Route" class="sidebar-mobile__page "></a></div><div class="sidebar-mobile__section "><a href="/deployment" class="sidebar-mobile__section-header"></a><a href="/deployment/gcloud-deployment" class="sidebar-mobile__page "></a></div><div class="sidebar-mobile__section "><a href="/examples" class="sidebar-mobile__section-header"></a><a href="/examples/Heroku_Deployment" class="sidebar-mobile__page "></a><a href="/examples/IIS" class="sidebar-mobile__page "></a></div><div class="sidebar-mobile__section "><a href="/generators" class="sidebar-mobile__section-header"></a><a href="/generators/app" class="sidebar-mobile__page "></a><a href="/generators/route" class="sidebar-mobile__page "></a><a href="/generators/service" class="sidebar-mobile__page "></a><a href="/generators/component" class="sidebar-mobile__page "></a><a href="/generators/controller" class="sidebar-mobile__page "></a><a href="/generators/decorator" class="sidebar-mobile__page "></a><a href="/generators/directive" class="sidebar-mobile__page "></a><a href="/generators/endpoint" class="sidebar-mobile__page "></a><a href="/generators/filter" class="sidebar-mobile__page "></a><a href="/generators/heroku" class="sidebar-mobile__page "></a><a href="/generators/openshift" class="sidebar-mobile__page "></a></div><div class="sidebar-mobile__section "><a href="//" target="_blank" class="sidebar-mobile__section-header"></a></div></div></nav></div><div class="container page"><aside class="sidecar"><a href="//github.com/angular-fullstack/generator-angular-fullstack" target="_blank" class="sidecar__link sidecar__link--github"><span class="sidecar__label">Fork the Repo</span><i class="sidecar__icon icon-github"></i></a><a class="sidecar__link sidecar__link--gitter js-gitter-toggle-chat-button"><span class="sidecar__label">Find Help</span><i class="sidecar__icon icon-gitter"></i></a><a href="//stackoverflow.com/questions/tagged/generator-angular-fullstack" target="_blank" class="sidecar__link sidecar__link--so"><span class="sidecar__label">Stack Overflow</span><i class="sidecar__icon icon-stack-overflow"></i></a></aside><div class="interactive" id="components/sidebar/sidebar.jsx" data-props="{"sectionName":"developing","pages":[{"url":"developing/01_Adding_a_Route","anchors":[{"title":"Adding a Route","id":"adding-a-route"}]}],"currentPage":"developing/"}"><nav class="sidebar"><div class="sidebar__inner"><h3 class="sidebar-item__version">Version 4.1.x</h3><div class="sidebar-item sidebar-item--empty "><a href="/developing" class="sidebar-item__title"></a><i class="sidebar-item__toggle icon-chevron-down"></i><ul class="sidebar-item__anchors"></ul></div><div class="sidebar-item "><a href="/developing/01_Adding_a_Route" class="sidebar-item__title"></a><i class="sidebar-item__toggle icon-chevron-down"></i><ul class="sidebar-item__anchors"><li class="sidebar-item__anchor"><a href="/developing/01_Adding_a_Route#adding-a-route">Adding a Route</a></li></ul></div></div></nav></div><section class="page__content"><h1>Starting Up</h1><a class="page__edit" href="https://github.com/angular-fullstack/generator-angular-fullstack/edit/master/docs/content/developing/index.md">Edit this Page   <i class="icon-edit"></i></a><div><h1 class="header"><a class="anchor" href="#starting-your-app" id="starting-your-app"></a><span class="text">Starting your app</span><a class="icon-link" href="#starting-your-app"></a></h1>
<p>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:</p>
<pre><code class="lang-bash">$ gulp serve
</code></pre>
<p>We should see something like this spit out after it:</p>
<pre><code class="lang-bash">$ gulp serve
<span class="token punctuation">[</span>12:15:45<span class="token punctuation">]</span> Requiring external module babel-register
<span class="token punctuation">(</span>node:23392<span class="token punctuation">)</span> fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a <span class="token function">more</span> recent version.
<span class="token punctuation">[</span>12:16:03<span class="token punctuation">]</span> Using gulpfile ~/aftest/gulpfile.babel.js
<span class="token punctuation">(</span>node:23392<span class="token punctuation">)</span> DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead.
<span class="token punctuation">(</span>node:23392<span class="token punctuation">)</span> DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Starting <span class="token string">'serve'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Starting <span class="token string">'clean:tmp'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Starting <span class="token string">'lint:scripts'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Starting <span class="token string">'lint:scripts:client'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Starting <span class="token string">'lint:scripts:server'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Starting <span class="token string">'inject'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Starting <span class="token string">'inject:scss'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Starting <span class="token string">'copy:fonts:dev'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Starting <span class="token string">'env:all'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Finished <span class="token string">'env:all'</span> after 63 ms
<span class="token punctuation">[</span>12:16:04<span class="token punctuation">]</span> Finished <span class="token string">'clean:tmp'</span> after 370 ms
<span class="token punctuation">[</span>12:16:06<span class="token punctuation">]</span> gulp-inject 6 files into app.scss.
<span class="token punctuation">[</span>12:16:06<span class="token punctuation">]</span> Finished <span class="token string">'inject:scss'</span> after 2.63 s
<span class="token punctuation">[</span>12:16:06<span class="token punctuation">]</span> Finished <span class="token string">'inject'</span> after 2.63 s
<span class="token punctuation">[</span>12:16:08<span class="token punctuation">]</span> Finished <span class="token string">'copy:fonts:dev'</span> after 4.04 s
<span class="token punctuation">[</span>12:16:08<span class="token punctuation">]</span> Finished <span class="token string">'lint:scripts:server'</span> after 4.74 s
<span class="token punctuation">[</span>12:16:09<span class="token punctuation">]</span> Finished <span class="token string">'lint:scripts:client'</span> after 5.33 s
<span class="token punctuation">[</span>12:16:09<span class="token punctuation">]</span> Finished <span class="token string">'lint:scripts'</span> after 5.33 s
<span class="token punctuation">[</span>12:16:09<span class="token punctuation">]</span> Starting <span class="token string">'start:server'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:09<span class="token punctuation">]</span> Finished <span class="token string">'start:server'</span> after 16 ms
<span class="token punctuation">[</span>12:16:09<span class="token punctuation">]</span> Starting <span class="token string">'start:client'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>nodemon<span class="token punctuation">]</span> 1.9.2
<span class="token punctuation">[</span>nodemon<span class="token punctuation">]</span> to restart at any time, enter <span class="token variable"><span class="token variable">`</span>rs<span class="token variable">`</span></span>
<span class="token punctuation">[</span>nodemon<span class="token punctuation">]</span> watching: /home/user/aftest/server/**/*
<span class="token punctuation">[</span>nodemon<span class="token punctuation">]</span> starting <span class="token variable"><span class="token variable">`</span>node server<span class="token variable">`</span></span>
<span class="token punctuation">(</span>node:22180<span class="token punctuation">)</span> DeprecationWarning: crypto.createCredentials is deprecated. Use tls.createSecureContext instead.
<span class="token punctuation">(</span>node:22180<span class="token punctuation">)</span> DeprecationWarning: crypto.Credentials is deprecated. Use tls.SecureContext instead.
Express server listening on 9000, <span class="token keyword">in</span> development mode
<span class="token punctuation">(</span>node:22180<span class="token punctuation">)</span> DeprecationWarning: crypto.pbkdf2 without specifying a digest is deprecated. Please specify a digest
<span class="token punctuation">[</span>12:16:18<span class="token punctuation">]</span> Finished <span class="token string">'start:client'</span> after 8.97 s
<span class="token punctuation">[</span>12:16:18<span class="token punctuation">]</span> Starting <span class="token string">'watch'</span><span class="token punctuation">..</span>.
<span class="token punctuation">[</span>12:16:18<span class="token punctuation">]</span> Finished <span class="token string">'watch'</span> after 234 ms
<span class="token punctuation">[</span>12:16:18<span class="token punctuation">]</span> Finished <span class="token string">'serve'</span> after 15 s
finished populating <span class="token function">users</span>
webpack: <span class="token function">wait</span> <span class="token keyword">until</span> bundle finished: /
<span class="token punctuation">[</span>BS<span class="token punctuation">]</span> Proxying: http://localhost:9000
<span class="token punctuation">[</span>BS<span class="token punctuation">]</span> 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 <span class="token keyword">done</span> hook
Hash: eb4e167635a3952856e9
Version: webpack 1.13.1
Time: 16538ms
Asset Size Chunks Chunk Names
app.bundle.js 2.83 MB 0 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> app
polyfills.bundle.js 209 kB 1 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> polyfills
vendor.bundle.js 2.62 MB 2 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> vendor
app.bundle.js.map 3.34 MB 0 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> app
polyfills.bundle.js.map 271 kB 1 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> polyfills
vendor.bundle.js.map 3.06 MB 2 <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span> vendor
<span class="token punctuation">..</span>/client/app.html 1.39 kB <span class="token punctuation">[</span>emitted<span class="token punctuation">]</span>
Child html-webpack-plugin <span class="token keyword">for</span> <span class="token string">"..\client\app.html"</span><span class="token keyword">:</span>
Asset Size Chunks Chunk Names
<span class="token punctuation">..</span>/client/app.html 2.69 kB 0
webpack: bundle is now VALID.
</code></pre>
<p>And then our default browser should open up to the app:</p>
<p><img src="../assets/afs-screenshot.png" alt="App Screenshot"></p>
<p>Fantastic! We're now up and running with our Full-Stack Angular web application! So what can it do?</p>
<h3 class="header"><a class="anchor" href="#homepage" id="homepage"></a><span class="text">Homepage</span><a class="icon-link" href="#homepage"></a></h3>
<p>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.</p>
<p><img src="../assets/socket.io-demo.gif" alt="Socket.io demo screenshot"></p>
<p>Neat. Let's see what else we can do.</p>
<h3 class="header"><a class="anchor" href="#auth" id="auth"></a><span class="text">Auth</span><a class="icon-link" href="#auth"></a></h3>
<p>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.</p>
<p>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:</p>
<ul>
<li>Test User<ul>
<li>email: test@example.com</li>
<li>password: test</li>
<li>role: user</li>
</ul>
</li>
<li>Admin<ul>
<li>email: admin@example.com</li>
<li>password: admin</li>
<li>role: admin</li>
</ul>
</li>
</ul>
<p>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:</p>
<p><img src="../assets/logged-in.jpg" alt="Logged in as admin screenshot"></p>
<p>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.</p>
<p><a href="01_Adding_a_Route">Next: Adding a Route</a></p>
</div><hr style="display:none;"><h3 style="display:none;">Contributors</h3><noscript></noscript></section></div><div class="footer"><div class="container footer__inner"><section class="footer__left"><a href="/get-started" class="footer__link">Get Started</a><a href="https://github.com/angular-fullstack" target="_blank" class="footer__link">Organization</a><a href="https://github.com/angular-fullstack/generator-angular-fullstack/blob/master/contributing.md" target="_blank" class="footer__link">Contribute</a></section><section class="footer__middle"><a href="/" class="footer__icon"><img src="/44c8aeaa24cb28d0a5c6a45de449fd7d.svg"></a></section><section class="footer__right"><a href="https://gitter.im/angular-fullstack/generator-angular-fullstack" target="_blank" class="footer__link">Support</a><a href="https://github.com/angular-fullstack/generator-angular-fullstack/releases" target="_blank" class="footer__link">Changelog</a></section></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-46921629-2', 'auto');ga('send', 'pageview');</script></div>
<script src="/f22fffdc14eaf45644a87e073b985fc6.js"></script>
<script>
((window.gitter = {}).chat = {}).options = {
room: 'angular-fullstack/generator-angular-fullstack',
activationElement: false
};
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
</body>
</html>
You can’t perform that action at this time.