Adding a New Blog Template In Angular JS
Categories: Angular Angular JS
Adding a New Blog Template
Now we will add a simple template file and test run the application before adding code to the template. Right-click the NetBeans project folder and add a new HTML page named main.html in the partials folder. Replace the generated HTML code with the code shown here:
<!-- chapter5/main.html -->
{{blogArticle}}
Right-click the project folder and select “Run” from the menu. If you set up the project correctly, the browser should open with the following text displayed: “This is a blog post about AngularJS. We will cover how to build a blog and how to add comments to the blog post.” This tells us our application is properly configured. Now we will use Twitter Bootstrap and HTML to build a menu and main page for our blog.
Twitter Bootstrap
You should have already added bootstrap.min.js to the project. If you run into JavaScript errors related to Twitter Bootstrap, you can easily replace the bootstrap.min.js file with the nonminified bootstrap.js file distributed by Twitter. Using the nonminified version of the file allows the developer to place breakpoints in the Bootstrap JavaScript file and debug any related issues. We will only cover the basics of Twitter Bootstrap here. For more documentation and tutorials on Bootstrap, see the project site.
First, we need to add three more folders and some additional Twitter Bootstrap files to the project.
We will add all the Bootstrap files here, although much of Bootstrap is not actually used in this project. Do the following:
1. Add a subfolder named css under the Site Root folder.
2. Add a subfolder named fonts under the Site Root folder.
3. Add a subfolder named lib-css under the Site Root folder.
4. Copy the bootstrap-theme.min.css and bootstrap.min.css files into the lib-css folder.
5. Copy the following files to the fonts folder:
a. glyphicons-halflings-regular.eot
b. glyphicons-halflings-regular.svg
c. glyphicons-halflings-regular.ttf
d. glyphicons-halflings-regular.woff