Creating the application entry point

The Spring Boot Framework allows us to serve static files. These files should be in the classpath in one of these folders, /static, /public, /resources, or /META-INF/resources.

We will use the /static folder, in this folder, we will put our AngularJS application. There are some standards to modularize the AngularJS application folder structure which depends on the application size and requirements. We will use the most simple style to keep the attention on Spring integration. Look at the project structure:

There are some assets to start and run an AngularJS application. We will use the Content Delivery Network (CDN) to load the AngularJS Framework, the Angular UI-Router which helps to handle routing on our web application, and the Bootstrap Framework which helps to develop our pages.

Content Delivery Network is distributed proxy servers around the world. It makes the content more high availability and improves performance because it will be hosted nearer the end user. The detailed explanation can be found at CloudFare Page ( https://www.cloudflare.com/learning/cdn/what-is-a-cdn/).

Then we can start to configure our AngularJS application. Let's start with our entry point, index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Spring Boot Security</title>
  <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="cms">

<!-- Header -->
<nav class="navbar navbar-default navbar-fixed-top">
  <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="#">CMS</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#users">Users</a></li>
        <li><a href="#categories">Categories</a></li>
        <li><a href="#news">News</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- Body -->
<div class="container">
  <div ui-view></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>

<script type="text/javascript" src="app/app.js"></script>

<script type="text/javascript" src="app/controllers.js"></script>
<script type="text/javascript" src="app/services.js"></script>

<script type="text/javascript" src="app/components/categories/category-controller.js"></script>
<script type="text/javascript" src="app/components/categories/category-service.js"></script>

<script type="text/javascript" src="app/components/news/news-controller.js"></script>
<script type="text/javascript" src="app/components/news/news-service.js"></script>

<script type="text/javascript" src="app/components/users/user-controller.js"></script>
<script type="text/javascript" src="app/components/users/user-service.js"></script>

</body>
</html>

There are some important things here. Let's understand them.

The ng-app tag is a directive which is used to bootstrap the AngularJS application. This tag is the root element of the application and is usually placed on the <body> or <html> tags.

The ui-view tag instructs the Angular UI-Router about which portion of the HTML document will be handled by the application states, in other words, the designated part has the dynamic behaviors and change depends on the routing system. Look at the following code snippet:

<!-- Body -->
<div class="container">
  <div ui-view></div>
</div>

This part of the code can be found at index.hml file.

Following the ui-view, we have our JavaScript files, the first one is the AngularJS Framework, in this version the file is minified. Look at our JavaScript files, the files were created in the /static/app/components folder. Take a look at the image here:

The second one is the UI-Router which helps us to manage our routes. Finally, we have our JavaScript files which configure the AngularJS application, our controllers, and the services to interact with our CMS APIs.

Also, we have some Bootstrap classes to align fields and make design easier. 

上一章目录下一章