還記得 上WebAPI項目主體結構(三) 咱們在"Yiim.web",添加的"App" 目錄嗎? 這一章節咱們講解一下 angularjs 目錄結構。
javascript
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框架css
Angularjs 只是一個前端腳本框架,並無本身的UI 官方提供了一個 Angularjs 與 Bootstrap 結合的插件:
https://angular-ui.github.io/bootstrap/
GitHub地址:
https://github.com/angular-ui/bootstraphtml
咱們只須要在bootstrap引用完畢後,再引用一條腳本便可。前端
https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.jsjava
咱們將此腳本保存到:jquery
App/vendor/bootstrap/js 文件夾中
咱們首先在項目 "Yiim.Web" 添加一個控制器 "ConsoleController"
在控制器中添加一個 Action "Index" 返回一個默認的視圖git
在項目文件"BundleConfig.cs" 咱們添加一下腳本和配置angularjs
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」
文件咱們添加配置內的文件的合併引用github
<!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>
最終在瀏覽器端輸出的內容爲web
<!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>
路由設置包含兩個部分 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;
這樣作的好處是
固然如今僅僅只是輸出。咱們徹底能夠把這個地方當成一個擴展點。
好了咱們的項目骨架基本介紹到這裏。