1. Start installing the angular cli:
$ sudo npm install -g angular-cli
2. in the app directory, run the below command in order to create the angular "app" folder, which is the source for the frontend angular app:
$ ng new angular-src
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.
To disable this warning use "ng set --global warnings.packageDeprecation=false".
installing ng2
create .editorconfig
create README.md
create src/app/app.component.css
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/app.module.ts
create src/assets/.gitkeep
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico
create src/index.html
create src/main.ts
create src/polyfills.ts
create src/styles.css
create src/test.ts
create src/tsconfig.json
create angular-cli.json
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.json
create .gitignore
create karma.conf.js
create package.json
create protractor.conf.js
create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'angular-src' successfully created.
3. in the newly created folder "angular-src" edit the file "angular-cli.json" as below:
"apps": [
{
"root": "src",
"outDir": "dist",
change "outDir" from "dist" to "../public" which is an existing directory in the root app directory;
4. Some comments on files that are generated by Angular:
a) angular-src/src/app/app.module.ts -> declaration of all modules / components / services:
components -> declaration section;
modules -> imports section;
services -> providers section;
b) angular-src/src/app/app.component.ts -> has a decorator for the component, allowing to add metadata e.g. selector (html tag), template (html), style (css) and main class for the component;
5. Components and services can be generated by angular-cli e.g.: create a separated directory for components (angular-src/src/app/components) and, once into the components directory, run the following command:
$ ng g component <component_name>
where g stands for "generate";
e.g.: create component home:
$ ng g component home
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.
To disable this warning use "ng set --global warnings.packageDeprecation=false".
installing component
create src/app/components/home/home.component.css
create src/app/components/home/home.component.html
create src/app/components/home/home.component.spec.ts
create src/app/components/home/home.component.ts
update src/app/app.module.ts
At the same time, the app modules file is updated with the newly created component;
6. Router definition:
a) in angular-src/src/app/app.module.ts -> import RouterModule and Routes from '@angular/router';
import {RouterModule, Routes} from '@angular/router';
b) include the router modules in the imports section;
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes)
]
c) define appRoutes object array with all the routes, e.g.:
const appRoutes: Routes = [
{ path: "", component: HomeComponent },
{ path: "register", component: RegisterComponent },
{ path: "login", component: LoginComponent },
{ path: "dashboard", component: DashboardComponent },
{ path: "profile", component: ProfileComponent }
]
d) change app.component.html in order to add the router tag:
<h1>
{{title}}
</h1>
<app-navbar></app-navbar>
<div class="container">
<router-outlet></router-outlet>
</div>
7. Create the navbar component and the corresponding links to home, register and login:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MEAN App</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/']">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/login']">Login</a></li>
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/register']">Register</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
References:
-
https://youtu.be/zrViDpWiNVE?list=PLillGF-RfqbZMNtaOXJQiDebNXjVapWPZ
-
http://getbootstrap.com/examples/starter-template/
-
https://bootswatch.com/
