Angularjs,WebAPI 搭建一個簡易權限管理系統 —— Angularjs 前端主體結構(五)

目錄

6 Angularjs 前端主體結構

6.1 Angularjs目錄結構

還記得 上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

6.2 Angularjs 與 Bootstrap 結合

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 文件夾中

6.3 控制檯頁面配置

咱們首先在項目 "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>

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;

這樣作的好處是

  • 前端引用視圖的時候路徑將會更加短小。
  • 服務端能夠對視圖進行其控制

固然如今僅僅只是輸出。咱們徹底能夠把這個地方當成一個擴展點。

好了咱們的項目骨架基本介紹到這裏。

相關文章
相關標籤/搜索