摘要：今天的天学习种新技术挑战，我决定使用框架和开发一个单页面应用。应用我们将开发一个社交化书签应用，允许用户提交和分享链接。在元素中使用指令，意味着在整个中可用。我使用作为该应用的模块名。
编者注：我们发现了有趣的系列文章《30天学习30种新技术》，正在翻译，一天一篇更新，年终礼包。下面是第22天的内容。
今天的《30天学习30种新技术》挑战，我决定使用Spring框架、MongoDB和AngularJS开发一个单页面应用。我很熟悉Spring和MongoDB，但是我没用配合Spring使用过AngularJS。今天我们将开发一个社交化的书签应用，类似我们几天前用EmberJS开发的那个。我在第二天介绍了AngularJS的基本知识，请参阅我的文章获取更多信息。本文使用最新版的Spring框架，即3.2.5.RELEASE，我们将不使用XML（连web.xml也不用）。我们将通过Spring的annotation支持来配置一切。我们将使用Spring MVC来创建一个REST后端。同时将AngularJS作为客户端的MVC框架来开发应用的前端。
应用我们将开发一个社交化书签应用，允许用户提交和分享链接。你可以在这里查看这个应用。这个应用可以做到：
当用户访问/时，他会看到以提交时间排序的报道列表。
当用户访问某个书签时，例如#/stories/528b9a8ce4b0da0473622359，用户会看到关于这个报道的信息，例如是谁提交的，何时提交的，以及文章的摘要。AngularJS将发送一个REST化的GET请求（/api/v1/stories/528b9a8ce4b0da0473622359)来获取全文。
最后，当用户通过#/stories/new提交新报道时，会向REST后端发起一个POST请求，报道会被保存在MongoDB数据库。用户只需填写报道的URL。应用将使用我们在第16天开发的Goose Extractor RESTful API获取标题、主要图片和文章摘要，
前提基本的Java知识。安装最新的JDK。你可以安装OpenJDK 7和Oracle JDK 7。OpenShift支持 OpenJDK6 和 7。
基本的Spring知识。
注册一个OpenShift账号。注册是完全免费的，Red Hat给每个用户三枚免费的Gear,可以用Gear运行你的应用。在写作此文的时候，每个用户能免费使用总共 1.5 GB 内存和 3 GB 硬盘空间。
安装 rhc客户端工具。rhc是ruby gem，因此你的机子上需要装有 ruby 1.8.7以上版本。 只需输入 sudo gem install rhc即可安装 rhc 。如果你已经安装过了，确保是最新版。运行sudo gem update rhc即可升级。关于配置rhc命令行工具的详细信息，请参考： https://openshift.redhat.com/community/developers/rhc-client-tools-install
使用 rhc 的 setup 命令配置你的 OpenShift 账号。这个命令会帮助你创建一个命名空间，同时将你的ssh公钥上传至 OpenShift 服务器。
Github仓库今天的示例应用的代码可从github取得。
第一步 创建Tomcat 7应用创建新应用，使用Tomcat 7和MongoDB
rhc create-app getbookmarks tomcat-7 mongodb-2
这会为我们创建一个应用容器——gear，然后设置公开的DNS，创建私有git仓库，最后利用你的Github仓库中的代码来部署应用。应用可以通过http://getbookmarks-{domain-name}.rhcloud.com/访问。用你自己的OpenShift域名替换{domain-name} （域名有时也被称为命名空间）。
第二步 删除模板代码接着我们删除OpenShift创建的模板代码
cd getbookmarks git rm -rf src/main/webapp/*.jsp src/main/webapp/index.html src/main/webapp/images src/main/webapp/WEB-INF/web.xml git commit -am "deleted template files"
请注意我们同时也删除了web.xml。
第三步 更新pom.xml用以下代码替换pom.xml的内容
4.0.0 getbookmarks getbookmarks war 1.0 getbookmarks UTF-8 1.7 1.7 org.springframework spring-webmvc 3.2.5.RELEASE org.springframework spring-tx 3.2.5.RELEASE org.springframework.data spring-data-mongodb 1.3.2.RELEASE org.codehaus.jackson jackson-mapper-asl 1.9.13 javax.servlet javax.servlet-api 3.1.0 provided openshift getbookmarks maven-war-plugin 2.4 `false webapps ROOT
上述pom.xml中：
我们为spring-webmvc、spring-mongodb、jackson和最新的servlet api添加了Maven依赖。
项目使用JDK 7代替JDK 6。
使用最新的Maven的war插件。为了避免由于web.xml不存在导致的构建错误，我们添加了一个配置选项。
修改之后，别忘了右击Maven > Update Project来更新maven项目。
第四步 编写 WebMvcConfig 和 AppConfig 类创建com.getbookmarks.config包和WebMvcConfig类。
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.json.MappingJacksonJsonView;
@EnableWebMvc
@ComponentScan(basePackageClasses = StoryResource.class)
@Configuration
public class WebMvcConfig{
}
接下来我们将创建AppConfig配置类。Spring MongoDB有一个仓库概念，你在其中实现接口，然后Spring会生成相应的代理类。这使得编写仓库类非常容易，也节省了大量的样板代码。Spring MongoDB允许我们通过@EnableMongoRepositories annotation 声明激活Mongo仓库。
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.authentication.UserCredentials;
import org.springframework.data.mongodb.MongoDbFactory;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.data.mongodb.core.SimpleMongoDbFactory;
import org.springframework.data.mongodb.repository.config.EnableMongoRepositories;
import com.getbookmarks.repository.StoryRepository;
import com.mongodb.Mongo;
@Configuration
@EnableMongoRepositories(basePackageClasses = StoryRepository.class)
public class ApplicationConfig {
@Bean
public MongoTemplate mongoTemplate() throws Exception {
String openshiftMongoDbHost = System.getenv("OPENSHIFT_MONGODB_DB_HOST");
` int openshiftMongoDbPort = Integer.parseInt(System.getenv("OPENSHIFT_MONGODB_DB_PORT"));
String username = System.getenv("OPENSHIFT_MONGODB_DB_USERNAME");
String password = System.getenv("OPENSHIFT_MONGODB_DB_PASSWORD");
Mongo mongo = new Mongo(openshiftMongoDbHost, openshiftMongoDbPort);
UserCredentials userCredentials = new UserCredentials(username, password);
String databaseName = System.getenv("OPENSHIFT_APP_NAME");
MongoDbFactory mongoDbFactory = new SimpleMongoDbFactory(mongo, databaseName, userCredentials);
MongoTemplate mongoTemplate = new MongoTemplate(mongoDbFactory);
return mongoTemplate;
}
}
第五步 编写 GetBookmarksWebApplicationInitializer 类
Servlet 3.0下，web.xml是可选的。通常，我们在web.xml中配置Spring WebMVC调度器，不过从Spring 3.1开始，我们可以使用WebApplicationInitializer以编程方式配置了。Spring提供了ServletContainerInitializer接口的一个实现 SpringServletContainerInitializer。SpringServletContainerInitializer类将任务委派给你提供的org.springframework.web.WebApplicationInitializer实现。你只需实现一个方法WebApplicationInitializer#onStartup(ServletContext)，传递需要初始化的ServletContext。
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration.Dynamic;
import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;
public class GetBookmarksWebApplicationInitializer implements WebApplicationInitializer {
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
AnnotationConfigWebApplicationContext webApplicationContext = new AnnotationConfigWebApplicationContext();
webApplicationContext.register(ApplicationConfig.class, WebMvcConfig.class);
Dynamic dynamc = servletContext.addServlet("dispatcherServlet", new DispatcherServlet(webApplicationContext));
dynamc.addMapping("/api/v1/*");
dynamc.setLoadOnStartup(1);
}
}
第六步 创建 Story domain类
本应用中，我们只有一个Story domain类。
@Document(collection = "stories")
public class Story {
@Id
private String id;
private String title;
private String text;
private String url;
private String fullname;
private final Date submittedOn = new Date();
private String image;
public Story() {
}
// 为了行文简洁，移除了Getter和Setter
以上代码中，值得注意的有两处：
@Document annotation指明了将在MongoDB中持续化的domain对象。stories指明了将在MongoDB中创建的collection名。
@Id标记此字段为Id，相应的字段会由MongoDB自动生成。
第七步 创建 StoryRepository正如前面所说，。Spring MongoDB有一个仓库概念，你在其中实现接口，然后Spring会生成相应的代理类。让我们创建如下所示的StoryRepository.
