目錄
6 Angularjs 前端主體結構
6.1 Angularjs目錄結構
還記得 上WebAPI項目主體結構（三） 我們在"Yiim.web"，添加的"App" 目錄嗎？ 這一章節我們講解一下 angularjs 目錄結構。
App/images //存放系統使用的圖標
App/styles //樣式文件存儲
App/scripts //是整個我們應用程序運行需要的文件
/controllers //angularjs 控制器模塊目錄
/directives //angularjs指令模塊存放目錄
/filters //過濾器模塊存放目錄
/services //服務模塊存放目錄
/app.js //應用程序配置模塊（路由配置）
App/vendor //項目依賴類庫
/angular //angular項目運行文件
/bootstrap //bootstrap文件
.....
...
App/views //angularjs 視圖模板存放頁面
通過上面的我們把 angularjs的 控制器，指令，過濾器等一系列模塊的目錄介紹完畢。
使用 Bootstrap 作為我們的 UI框架
6.2 Angularjs 與 Bootstrap 結合
Angularjs 只是一個前端腳本框架，並沒有自己的UI 官方提供了一個 Angularjs 與 Bootstrap 結合的插件:
https://angular-ui.github.io/bootstrap/
GitHub地址:
https://github.com/angular-ui/bootstrap
我們只需要在bootstrap引用完畢后，再引用一條腳本即可。
https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js
我們將此腳本保存到：
App/vendor/bootstrap/js 文件夾中
6.3 控制台頁面配置
我們首先在項目 "Yiim.Web" 添加一個控制器 "ConsoleController"
在控制器中添加一個 Action "Index" 返回一個默認的視圖
在項目文件"BundleConfig.cs" 我們添加一下腳本和配置
using System.Web;
using System.Web.Optimization;
namespace Yiim.Web
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
//清除忽略列表
//http://stackoverflow.com/questions/11980458/bundler-not-including-min-files
bundles.IgnoreList.Clear();
//類庫依賴文件
bundles.Add(new ScriptBundle("~/js/base/library").Include(
"~/app/vendor/jquery-1.11.2.min.js",
"~/app/vendor/angular/angular.js",
"~/app/vendor/angular/angular-route.js",
"~/app/vendor/bootstrap/js/ui-bootstrap-tpls-0.13.0.min.js",
"~/app/vendor/bootstrap-notify/bootstrap-notify.min.js"
));
//angularjs 項目文件
bundles.Add(new ScriptBundle("~/js/angularjs/app").Include(
"~/app/scripts/services/*.js",
"~/app/scripts/controllers/*.js",
"~/app/scripts/directives/*.js",
"~/app/scripts/filters/*.js",
"~/app/scripts/app.js"));
//樣式
bundles.Add(new StyleBundle("~/js/base/style").Include(
"~/app/vendor/bootstrap/css/bootstrap.min.css",
"~/app/styles/dashboard.css",
"~/app/styles/console.css"
));
}
}
}
注意代碼：
在“View/Console/Index.cshtml”
文件我們添加配置內的文件的合並引用
<!DOCTYPE html>
<html ng-app="Yiim">
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewData["WebTitle"]</title>
@Styles.Render("~/js/base/style")
@Scripts.Render("~/js/base/library")
</head>
<body>
@Scripts.Render("~/js/angularjs/app")
</body>
</html>
最終在瀏覽器端輸出的內容為
<!DOCTYPE html>
<html ng-app="Yiim">
<head>
<meta name="viewport" content="width=device-width" />
<title>Yiim 簡易權限管理系統</title>
<link href="/app/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/app/styles/dashboard.css" rel="stylesheet"/>
<link href="/app/styles/console.css" rel="stylesheet"/>
<script src="/app/vendor/jquery-1.11.2.min.js"></script>
<script src="/app/vendor/angular/angular.min.js"></script>
<script src="/app/vendor/angular/angular-route.min.js"></script>
<script src="/app/vendor/bootstrap/js/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="/app/vendor/bootstrap-notify/bootstrap-notify.min.js"></script>
</head>
<body>
<script src="/app/scripts/app.js"></script>
</body>
</html>
除了bootstrap的樣式我們還添加了"dashboard.css" 控制面板的樣式和 用於覆蓋bootstrap的樣式"console.css"。
我們在項目開始的時候沒有添加如何的指令，控制器... 所以
@Scripts.Render("~/js/angularjs/app")
只輸出了
<script src="/app/scripts/app.js"></script>
6.5 服務端路由配置
路由設置包含兩個部分 WebAPI路由 和 MVC路由
WebAPI路由:
默認Web API中沒有對Action名稱的匹配，因為默認的Action就是匹配的http協議內的動作“GET”,"POST","DELETE","PUT"，例如：
POST /api/user/
匹配的是"UserController",內的"Post"方法。
所以我們需要對API做如下的修改,這些修改時有必要的.如果真正的使用這些動作名稱來區分控制,那我們的控制器也只能有這些Action了，所以我們做一下修改。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
namespace Yiim.Web
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
"APIDefault", //路由名稱
"api/{controller}/{action}/{id}", //添加對action的引用
new
{
id = RouteParameter.Optional
});
}
}
}
MVC路由設置:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace Yiim.Web
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute("Views", "{dir}-{name}", new { controller = "Utils", action = "Html" });
routes.MapRoute("Default", "{controller}/{action}/{id}",
new { controller = "Console", action = "Index", id = UrlParameter.Optional });
}
}
}
除了對默認路由的修改，我們還添加如下對 angularjs 視圖文件輸出的路由
routes.MapRoute("Views", "{dir}-{name}", new { controller = "Utils", action = "Html" });
並在控制器文件夾中添加一個名稱為 "UtilsController"
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Yiim.Web.Controllers
{
public class UtilsController : Controller
{
public ActionResult Html(string dir, string name)
{
string html = string.Format("~/App/views/{0}/{1}.html", dir, name);
if (!System.IO.File.Exists(Server.MapPath(html)))
return Content(string.Format("當前請求的頁面“{0}”不存在！", html));
return File(html, "text/html; charset=utf-8");
}
}
}
上面做出的修改，針對 Angularjs 視圖進行輸出.
如果視圖真實的路徑為:
~/App/views/users/list.html
那么訪問路徑就可以這樣訪問
~/users-list;
這樣做的好處是
- 前端引用視圖的時候路徑將會更加短小。
- 服務端可以對視圖進行其控制
當然現在僅僅只是輸出。我們完全可以把這個地方當成一個擴展點。
好了我們的項目骨架基本介紹到這里。