AngularJs SPA Template

AngularJs SPA Template

安装模板

AngularJs SPA Template For Visual Studio 是一个使用 AngularJs构建 SPA 项目的模板， 可以直接在 Visual Studio 联机模板中键入 AngularJs SPA Template 搜索到, 安装之后可以在已安装的模板中的 Visual C#-> Web 看到：

创建App

在安装好模板之后， 创建名为： AngularJsSample 的项目， 项目结构如下：

App_Start

此文件夹下有以下几个文件：

BundleConfig.cs

熟悉Asp.net Mvc 项目的都知道这个文件是用来绑定资源文件的： .css, .js 等等。

public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/content/css/app").Include("~/content/app.css"));

bundles.Add(new ScriptBundle("~/js/jquery").Include("~/scripts/vendor/jquery-{version}.js"));

//绑定 angular.js 相关的 js 文件： 路由， 过滤器， 服务， 指令， 控制器， 启动文件
bundles.Add(new ScriptBundle("~/js/app").Include(
"~/scripts/vendor/angular-ui-router.js",
"~/scripts/filters.js",
"~/scripts/services.js",
"~/scripts/directives.js",
"~/scripts/controllers.js",
"~/scripts/app.js"));
}

RouteConfig.cs

路由配置：

public static void RegisterRoutes(RouteCollection routes)
{
//DefaultRoute 起到的作用后面在 DefaultRoute.cs 中会详细降讲到
routes.Add("Default", new DefaultRoute());
}

Startup.Auth.cs

用户验证的相关配置：

public void ConfigureAuth(IAppBuilder app)
{
//启用 cookie 来存储用户认证信息
app.UseCookieAuthentication(new CookieAuthenticationOptions
{
AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
LoginPath = new PathString("/login")
});

//使用 cookie 来存储第三方登录的用户信息
app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);
}

Content

一般此文件下都是一些静态资源文件： 样式表， 字体文件等

Routing

DefaultRoute.cs

public class DefaultRoute : Route
{
public DefaultRoute()
: base("{*path}", new DefaultRouteHandler())
{
this.RouteExistingFiles = false;
}
}

DefaultRoute

继承自

System.Web.Routing.Route

对象， 在自身被实例化时实例的父类中使用的构造器签名为：

// 摘要:
//     使用指定的 URL 模式和处理程序类初始化 System.Web.Routing.Route 类的新实例。
//
// 参数:
//   url:
//     路由的 URL 模式。
//
//   routeHandler:
//     处理路由请求的对象。
public Route(string url, IRouteHandler routeHandler);

这里的处理路由请求的对象是

DefaultRouteHandler

DefaultRouteHandler.cs

这个是路由配置中的默认路由配置， 下面是其对路由的处理过程：

public IHttpHandler GetHttpHandler(RequestContext requestContext)
{
//获取当前处理的请求路由
var filePath = requestContext.HttpContext.Request.AppRelativeCurrentExecutionFilePath;

//如果路由为 ~/, 则将请求路由改为 ~/views/index.cshtml， 一般为首页
if (filePath == "~/")
{
filePath = "~/views/index.cshtml";
}
else
{
//如果请求路由不以 ~/views/ 开头（忽略大小写）,  则向请求路由中插入 views/, 如 ~/index.cshtml --> ~/views/index.cshtml
if (!filePath.StartsWith("~/views/", StringComparison.OrdinalIgnoreCase))
{
filePath = filePath.Insert(2, "views/");
}
//如果请求路由不以 .cshtml 结尾 (忽略大小写), 则向请求路由中的末尾加上 .cshtml
if (!filePath.EndsWith(".cshtml", StringComparison.OrdinalIgnoreCase))
{
filePath = filePath += ".cshtml";
}
}

//将规范后的请求路由使用 WebPageHttpHandler 创建一个路由处理者
var handler = WebPageHttpHandler.CreateFromVirtualPath(filePath);

//如果为 null 表示请求路由无效 404
if (handler == null)
{
requestContext.RouteData.DataTokens.Add("templateUrl", "/views/404");
handler = WebPageHttpHandler.CreateFromVirtualPath("~/views/404.cshtml");
}
else
{
//在路由信息中加入当前请求路由， 去掉末尾 .cshtml
requestContext.RouteData.DataTokens.Add("templateUrl", filePath.Substring(1, filePath.Length - 8));
}

return handler;
}

在上述代码中已经加入了很详细的注释。

Scripts

存放的都是脚本文件。 在使用此模板创建 SPA 项目的时候， 这个文件夹中会自动生成一下几个较为重要的文件：

filters.js

services.js

directives.js

controllers.js

app.js

有 angularjs 基本知识的应该都懂…若不清楚的建议去学习一下 angularjs 先

Views

这里面则是视图了

总结

在这个模板中， 个人感觉 Routing 文件夹下的

DefaultRouteHandler

是非常重要的， 它完成了基本请求路由的规范处理， 使得 View 可供访问。 后续将会继续对此模板进行介绍~