用“MEAN”技术栈开发web应用(一)AngularJs前端架构
前言
AngularJs的争议
练手项目简介

前端目录结构

首页index.html
<!doctype html>
<html ng-app="QMaker">
<head>
<meta charset="utf-8">
<title>Question Maker</title>
<link rel="stylesheet" href="/src/lib/bootstrap-3.3.5/css/bootstrap.min.css">
<script src="/src/lib/jquery-1.9.1.min.js"></script>
<script src="/src/lib/angular-1.4.1.min.js"></script>
<script src="/src/lib/angular-ui-router.min.js"></script> <link rel="stylesheet" href="/src/css/base.css">
<!--{main}-->
<script src="/src/js/app.js"></script>
<script src="/src/js/controllers.js"></script>
<script src="/src/js/directives.js"></script>
<script src="/src/js/filters.js"></script>
<script src="/src/js/routes.js"></script>
<script src="/src/js/services.js"></script>
<!--{endmain}-->
</head> <body>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="#/" class="navbar-brand">Question Maker</a>
</div>
</div>
</div>
<div class="maincontent container-fluid" ui-view> </div>
</body> </html>
入口文件app.js
var app = angular.module('QMaker', ['ui.router']);
app.run(function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
控制器合集controllers.js
服务合集services.js
指令合集directives.js
<pagenav pageobj="pageObject" pagefunc="pageFunction"></pagenav>
过滤器合集filters.js
前端路由定义routes.js
<!--试题编辑视图-->
<div ui-view="editArea"></div> <!--试题预览视图-->
<div ui-view="previewArea"></div>
tpl目录
lib目录
总结
用“MEAN”技术栈开发web应用(一)AngularJs前端架构的更多相关文章
- 用“MEAN”技术栈开发web应用(三)用mongodb搭建数据库
上一篇介绍了如何用express搭建起服务端MVC的开发架构,本篇我们来详细介绍一下这个Model层,也就是数据库访问层.包含如何使用mongodb搭建数据库,以及如何使用mongoose来访问数据. ...
- “MEAN”技术栈开发web应用
“MEAN”技术栈开发web应用 上一篇我们讲了如何使用angular搭建起项目的前端框架,前端抽象出一个service层来向后端发送请求,后端则返回相应的json数据.本篇我们来介绍一下,如何在no ...
- 用“MEAN”技术栈开发web应用(二)express搭建服务端框架
上一篇我们讲了如何使用angular搭建起项目的前端框架,前端抽象出一个service层来向后端发送请求,后端则返回相应的json数据.本篇我们来介绍一下,如何在nodejs环境下利用express来 ...
- Spring Security技术栈开发企业级认证与授权(一)环境搭建
本项目是基于慕课网的Spring Security技术栈开发企业级认证与授权,采用IDEA开发,本文章用来记录该项目的学习过程. 慕课网视频:https://coding.imooc.com/clas ...
- web技术栈开发原生应用-多端共用一套代码
weex: vuejs开发原生应用 nativescript: vuejs开发原生应用 ReactNative = reactjs开发原生应用 ionic = angularjs 开发原生应用
- Python全栈开发-web框架之django
一:web框架 什么是web框架? Web应用框架(Web application framework)是一种开发框架,用来支持动态网站.网络应用程序及网络服务的开发.这种框架有助于减轻网页开发时共通 ...
- CefSharp-基于C#的客户端开发框架技术栈开发全记录
CefSharp简介 源于Google官方 CefSharp用途 CefSharp开发示例 CefSharp应用--弹窗与右键 不弹出子窗体 禁用右键 CefSharp应用--High DPI问题 缩 ...
- python 全栈开发,Day90(Vue组件,前端开发工具包)
昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...
- 一文读懂NodeJS全栈开发利器:CabloyJS(万字长文)
目录 0 修订 0.1 修订说明 0.2 修订历史 1 基本概念 1.1 CabloyJS是什么 1.2 CabloyJS核心解决什么问题 1.3 CabloyJS的开发历程 2 数据版本与开发流程 ...
随机推荐
- vs2015 附加到进程找不到w3wp.exe
vs2015 附加到进程找不到w3wp.exe 解决办法: 浏览器打开你访问的IIS地址后就出现了~!!!!!!!!!
- Java Web2
JavaBean组件. 定义方法:(假设有一个JavaBean的类名为CounterBean,它有一个count属性.) //在JSP文件中分别定义4种范围内的JavaBean对象的语法 //in p ...
- SpringMVC 结合HttpClient调用第三方接口实现
使用HttpClient 依赖jar包 1:commons-httpclient-3.0.jar 2:commons-logging-1.1.1.jar 3:commons-codec-1.6.jar ...
- NGUI Material Shader SetFloat 不起作用
通常情况下,我们在Unity3d种可以通过material.SetFloat(name, xxx) 修改参数来达到我们的Material[Shader]的效果. 但是在 NGUI 的UITexture ...
- css高度自适应
何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...
- IP地址框
//IP地址框 // 此段代码:独立的获取本机IP地址和计算机名 WORD wVersionRequested; WSADATA wsaData; char name[255]; CString ip ...
- UVa 11292 Dragon of Loowater
简单贪心 龙头的直径和人的佣金排序,价值小的人和直径小的配 #include<iostream> #include<cstdio> #include<cmath> ...
- HDU 4405 Aeroplane chess (概率DP)
题意:你从0开始,要跳到 n 这个位置,如果当前位置是一个飞行点,那么可以跳过去,要不然就只能掷骰子,问你要掷的次数数学期望,到达或者超过n. 析:概率DP,dp[i] 表示从 i 这个位置到达 n ...
- XAF ListView 移除顶部工具栏
此方法适用于C/S及B/S,无需分别写在web和win中. Module下新建ViewController,代码如下: public partial class GongZuoJiaoShen_Yin ...
- Java生成不重复的数的方法
在开发时要给某些表加上编号,而且编号是唯一的,自己用时间生成了下,觉得可能存在并发情况.所以在网上查了一下,就是随机生成.方法如下: //方法一(用当前时间精确到毫秒,截取任意几位) Date dat ...