用“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 数据版本与开发流程 ...
随机推荐
- 对 web.config 节点信息进行加密
记录一下,免得以后再网上找 项目中,数据库访问链接字符串配置在web.config中,明文的,应客户需求需改成密文,so,需要加密. 一开始想的是需要重写configuration什么什么的,最后发现 ...
- 结合阿里云服务器,设置家中jetson tk1随时远程登陆
前提条件: 1.路由配置dmz主机为tk1的ip ,设置路由器中ssh 端口22的访问权限 2.有一台远程服务器,服务器安装了php可以运行php文件(我使用的是阿里云) 家中tk1配置: 脚本pyt ...
- 原子操作--ARM架构
说明:内核版本号为3.10.101 一.ARM架构中的原子操作实现 在原子操作(一)中我们已经提到,各个架构组织为“复仇者”联盟,统一了基本的原子变量操作,这里我们就拿atomic_dec(v)来看看 ...
- java 获取服务器 linux 服务器IP 信息
public String getUnixLocalIp() { String ip = ""; try { Enumeration<?> e1 = (Enumerat ...
- PD4F将HTML转换为PDF乱码问题
修改pd4fonts.properties文件如下: KaiTi_GB2312=SIMKAI.TTFSimSun=SIMKAI.TTF
- 从up6-down2升级到down3
概述: 添加存储过程down_f_process.sql,down_f_del.sql 更新DnFile.updateProcess,DnFile.Delete 更新down.js 更新down.fo ...
- 使用sklearn进行集成学习——理论
系列 <使用sklearn进行集成学习——理论> <使用sklearn进行集成学习——实践> 目录 1 前言2 集成学习是什么?3 偏差和方差 3.1 模型的偏差和方差是什么? ...
- windows 7下qtcreator里QWT文件的pro配置
http://blog.chinaunix.net/uid-20717410-id-272331.html 把编译好的qwt的include文件夹下面 所有的.h文件 复制到qt目录下 然后在pro里 ...
- python 延迟绑定
def multipliers(n): funcs = [] for i in range(n): def f(x): return x * i funcs.append(f) return func ...
- UDP发送中文
procedure TForm1.SpeedButton1Click(Sender: TObject); begin udp.Send('localhost', 1234, 'abc123'); // ...