Spring Boot AngularJs 应用程序：显示 Angular 的引用错误
Spring Boot AngularJs Application: Shows reference error for Angular
我正在关注下面的教程Spring and Angular JS: A Secure Single Page Application
pom.xml 低于 -
<groupId>org.test</groupId>
<artifactId>single</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>single</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.4.2.RELEASE</version>
<relativePath /> <!-- lookup parent from repository -->
</parent>
<dependencies>
<!-- <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency> -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angularjs</artifactId>
<version>${angularjs.version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jasmine</artifactId>
<version>${jasmine.version}</version>
<scope>test</scope>
</dependency>
</dependencies>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<wro4j.version>1.8.0</wro4j.version>
<java.version>1.8</java.version>
<angularjs.version>1.4.9</angularjs.version>
<bootstrap.version>3.3.7-1</bootstrap.version>
<jquery.version>2.2.4</jquery.version>
<jasmine.version>2.0.0</jasmine.version>
</properties>
<build>
<resources>
<resource>
<directory>${project.basedir}/src/main/resources</directory>
</resource>
<resource>
<directory>${project.build.directory}/generated-resources</directory>
</resource>
</resources>
<plugins>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<!-- Serves *only* to filter the wro.xml so it can get an absolute
path for the project -->
<id>copy-resources</id>
<phase>validate</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${basedir}/target/wro</outputDirectory>
<resources>
<resource>
<directory>src/main/wro</directory>
<filtering>true</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>ro.isdc.wro4j</groupId>
<artifactId>wro4j-maven-plugin</artifactId>
<version>${wro4j.version}</version>
<executions>
<execution>
<phase>generate-resources</phase>
<goals>
<goal>run</goal>
</goals>
</execution>
</executions>
<configuration>
<wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
<cssDestinationFolder>${project.build.directory}/generated-resources/static/css</cssDestinationFolder>
<jsDestinationFolder>${project.build.directory}/generated-resources/static/js</jsDestinationFolder>
<wroFile>${project.build.directory}/wro/wro.xml</wroFile>
<extraConfigFile>${project.build.directory}/wro/wro.properties</extraConfigFile>
<contextFolder>${project.build.directory}/wro</contextFolder>
</configuration>
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>${jquery.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angularjs</artifactId>
<version>${angularjs.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>${bootstrap.version}</version>
</dependency>
</dependencies>
</plugin>
</plugins>
</build>
wro.xml :
<groups xmlns="http://www.isdc.ro/wro">
<group name="angular-bootstrap">
<css>webjar:bootstrap/@bootstrap.version@/less/bootstrap.less</css>
<css>file:@project.basedir@/src/main/wro/main.less</css>
<js>webjar:jquery/@jquery.version@/jquery.min.js</js>
<js>webjar:angularjs/@angularjs.version@/angular.min.js</js>
<js>webjar:angularjs/@angularjs.version@/angular-route.min.js</js>
<js>webjar:angularjs/@angularjs.version@/angular-cookies.min.js</js>
</group>
</groups>
Index.html :
<!doctype html>
<html>
<head>
<title>Hello AngularJS</title>
<link
href="css/angular-bootstrap.css"
rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="rolb" ng-cloak class="ng-cloak">
<div class="container">
<ul>
<li><a href="#/">home</a></li>
<li><a href="#/login">login</a></li>
<li ng-show="authenticated"><a href="" ng-click="logout()">logout</a></li>
</ul>
</div>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<!-- <script src="js/hello.js"></script> -->
<script src="js/app.js"></script>
<script src="js/homeController.js"></script>
<script src="js/navigationController.js"></script>
<script src="js/subscriptionController.js"></script>
</body>
</html>
app.js :
angular.module('rolb', ['ngRoute']).config(function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'homeController'
}).when('/login', {
templateUrl : 'login.html',
controller : 'navigationController'
}).when('/subscribeConfirm', {
templateUrl : 'subscribe.html',
controller : 'subscriptionController'
}).otherwise('/');
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
/*if this is not set , after successfull authentication for first time , the next request doesn't contain JSESSIONID and hence session is not established
requiring again /login request*/
$httpProvider.defaults.withCredentials = true;
})
HomeController.js :
angular.module('rolb').controller('homeController',[$http,$scope,$rootScope,$location,function($http,$scope,$rootScope,$location) {
var self = this;
/*$http.get('/resource/').then(function(response) {
self.greeting = response.data;
})*/
$scope.subscribe = function(prodId) {
var url = "http://localhost:8080/springbootrest/productSubscription/"+prodId+"/"+$scope.selectedAccount;
$http.post(url).success(function(data) {
$location.path("/subscribeConfirm");
}).error(function(data) {
$scope.error = true;
$scope.errorMessage = data.message;
})
}
$http.get('http://localhost:8080/springbootrest/products').success(function(data) {
if (data) {
$scope.products = data;
} else {
}
}).error(function(data) {
})
$http.get('http://localhost:8080/springbootrest/accounts').success(function(data) {
if (data) {
$scope.accounts = data;
} else {
}
}).error(function(data) {
})
$http.get('http://localhost:8080/springbootrest/subscribedProducts').success(function(data) {
if (data) {
$scope.subscribedProducts = data;
} else {
}
}).error(function(data) {
})
}])
Home.html :
<h1>Welcome To ANB Online Banking </h1>
<div ng-show="authenticated">
<div class="alert alert-danger" ng-show=loginError>
There was a problem logging in. Please try again.
</div>
<div class="alert alert-danger" ng-show=error>
{{errorMessage}}
</div>
<p>Welcome User {{userName}} to Online Banking </p>
We have following products available for you
<br/>
<br/>
<table border="1">
<thead>
<tr>
<th>Product Name</th>
<th>Product Description</th>
<th>Minimum Balance</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="prod in products">
<td>{{prod.productName}}</td>
<td>{{prod.description}}</td>
<td>{{prod.minBalance}}</td>
<td><button ng-click="subscribe(prod.productId)">Subscribe</button></td>
</tr>
</tbody>
</table>
<br/>
<br/>
You have following accounts linked . Please select an account to debit money from :
<select ng-model="selectedAccount" ng-options="acnt.accountId as acnt.accountType for acnt in accounts">
</select>
<br/>
<br/>
<div ng-show="subscribedProducts.length > 0 ">
Your have subscribed to following products currently.
<br/>
<table border="1">
<thead>
<tr>
<th>Product Name</th>
<th>Product Description</th>
<th>Minimum Balance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="subscribedProds in subscribedProducts">
<td>{{subscribedProds.productName}}</td>
<td>{{subscribedProds.description}}</td>
<td>{{subscribedProds.minBalance}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div ng-show="!authenticated">
<p>Login</p>
</div>
当我访问 index.html 时，出现以下错误。
ReferenceError: $http 未定义
我已在浏览器中验证 angular-botstrap.js 已成功加载。
所有 Angular 控制器都在 angular-bootstrap.js 之后加载，但我仍然收到此错误。
任何人都可以在这里提供帮助，因为我不知道为什么会发生这种情况？
问题是您缺少 angular.js 和 angular-route.js 的引用，因为您需要这些引用将 ngRoute 作为依赖项注入，还可以按如下方式更改脚本引用顺序。
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/homeController.js"></script>
<script src="js/navigationController.js"></script>
<script src="js/subscriptionController.js"></script>
我正在关注下面的教程Spring and Angular JS: A Secure Single Page Application
pom.xml 低于 -
<groupId>org.test</groupId>
<artifactId>single</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>single</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.4.2.RELEASE</version>
<relativePath /> <!-- lookup parent from repository -->
</parent>
<dependencies>
<!-- <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency> -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angularjs</artifactId>
<version>${angularjs.version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jasmine</artifactId>
<version>${jasmine.version}</version>
<scope>test</scope>
</dependency>
</dependencies>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<wro4j.version>1.8.0</wro4j.version>
<java.version>1.8</java.version>
<angularjs.version>1.4.9</angularjs.version>
<bootstrap.version>3.3.7-1</bootstrap.version>
<jquery.version>2.2.4</jquery.version>
<jasmine.version>2.0.0</jasmine.version>
</properties>
<build>
<resources>
<resource>
<directory>${project.basedir}/src/main/resources</directory>
</resource>
<resource>
<directory>${project.build.directory}/generated-resources</directory>
</resource>
</resources>
<plugins>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<!-- Serves *only* to filter the wro.xml so it can get an absolute
path for the project -->
<id>copy-resources</id>
<phase>validate</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${basedir}/target/wro</outputDirectory>
<resources>
<resource>
<directory>src/main/wro</directory>
<filtering>true</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>ro.isdc.wro4j</groupId>
<artifactId>wro4j-maven-plugin</artifactId>
<version>${wro4j.version}</version>
<executions>
<execution>
<phase>generate-resources</phase>
<goals>
<goal>run</goal>
</goals>
</execution>
</executions>
<configuration>
<wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
<cssDestinationFolder>${project.build.directory}/generated-resources/static/css</cssDestinationFolder>
<jsDestinationFolder>${project.build.directory}/generated-resources/static/js</jsDestinationFolder>
<wroFile>${project.build.directory}/wro/wro.xml</wroFile>
<extraConfigFile>${project.build.directory}/wro/wro.properties</extraConfigFile>
<contextFolder>${project.build.directory}/wro</contextFolder>
</configuration>
<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>${jquery.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angularjs</artifactId>
<version>${angularjs.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>${bootstrap.version}</version>
</dependency>
</dependencies>
</plugin>
</plugins>
</build>
wro.xml :
<groups xmlns="http://www.isdc.ro/wro">
<group name="angular-bootstrap">
<css>webjar:bootstrap/@bootstrap.version@/less/bootstrap.less</css>
<css>file:@project.basedir@/src/main/wro/main.less</css>
<js>webjar:jquery/@jquery.version@/jquery.min.js</js>
<js>webjar:angularjs/@angularjs.version@/angular.min.js</js>
<js>webjar:angularjs/@angularjs.version@/angular-route.min.js</js>
<js>webjar:angularjs/@angularjs.version@/angular-cookies.min.js</js>
</group>
</groups>
Index.html :
<!doctype html>
<html>
<head>
<title>Hello AngularJS</title>
<link
href="css/angular-bootstrap.css"
rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="rolb" ng-cloak class="ng-cloak">
<div class="container">
<ul>
<li><a href="#/">home</a></li>
<li><a href="#/login">login</a></li>
<li ng-show="authenticated"><a href="" ng-click="logout()">logout</a></li>
</ul>
</div>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<!-- <script src="js/hello.js"></script> -->
<script src="js/app.js"></script>
<script src="js/homeController.js"></script>
<script src="js/navigationController.js"></script>
<script src="js/subscriptionController.js"></script>
</body>
</html>
app.js :
angular.module('rolb', ['ngRoute']).config(function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'homeController'
}).when('/login', {
templateUrl : 'login.html',
controller : 'navigationController'
}).when('/subscribeConfirm', {
templateUrl : 'subscribe.html',
controller : 'subscriptionController'
}).otherwise('/');
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
/*if this is not set , after successfull authentication for first time , the next request doesn't contain JSESSIONID and hence session is not established
requiring again /login request*/
$httpProvider.defaults.withCredentials = true;
})
HomeController.js :
angular.module('rolb').controller('homeController',[$http,$scope,$rootScope,$location,function($http,$scope,$rootScope,$location) {
var self = this;
/*$http.get('/resource/').then(function(response) {
self.greeting = response.data;
})*/
$scope.subscribe = function(prodId) {
var url = "http://localhost:8080/springbootrest/productSubscription/"+prodId+"/"+$scope.selectedAccount;
$http.post(url).success(function(data) {
$location.path("/subscribeConfirm");
}).error(function(data) {
$scope.error = true;
$scope.errorMessage = data.message;
})
}
$http.get('http://localhost:8080/springbootrest/products').success(function(data) {
if (data) {
$scope.products = data;
} else {
}
}).error(function(data) {
})
$http.get('http://localhost:8080/springbootrest/accounts').success(function(data) {
if (data) {
$scope.accounts = data;
} else {
}
}).error(function(data) {
})
$http.get('http://localhost:8080/springbootrest/subscribedProducts').success(function(data) {
if (data) {
$scope.subscribedProducts = data;
} else {
}
}).error(function(data) {
})
}])
Home.html :
<h1>Welcome To ANB Online Banking </h1>
<div ng-show="authenticated">
<div class="alert alert-danger" ng-show=loginError>
There was a problem logging in. Please try again.
</div>
<div class="alert alert-danger" ng-show=error>
{{errorMessage}}
</div>
<p>Welcome User {{userName}} to Online Banking </p>
We have following products available for you
<br/>
<br/>
<table border="1">
<thead>
<tr>
<th>Product Name</th>
<th>Product Description</th>
<th>Minimum Balance</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="prod in products">
<td>{{prod.productName}}</td>
<td>{{prod.description}}</td>
<td>{{prod.minBalance}}</td>
<td><button ng-click="subscribe(prod.productId)">Subscribe</button></td>
</tr>
</tbody>
</table>
<br/>
<br/>
You have following accounts linked . Please select an account to debit money from :
<select ng-model="selectedAccount" ng-options="acnt.accountId as acnt.accountType for acnt in accounts">
</select>
<br/>
<br/>
<div ng-show="subscribedProducts.length > 0 ">
Your have subscribed to following products currently.
<br/>
<table border="1">
<thead>
<tr>
<th>Product Name</th>
<th>Product Description</th>
<th>Minimum Balance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="subscribedProds in subscribedProducts">
<td>{{subscribedProds.productName}}</td>
<td>{{subscribedProds.description}}</td>
<td>{{subscribedProds.minBalance}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div ng-show="!authenticated">
<p>Login</p>
</div>
当我访问 index.html 时，出现以下错误。 ReferenceError: $http 未定义
我已在浏览器中验证 angular-botstrap.js 已成功加载。
任何人都可以在这里提供帮助，因为我不知道为什么会发生这种情况？
问题是您缺少 angular.js 和 angular-route.js 的引用，因为您需要这些引用将 ngRoute 作为依赖项注入，还可以按如下方式更改脚本引用顺序。
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/homeController.js"></script>
<script src="js/navigationController.js"></script>
<script src="js/subscriptionController.js"></script>