目录

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;

这样做的好处是

  • 前端引用视图的时候路径将会更加短小。
  • 服务端可以对视图进行其控制

当然现在仅仅只是输出。我们完全可以把这个地方当成一个扩展点。

好了我们的项目骨架基本介绍到这里。

Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)的更多相关文章

  1. Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs名词与概念(一)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 2. 前言 Angularjs开发CRUD类型的 ...

  2. Angularjs,WebAPI 搭建一个简易权限管理系统

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

  3. Angularjs,WebAPI 搭建一个简易权限管理系统 —— 基本功能演示(二)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 基本功能演示(二) 非常抱歉这个月实在太忙,一直 ...

  4. Angularjs,WebAPI 搭建一个简易权限管理系统 —— 系统业务与实现(三)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 系统业务与实现(二) 上一章我们讲解的 Angu ...

  5. Angularjs,WebAPI 搭建一个简易权限管理系统 —— WebAPI项目主体结构(四)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 5.0 WebAPI项目主体结构 5.1 总体结 ...

  6. [后端人员耍前端系列]AngularJs篇:使用AngularJs打造一个简易权限系统

    一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...

  7. AngularJs打造一个简易权限系统

    AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJ ...

  8. 使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移

    本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...

  9. express + mongodb 搭建一个简易网站 (四)

    express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...

随机推荐

  1. Idea 201601注册码

    参考链接 http://blog.csdn.net/u010310183/article/details/51162137 在license 下面输入 http://www.iteblog.com/i ...

  2. sloth——算法工程师标注数据的福音

    一般算法工程师做标注,都要先开发个标注工具,无非下面几个选项: 1.mfc,C#,优点是交互界面友好,开发难度适中,缺点是没法跨平台 2.matlab,优点是可以跨平台,开发难度非常低,缺点是速度慢. ...

  3. 超微 X9DRL-iF 服务器主板简介 BIOS相关图解

    超微 X9DRL-iF 服务器主板简介 BIOS相关图解 板载串口阵列相关简介 网烁信息805    发布时间:2012-6-15 21:10:09    浏览数:2745 随着Intel E5至强的 ...

  4. [原]编译Android源码过程中遇到的问题

    编译Android源码的过程参考Android官网介绍: 1.下载Android源码的步骤:https://source.android.com/source/downloading.html 2.编 ...

  5. [转]Visual Studio技巧之打造拥有自己标识的代码模板

    可能经过很多博客的介绍,大家都知道代码段的使用,使用代码段可以很方便地生成一些常用的代码格式,确实对我们开发很方便.在团队开发中或者在某些情况下我们经常可能还会希望使用Visual Studio生成的 ...

  6. iOS开发工具——网络封包分析工具Charles

    简介 Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析.Charles通过将自己设置成系统的网络访问代理服务器,使 ...

  7. codeforces C. Bits(数学题+或运算)

    题意:给定一个区间,求区间中的一个数,这个数表示成二进制的时候,数字1的个数最多! 如果有多个这样的数字,输出最小的那个! 思路:对左区间的这个数lx的二进制 从右往左将0变成1,直到lx的值大于右区 ...

  8. install keepalived on RedHat/CentOS to provide IP failover for web cluster

    Contents [hide]  1 Introduction 2 Our Sample Setup 3 Install Keepalived 4 Install Kernel Headers 5 C ...

  9. Python - 属性简介"__name__"

    模块是对象,并且每个模块都有一个内置属性__name__.当一个模块被直接运行的时候,该模块__name__的值就等于缺省的'__main__'.如果一个模块被import ,那么这个被引入模块__n ...

  10. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...