Sample Booklist with Angular
This time, I tried booklist web page using this sample code. My final code is here.
First,
>ng new test1
>cd test1/src/app
Then add "book.ts", "mock-books.ts" from sample code above.
And modified index.html like below.
This time when I made angular project, I chose angular router so I must insert code "<base href = "/"> at head section.
And also replaced style.css from sample code above.
Then finally
>ng serve --open
>And it works!
This time, I tried stackblitz+my github url but didn't work.Stackblitz is very useful but there seemed some restriction.
I also tried live server of VSCode's extension but also didn't work. It might be that angular must run on node.js and live server seems to be just http-server so that seems to be the reason, I guess.
First,
>ng new test1
>cd test1/src/app
Then add "book.ts", "mock-books.ts" from sample code above.
And modified index.html like below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Test1</title> | |
| <base href="/"> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css" /> | |
| <!-- | |
| <script src="node_modules/core-js/client/shim.js"></script> | |
| <script src="node_modules/zone.js/dist/zone.js"></script> | |
| <script src="node_modules/systemjs/dist/system.src.js"></script> | |
| <script src="systemjs.config.js"></script> | |
| <script> | |
| System.import('src').catch(function (err) { | |
| console.error(err); | |
| }); | |
| </script> | |
| --> | |
| </head> | |
| <body> | |
| <app-root>Loading...</app-root> | |
| </body> | |
| </html> |
And also replaced style.css from sample code above.
Then finally
>ng serve --open
>And it works!
This time, I tried stackblitz+my github url but didn't work.Stackblitz is very useful but there seemed some restriction.
I also tried live server of VSCode's extension but also didn't work. It might be that angular must run on node.js and live server seems to be just http-server so that seems to be the reason, I guess.
Comments