Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)
目录
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 前端主体结构(五)的更多相关文章
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs名词与概念(一)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 2. 前言 Angularjs开发CRUD类型的 ...
- Angularjs,WebAPI 搭建一个简易权限管理系统
Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一) 1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— 基本功能演示(二)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 基本功能演示(二) 非常抱歉这个月实在太忙,一直 ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— 系统业务与实现(三)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 系统业务与实现(二) 上一章我们讲解的 Angu ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— WebAPI项目主体结构(四)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 5.0 WebAPI项目主体结构 5.1 总体结 ...
- [后端人员耍前端系列]AngularJs篇:使用AngularJs打造一个简易权限系统
一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...
- AngularJs打造一个简易权限系统
AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJ ...
- 使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移
本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...
- express + mongodb 搭建一个简易网站 (四)
express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...
随机推荐
- Idea 201601注册码
参考链接 http://blog.csdn.net/u010310183/article/details/51162137 在license 下面输入 http://www.iteblog.com/i ...
- sloth——算法工程师标注数据的福音
一般算法工程师做标注,都要先开发个标注工具,无非下面几个选项: 1.mfc,C#,优点是交互界面友好,开发难度适中,缺点是没法跨平台 2.matlab,优点是可以跨平台,开发难度非常低,缺点是速度慢. ...
- 超微 X9DRL-iF 服务器主板简介 BIOS相关图解
超微 X9DRL-iF 服务器主板简介 BIOS相关图解 板载串口阵列相关简介 网烁信息805 发布时间:2012-6-15 21:10:09 浏览数:2745 随着Intel E5至强的 ...
- [原]编译Android源码过程中遇到的问题
编译Android源码的过程参考Android官网介绍: 1.下载Android源码的步骤:https://source.android.com/source/downloading.html 2.编 ...
- [转]Visual Studio技巧之打造拥有自己标识的代码模板
可能经过很多博客的介绍,大家都知道代码段的使用,使用代码段可以很方便地生成一些常用的代码格式,确实对我们开发很方便.在团队开发中或者在某些情况下我们经常可能还会希望使用Visual Studio生成的 ...
- iOS开发工具——网络封包分析工具Charles
简介 Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析.Charles通过将自己设置成系统的网络访问代理服务器,使 ...
- codeforces C. Bits(数学题+或运算)
题意:给定一个区间,求区间中的一个数,这个数表示成二进制的时候,数字1的个数最多! 如果有多个这样的数字,输出最小的那个! 思路:对左区间的这个数lx的二进制 从右往左将0变成1,直到lx的值大于右区 ...
- 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 ...
- Python - 属性简介"__name__"
模块是对象,并且每个模块都有一个内置属性__name__.当一个模块被直接运行的时候,该模块__name__的值就等于缺省的'__main__'.如果一个模块被import ,那么这个被引入模块__n ...
- 【入门必备】最佳的 Node.js 学习教程和资料书籍
Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...