-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
117 lines (101 loc) · 21.3 KB
/
index.html
File metadata and controls
117 lines (101 loc) · 21.3 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></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/01_Adding_a_Route"}"><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/01_Adding_a_Route"}"><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 sidebar-item--open"><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="#adding-a-route">Adding a Route</a></li></ul></div></div></nav></div><section class="page__content"><h1></h1><a class="page__edit" href="https://github.com/angular-fullstack/generator-angular-fullstack/edit/master/docs/content/developing/01_Adding_a_Route.md">Edit this Page   <i class="icon-edit"></i></a><div><blockquote>
<p>ATTENTION: THIS PAGE IS OUT-OF-DATE</p>
</blockquote>
<h1 class="header"><a class="anchor" href="#adding-a-route" id="adding-a-route"></a><span class="text">Adding a Route</span><a class="icon-link" href="#adding-a-route"></a></h1>
<p>Alright, now let's add another route to our app. We'll call it 'foo'. We can easily do this with the <code>yo angular-fullstack:route</code> subgenerator command:</p>
<pre><code class="lang-bash">$ yo angular-fullstack:route foo
? What module name would you like to use? <span class="token punctuation">(</span>aftestApp.foo<span class="token punctuation">)</span>
? What module name would you like to use? aftestApp.foo
? Where would you like to create this route? <span class="token punctuation">(</span>client/app/<span class="token punctuation">)</span>
? Where would you like to create this route? client/app/
? What will the url of your route be? <span class="token punctuation">(</span>/foo<span class="token punctuation">)</span>
? 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 <span class="token function">import</span> this component and add it as a dependency:
<span class="token function">import</span> FooComponent from <span class="token string">'./foo/foo.component'</span><span class="token punctuation">;</span>
<span class="token punctuation">..</span>.
<span class="token function">export</span> angular.module<span class="token punctuation">(</span><span class="token string">'myParentModule'</span>, <span class="token punctuation">[</span>FooComponent<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>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').</p>
<p>This will create an Angular component with an Angular module (<code>foo.component.js</code>), a template file (<code>foo.html</code>), a CSS
file (<code>foo.scss</code>), a unit test file (<code>foo.component.spec.js</code>), and a routing file (<code>foo.routes.js</code>).</p>
<p>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 <code>app.js</code>, under our root Angular module, like so:</p>
<p><code>client/app/app.js</code></p>
<pre><code class="lang-js"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token keyword">import</span> FooModule <span class="token keyword">from</span> <span class="token string">'./foo/foo.component'</span><span class="token punctuation">;</span>
angular<span class="token punctuation">.</span><span class="token function">module</span><span class="token punctuation">(</span><span class="token string">'aftestApp'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
main<span class="token punctuation">,</span>
FooModule<span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span>routeConfig<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
angular<span class="token punctuation">.</span><span class="token function">element</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
angular<span class="token punctuation">.</span><span class="token function">bootstrap</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'aftestApp'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
strictDi<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>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 <code>http://localhost:3000/foo</code> and see our new route:</p>
<p><img src="/assets/foo-route.jpg" alt="Foo route screenshot"></p>
<p>It's not a very impressive page right now, but it works.</p>
<p>Now, our user's aren't going to know to go to the <code>/foo</code> route. Let's add a navbar entry for it.</p>
<p><code>client/components/navbar/navbar.component.js</code></p>
<pre><code class="lang-js"><span class="token keyword">import</span> angular <span class="token keyword">from</span> <span class="token string">'angular'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">NavbarComponent</span> <span class="token punctuation">{</span>
menu <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Home'</span><span class="token punctuation">,</span>
state<span class="token punctuation">:</span> <span class="token string">'main'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Foo'</span><span class="token punctuation">,</span>
state<span class="token punctuation">:</span> <span class="token string">'foo'</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
isCollapsed <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>Auth<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token string">'ngInject'</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>isLoggedIn <span class="token operator">=</span> Auth<span class="token punctuation">.</span>isLoggedInSync<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>isAdmin <span class="token operator">=</span> Auth<span class="token punctuation">.</span>isAdminSync<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>getCurrentUser <span class="token operator">=</span> Auth<span class="token punctuation">.</span>getCurrentUserSync<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> angular<span class="token punctuation">.</span><span class="token function">module</span><span class="token punctuation">(</span><span class="token string">'directives.navbar'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'navbar'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
template<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./navbar.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
controller<span class="token punctuation">:</span> NavbarComponent
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
</code></pre>
<p>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.</p>
<p><img src="/assets/foo-route-navbar.jpg" alt="Foo route screenshot"></p>
<p>You can read about all the other subgenerators that are available in the <a href="../Generators">Generators</a> section of the docs.</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="/4b6cdfb96620bba0381121371b7114f6.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>