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

 public class UserController : ApiController
    {
        private readonly IUserService _userService;

        public UserController(IUserService userService)
        {
            _userService = userService;
        }

        [HttpGet]
        [Route("api/user/GetUsers")]
        public OutputBase GetUsers([FromUri]PageInput input)
        {
            return _userService.GetUsers(input);
        }

        [HttpGet]
        [Route("api/user/UserInfo")]
        public OutputBase GetUserInfo(int id)
        {
            return _userService.GetUser(id);
        }

        [HttpPost]
        [Route("api/user/AddUser")]
        public OutputBase CreateUser([FromBody] UserDto userDto)
        {
            return _userService.AddUser(userDto);
        }

        [HttpPost]
        [Route("api/user/UpdateUser")]
        public OutputBase UpdateUser([FromBody] UserDto userDto)
        {
            return _userService.UpdateUser(userDto);
        }

        [HttpPost]
        [Route("api/user/UpdateRoles")]
        public OutputBase UpdateRoles([FromBody] UserDto userDto)
        {
            return _userService.UpdateRoles(userDto);
        }

        [HttpPost]
        [Route("api/user/DeleteUser/{id}")]
        public OutputBase DeleteUser(int id)
        {
            return _userService.DeleteUser(id);
        }

        [HttpPost]
        [Route("api/user/DeleteRole/{id}/{roleId}")]
        public OutputBase DeleteRole(int id, int roleId)
        {
            return _userService.DeleteRole(id, roleId);
        }
    }

public class BaseRepository<TEntity> : IRepository<TEntity>
        where TEntity :class , IEntity
    {
        private readonly ThreadLocal<UserManagerDBContext> _localCtx = new ThreadLocal<UserManagerDBContext>(() => new UserManagerDBContext());

        public UserManagerDBContext DbContext { get { return _localCtx.Value; } }

        public TEntity FindSingle(Expression<Func<TEntity, bool>> exp = null)
        {
            return DbContext.Set<TEntity>().AsNoTracking().FirstOrDefault(exp);
        }

        public IQueryable<TEntity> Find(Expression<Func<TEntity, bool>> exp = null)
        {
            return Filter(exp);
        }

        public IQueryable<TEntity> Find(Expression<Func<TEntity, bool>> expression, Expression<Func<TEntity, dynamic>> sortPredicate, SortOrder sortOrder, int pageNumber, int pageSize)
        {
            if (pageNumber <= 0)
                throw new ArgumentOutOfRangeException("pageNumber", pageNumber, "pageNumber must great than or equal to 1.");
            if (pageSize <= 0)
                throw new ArgumentOutOfRangeException("pageSize", pageSize, "pageSize must great than or equal to 1.");

            var query = DbContext.Set<TEntity>().Where(expression);
            var skip = (pageNumber - 1) * pageSize;
            var take = pageSize;
            if (sortPredicate == null)
                throw new InvalidOperationException("Based on the paging query must specify sorting fields and sort order.");

            switch (sortOrder)
            {
                case SortOrder.Ascending:
                    var pagedAscending = query.SortBy(sortPredicate).Skip(skip).Take(take);

                    return pagedAscending;
                case SortOrder.Descending:
                    var pagedDescending = query.SortByDescending(sortPredicate).Skip(skip).Take(take);
                    return pagedDescending;
            }

            throw new InvalidOperationException("Based on the paging query must specify sorting fields and sort order.");
        }

        public int GetCount(Expression<Func<TEntity, bool>> exp = null)
        {
            return Filter(exp).Count();
        }

        public void Add(TEntity entity)
        {
            DbContext.Set<TEntity>().Add(entity);
        }

        public void Update(TEntity entity)
        {
            DbContext.Entry(entity).State = EntityState.Modified;
        }

        public void Delete(TEntity entity)
        {
            DbContext.Entry(entity).State = EntityState.Deleted;
            DbContext.Set<TEntity>().Remove(entity);
        }

        public void Delete(ICollection<TEntity> entityCollection)
        {
            if(entityCollection.Count ==0)
                return;

            DbContext.Set<TEntity>().Attach(entityCollection.First());
            DbContext.Set<TEntity>().RemoveRange(entityCollection);
        }

        private IQueryable<TEntity> Filter(Expression<Func<TEntity, bool>> exp)
        {
            var dbSet = DbContext.Set<TEntity>().AsQueryable();
            if (exp != null)
                dbSet = dbSet.Where(exp);
            return dbSet;
        }

        public void Commit()
        {
            DbContext.SaveChanges();
        }
    }

public class UserRepository :BaseRepository<User>, IUserRepository
    {
         
    }

App/images // 存放Web前端使用的图片资源

App/Styles // 存放样式文件

App/scripts // 整个Web前端用到的脚本文件
                / Controllers // angularJS控制器模块存放目录
               /  directives // angularJs指令模块存放目录
              /   filters  // 过滤器模块存放目录
              /   services // 服务模块存放目录
            / app.js // Web前端程序配置模块(路由配置)
App/Modules  // 项目依赖库，angular、Bootstrap、Jquery库

App/Views // AngularJs视图模板存放目录

public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            //类库依赖文件
            bundles.Add(new ScriptBundle("~/js/base/lib").Include(
                    "~/app/modules/jquery-1.11.2.min.js",
                    "~/app/modules/angular/angular.min.js",
                    "~/app/modules/angular/angular-route.min.js",
                    "~/app/modules/bootstrap/js/ui-bootstrap-tpls-0.13.0.min.js",
                    "~/app/modules/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/modules/bootstrap/css/bootstrap.min.css",
                    "~/app/styles/dashboard.css",
                    "~/app/styles/console.css"
                    ));
        }
    }

<!DOCTYPE html>
<html ng-app="LH">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>简易权限管理系统Demo</title>
    @Styles.Render("~/js/base/style")
    @Scripts.Render("~/js/base/lib")
</head>
<body ng-controller="navigation">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">简易权限管理系统Demo</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li class="{{item.isActive?'active':''}}" ng-repeat="item in ls">
                        <a href="#{{item.urls[0].link}}">{{item.name}}</a>
                    </li>
                </ul>
                <div class="navbar-form navbar-right">
                    <a href="@Url.Action("UnLogin", "Home", null)" class="btn btn-danger">
                        {{lang.exit}}
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="{{item.isActive?'active':''}}" ng-repeat="item in urls"><a href="#{{item.link}}">{{item.title}}</a></li>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <div ng-view></div>
            </div>
        </div>
    </div>
    @Scripts.Render("~/js/angularjs/app")
</body>
</html>