本文详细讲解如何在SpringBoot应用中整合AngularJS和BootstrapCSS，通过下载资源文件，创建静态文件夹，引入链接，编写AngularJS控制器实现数据绑定，并在页面上展示效果。
这篇文章介绍在静态页面中使用angular.js和bootstrap.css进行页面内容加载和布局。
1.下载angular.min.js和bootstrap.min.css。
2.在项目的src/main/resources下建一个static文件夹。
3.把下载好的angular.min.js和bootstrap.min.css放到static文件夹下。注意：这里为了以后方便管理文件，可以在static文件夹下先建立js文件夹和css文件夹，然后把angular.min.js放到js文件夹下，把bootstrap.min.css放到css文件夹下。
4.在index.html页面的<head></head>中间引入这两个文件，如下代码：
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<script src="/js/angular168.min.js"></script>
5.在index.html中编写如下代码：
<body ng-app="indexApp" class="container">
<div ng-controller="indexController" class="row">
<div class="col-sm-4 bg-info">
<span ng-bind="firstText"></span>
</div>
<div class="col-sm-4 bg-warning">
<span ng-bind="secondText"></span>
</div>
<div class="col-sm-4 bg-danger">
<span ng-bind="thirdText"></span>
</div>
</div>
</body>
<script>
var app=angular.module("indexApp", []);
app.controller("indexController", function($scope) {
$scope.firstText="我在bootstrap第一列中";
$scope.secondText="我在bootstrap第二列中";
$scope.thirdText="我在bootstrap第三列中";
});
</script>
这段代码使用了bootstrap的样式以及angularjs加载数据，具体这两个东西怎么用，如果没有用过的同学，请另行查资料学习。
6.启动项目，输入url,在页面成功展示出文字信息。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
