Skip to content

U
UsersDojoNg
Commit 14bca496 by Harangozó Péter
Options

added bootsrap themes

parent 1d5c25ab
Showing with 68 additions and 17 deletions
package.json
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
"@angular/platform-browser": "^2.4.0", "@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0", "@angular/platform-browser-dynamic": "^2.4.0",
"@angular/router": "^3.4.0", "@angular/router": "^3.4.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.21",
"core-js": "^2.4.1", "core-js": "^2.4.1",
"rxjs": "^5.1.0", "rxjs": "^5.1.0",
"zone.js": "^0.7.6" "zone.js": "^0.7.6"
......
src/app/app.component.html
<h1> <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary bg-faded ">
{{title}} <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav"
</h1> aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<router-outlet></router-outlet> <span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Users Dojo Angular2 TS</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" routerLink="" routerLinkActive="active">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="users" routerLinkActive="active">Users</a></li>
</ul>
</div>
</nav>
<div class="main-content">
<hr>
<router-outlet></router-outlet>
<hr>
</div>
\ No newline at end of file
src/app/app.component.less
.main-content{
width: 95%;
margin: auto;
}
\ No newline at end of file
src/app/app.module.ts
...@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser'; ...@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'; import { HttpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
......
src/app/modules/users/services/user.service.ts
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http'; import { Headers, Http } from '@angular/http';
import { User } from './User'; import { User } from '../models/user';
import 'rxjs/add/operator/toPromise'; import 'rxjs/add/operator/toPromise';
@Injectable() @Injectable()
export class UserService { export class UserService {
......
src/app/modules/users/users.component.html
<ul class="users"> <h2>Users</h2>
<li *ngFor="let user of users"> <hr>
<span class="badge">{{user.id}}</span> <button type="button" class="btn btn-sm btn-outline-primary">Add User</button>
<span>{{user.UserName}}</span> <table class="table table-striped">
</li> <thead>
</ul> <tr>
\ No newline at end of file <th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<th scope="row">{{user.id}}</th>
<td>{{user.FirstName}}</td>
<td>{{user.LastName}}</td>
<td>{{user.UserName}}</td>
<td>
<button type="button" class="btn btn-sm btn-outline-warning">Edit</button>
<button type="button" class="btn btn-sm btn-outline-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
\ No newline at end of file
src/app/modules/users/users.component.ts
...@@ -19,10 +19,7 @@ export class UsersComponent implements OnInit { ...@@ -19,10 +19,7 @@ export class UsersComponent implements OnInit {
getUsers(): void { getUsers(): void {
this.userService this.userService
.getUsers() .getUsers()
.then(users => { .then(users => this.users = users);
debugger;
this.users = users
});
} }
ngOnInit() { ngOnInit() {
......
src/index.html
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<meta charset="utf-8"> <meta charset="utf-8">
<title>UsersDojoNg</title> <title>UsersDojoNg</title>
<base href="/"> <base href="/">
...@@ -8,7 +17,9 @@ ...@@ -8,7 +17,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head> </head>
<body> <body>
<app-root>Loading...</app-root> <app-root></app-root>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment