有没有 SpringMVC + Angular + bootstrap 学习的例子 _ 广州玩具厂_广州毛绒玩具厂_广东玩具厂_广东毛绒玩具厂
有没有 SpringMVC + Angular + bootstrap 学习的例子
一、总括本文用于解释Angular初始化的过程，以及如何在你有需要的时候对Angular进行手工初始化。二、Angular &script& 标签本例用于展示如何通过推荐的路径整合Angular，实现自动初始化。?12345678910111213&!doctype html&
&html xmlns:ng=&http://angularjs.org& ng-app&
&script src=&angular.js&&
&/html&将sciprt标签放置于页面底部。这样做能避免因为加载angular.js而阻挡HTML的加载，从而降低应用的加载时间。我们可以在http://code.angularjs.org中获取到最新版本的angularJs。出于安全考虑，切勿在产品中直接引用这个地址来加载脚本。但如果仅仅是研究学习使用的话，直接连接也无妨。选择：angular-[version].js 是方便阅读的一个版本，适合日常开发、调试使用。选择：angular-[version].min.js 是压缩、混淆后的版本，适合最终产品使用。放置”ng-app”到应用的根节点中，如果你想让angular自动启动你的应用，通常可以放置于&html&标签中。?1&html ng-app&如果我们需要使用老派风格的directive语法”ng:”，那么我们需要加入一个xml-namespace到html标签中以“取悦”IE。（这个是一个历史原因，我们也不推荐使用ng:）?1&html xmlns:ng=&http://angularjs.org&&三、自动初始化Angular会在DOMContentLoaded事件中自动初始化，Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到，Angular会做以下事情：加载与module相关的directive。创建应用相关的injector（依赖管理器）。以ng-app指定根节点，开始对DOM进行相关“编译”工作。换言之，可以将页面的其中一部分（非&html&）作为根节点，从而限制angular的作用范围。?1234567891011121314151617&!DOCTYPE HTML&&html&&head&
&meta charset=&UTF-8&&
&title&Bootstrap-auto&/title&
&style type=&text/css&&
.ng-cloak {
&/style&&/head&&body&
这里是ng-app外面的~~{{1+2}}
&div ng-app&这里是ng-app里面~~~{{1+3*2}}&/div&
&script src=&../angular-1.0.1.js& type=&text/javascript&&&/script&&/body&&/html&注：里面的”ng-cloak”，这个是用于在angular.js编译完成之前（对！没错！是编译完成之前，不是angularjs加载完成之前。所以，如果想很好地避免这个情况，最好的办法是优化应用的加载流程，或者结合css对未编译的模版进行处理。而由于那万恶的ie6、7不支持属性选择器，所以最好使用class=”ng-cloak”的方式。编译完成后，这个class或属性会被删除。）隐藏模版，避免在页面显示原模版。四、手工初始化如果我们想进一步控制初始化进程(例如你需要通过script loader加载angular.js或者在angular编译页面前做一些操作)，那么我们可以用一个手工调用的启动方法去代替。以下例子等同于使用ng-app这个directive：?12345678910111213141516171819202122&!DOCTYPE HTML&&html&&head&
&meta charset=&UTF-8&&
&title&Bootstrap-manual&/title&
&style type=&text/css&&
.ng-cloak {
&/style&&/head&&body&
这里是ng-app外面的~~{{1+2}}
&div id=&rootOfApp&&这里是ng-app里面~~~{{1+3*2}}&/div&
&script src=&../angular-1.0.1.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
angular.element(document).ready(function() {
angular.bootstrap(angular.element(document.getElementById(&rootOfApp&)));
&/script&&/body&&/html&就是说，我们的代码可以按照以下步骤编写：1. 在页面和其他代码加载完成后，找到应用模版的根节点；2. 调用angular.bootstrap，让angular去将模版编译为一个可执行的，双向绑定的应用！这里的angular.bootstrap(element,[ modules])是一个编译命令，[modules]貌似不用写，这个问题随后会更新
(1)：先执行到最后一个e 的时候： do{ result=patt1.exec("The best things in life are free"); document.write(result); } 这时页面上的result就是eeeeee (2)：下来继续验证执行 result的值为eeeeee， while判断result不为空，又继续执行 do{ ...
4、前端框架,有很多,如bootstraps3、angularjs、...像现在主流的MVC框架有:struts2和springMVC 持久层... java web程序设计要学些什么 228 ...
Hot:最热门的FrontEnd(HTML5,CSS3,Bootstrap,Angular...**问题来了,关于怎么学习Jhipster(可以理解为怎么... 有没有 SpringMVC + Angular + boot...
(1)：先执行到最后一个e 的时候： do{ result=patt1.exec("The best things in life are free"); document.write(result); } 这时页面上的result就是eeeeee (2)：下来继续验证执行 result的值为eeeeee， while判断result不为空，又继续执行 do{ ...
先给大家简单介绍angular.js和bootstrap基本概念。 AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 Bootstrap，来自 Twitter，是目前最受欢迎的前端框...
一、总括 本文用于解释Angular初始化的过程，以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular 标签 本例用于展示如何通过推荐的路径整合Angular，实现自动初始化。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 将sciprt标签放置于页面...
bootstrapJS与angularJS并不矛盾这么说吧 angularJS一般用于网页搭建，和服务器交互等操作 他是一个MVC框架 俗一点的说法 angularJS 是干大事的！ 恩恩 而BootstrapJS 有些类似JQ 常用来操作dom等功能 而不用JQ 原因我想主要是 angularJS 的操作...
返回主页：
本文网址：http://www./view-.html基于springMVC+angular+bootstrap+mysql的简易购物网站搭建_Java教程_
基于springMVC+angular+bootstrap+mysql的简易购物网站搭建
来源：人气：3160
基于singMVC+angular+bootstrap+的简易购物网站搭建　　介绍　　前端的框架用了bootstrap， 以及bootstrap的JS， 以及很好用的angular（angular大法好）， 项目一共包含了7个静态界面， 静态界面的数据展示都使用了angularJS , 后端是基于的spring， 容器为tomcat， 项目代码分享到百度云盘， 这个项目的优势是， 所有的显示都是在前端完成， 数据交互也是通过完成， 没有频繁的页面跳转；先上两张商城的主图：　　图一：　　　　、　　　　图2：　　　　该页面可以完成商品的评价， 添加商品， 商品的搜索等功能 ， 界面代码：&%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&&%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%&&%@ taglib prefix="c" uri="/jsp/jstl/core" %&&!DOCTYPE html&&html&
&title&detail.html&/title&
&meta http-equiv="keys" content="keyword1,keyword2,keyword3"&
&meta http-equiv="descrtion" content="this is my page"&
&meta http-equiv="content-type" content="text/ charset=UTF-8"&
&link rel="stylesheet" type="text/css" href="./css/bootstrap-3.2.0/dist/css/bootstrap.min.css"/&
&script src="/jquery/2.1.3/jquery.min.js"&&/script&
&script src="/bootstrap/3.3.4/js/bootstrap.min.js"&&/script&
&script src="/angular.js/1.3.15/angular.min.js"&&/script&
.commodity{
.commentBody{
max-heiht:200
&body ng-app="app"&
&nav class="navbar navbar-default navbar-fixed-top"&
&div class="container"&
&div class="row"&
&ul class="nav navbar-nav"&
&c:if test="${name!=null}"&
&a href="###"&
欢迎${name}
&a href="./index.do"&首页&/a&
&a href="./detail.do"&分类页&/a&
&a href="./cart.do"&
&a href="./list.do"&
&li&&a href="./user.do"&用户&/a&&/li&
&div class="container content"&
&div class="row"&
&span class="glyphicon glyphicon-cd" aria-hidden="true"&&/span&
&input class="form-control" id="keyword" placeholder="输入搜索关键词?"&&br&
&button id="search" class="btn btn-primary"&搜索&/button&
&div id="groups" class="row" ng-controller="groups"&
ng-repeat="coms in groups"&
&span class="glyphicon glyphicon-fire" aria-hidden="true"&&/span&
&span class="label label-default"&
{{coms[0].type}}
&div class="panel panel-default pull-left commodity" ng-repeat="com in coms"&
&div class="panel-heading panel-primary"&
&p&{{com.name}}&/p&
&div class="panel-body"&
&p&产品介绍?{{com.depict}}&/p&
&p&厂商?{{com.manufacturer}}&/p&
&p&金额?{{com.price}}&/p&
&p&产品图片?&img ng-src={{com.img}} width=50 height=50 /&&/p&
&button class="btn btn-default" ng-click="addToCart(com.id)"&
添加到购物测
&button class="btn btn-default" ng-click="showDetail(com)"&
&div class="clearfix "&&/div&
&div class="row"&
&a href="./cart.do" class="btn btn-default" role="button"&去结账&/a&
&!-- Modal --start
&div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="detail"&
&div class="modal-dialog" role="document"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title" id="myModalLabel"&
&div class="modal-body"&
&p&产品名字{{com.name}}&/p&
&p&产品描述?{{com.depict}}&/p&
&p&产品公司{{com.manufacturer}}&/p&
&p&&产品金额?{{com.price}}&/p&
&p&产品缩略图?&img ng-src={{com.img}} width=50 height=50 /&&/p&
&div class="commentBody"&
&div ng-repeat="c in comments"&
&span class="glyphicon glyphicon-user" aria-hidden="true"&&/span&
{{c.userName}}
&div class="alert" role="alert"&
{{c.comment}}
&label for="text"&&/label&
&input type="text" name="text" id="text" placehoder="评论内容" ng-model="comment"/&
&button id="submit" class="btn btn-success" ng-click="appendComment(com.id)"&评论&/button&
&!-- Modal ---end
var userId = "${id}";
var app = angular.module("app", []);
app.controller("groups", function( $scope ) {
$scope.groups = {};
$scope.addToCart = function( comId ) {
ajaxModule.addOrder(userId, comId);
$scope.showDetail = function( com ) {
$("#detail").modal('show');
$("#detail").scope().com =
ajaxModule.getCommentById(com.id, function(res) {
$("#detail").scope().comments =
$("#detail").scope().$apply();
app.controller("detail",function($scope) {
$ments = [];
//添加评论
$scope.appendComment = function( commodityID ) {
if($ment) {
ajaxModule.addComment( commodityID, $ment , function() {
$ments.push({
userName : "${name}",
commment : $ment
$scope.$apply();
function updateIndex() {
ajaxModule.getAllCom(function( res ) {
var result = util.groupByType(res);
$("#groups").scope().groups =
$("#groups").scope().$apply();
function bind() {
$("#search").click(function() {
ajaxModule.search($("#keyword").val(), function(res) {
var result = util.groupByType(res);
$("#groups").scope().groups =
$("#groups").scope().$apply();
var util = {
*@return O
groupByType : function( res ) {
var obj = {};
for(var i=0; i&res. i++ ) {
obj[res[i].type] = obj[res[i].type] || [];
obj[res[i].type].push( res[i] );
*@desc ajax
var ajaxModule = {
getAllCom : function(cb) {
$.post("admin/getAllCom.do", cb);
addOrder : function(userId, commodityIds ,cb) {
$.post("addOrder.do",{userId:userId, commodityIds:commodityIds, commodityCounts:"1"}, function(res) {
console.log("addOrder.do response is "+ res);
alert("添加成功");
alert("添加失败");
search : function(keyword, cb) {
$.post("search.do", {keyword:keyword}, cb);
getCommentById : function(id, cb) {
$.post("admin/getCommentById.do",{commodityId:id}, cb);
addComment : function(commodityID, comment ,cb) {
$.post("./addComment.do", {userId : '${id}', userName : '${name}',commodityID : commodityID, comment: comment}, function( res ) {
alert("评论添加失败");
$(function() {
updateIndex();
&/script&&/html&View Code　　主页2:&%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&&%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%&&%@ taglib prefix="c" uri="/jsp/jstl/core" %&&!DOCTYPE html&&html&
&title&index&/title&
&meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
&meta http-equiv="description" content="this is my page"&
&meta http-equiv="content-type" content="text/ charset=UTF-8"&
&link rel="stylesheet" type="text/css" href="./css/bootstrap-3.2.0/dist/css/bootstrap.min.css"/&
&script src="/jquery/2.1.3/jquery.min.js"&&/script&
&script src="/bootstrap/3.3.4/js/bootstrap.min.js"&&/script&
&script src="/angular.js/1.3.15/angular.min.js"&&/script&
height:240
.padding20{
padding:20
margin-top:100
&body ng-app="app"&
&nav class="navbar navbar-default navbar-fixed-top"&
&div class="container"&
&div class="row"&
&ul class="nav navbar-nav"&
&c:if test="${name!=null}"&
&a href="###"&
欢迎${name}
&a href="./index.do"&首页&/a&
&a href="./detail.do"&类型页&/a&
&a href="./cart.do"&
&a href="./list.do"&
&li&&a href="./user.do"&用户信息&/a&&/li&
&div class="container"&
&div id="index" class="row" ng-controller="index"&
&div class="panel panel-default"&
&div class="panel-body"&
&div class="thumbnail pull-left com" ng-repeat="com in coms"&
&img ng-src="{{com.img}}"
width="40" height="40"&
&div class="caption"&
&h3&{{com.name}}&/h3&
&p&{{com.depict}}&/p&
&a href="#" class="btn btn-primary" role="button" ng-click="addToCart(com.id)"&添加商品&/a&
&button class="btn btn-default" ng-click="showDetail(com)"&
&div class="row"&
&a href="./cart.do" class="btn btn-default" role="button"&去购物车&/a&
&!-- Modal --start
&div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="detail"&
&div class="modal-dialog" role="document"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title" id="myModalLabel"&
&div class="modal-body"&
&p&产品名字{{com.name}}&/p&
&p&产品描述?{{com.depict}}&/p&
&p&产品公司{{com.manufacturer}}&/p&
&p&&产品金额?{{com.price}}&/p&
&p&产品缩略图?&img ng-src={{com.img}} width=50 height=50 /&&/p&
&div class="commentBody"&
&div ng-repeat="c in comments"&
&span class="glyphicon glyphicon-user" aria-hidden="true"&&/span&
{{c.userName}}
&div class="alert" role="alert"&
{{c.comment}}
&label for="text"&&/label&
&input type="text" name="text" id="text" placehoder="评论内容" ng-model="comment"/&
&button id="submit" class="btn btn-success" ng-click="appendComment(com.id)"&评论&/button&
&!-- Modal ---end
var userId = "${id}";
var app = angular.module("app", []);
app.controller("index", function( $scope ) {
$scope.addToCart = function( comId ) {
ajaxModule.addOrder(userId, comId);
$scope.showDetail = function( com ) {
$("#detail").modal('show');
$("#detail").scope().com =
ajaxModule.getCommentById(com.id, function(res) {
$("#detail").scope().comments =
$("#detail").scope().$apply();
app.controller("detail",function($scope) {
$ments = [];
//添加评论
$scope.appendComment = function( commodityID ) {
if($ment) {
ajaxModule.addComment( commodityID, $ment , function() {
$ments.push({
userName : "${name}",
commment : $ment
$scope.$apply();
var ajaxModule = {
getAllCom : function( cb ) {
$.post("admin/getAllCom.do",cb);
addOrder : function(userId, commodityIds ,cb) {
$.post("addOrder.do",{userId:userId, commodityIds:commodityIds, commodityCounts:"1"}, function(res) {
console.log("addOrder.do response is "+ res);
alert("添加成功");
alert("添加失败");
getCommentById : function(id, cb) {
$.post("admin/getCommentById.do",{commodityId:id}, cb);
addComment : function(commodityID, comment ,cb) {
$.post("./addComment.do", {userId : '${id}', userName : '${name}',commodityID : commodityID, comment: comment}, function( res ) {
alert("评论添加失败");
function index() {
ajaxModule.getAllCom(function( res ) {
$("#index").scope().coms =
$("#index").scope().$apply();
$(function() {
&/body&&/html&View Code　　后台管理界面， 这个界面只允许用户role值为1用户查看， 用户角色是的用户表关联的， 也就是说是管理员的时候， 才能进入后台页编辑商品，编辑评论等高级功能：　　　　　　界面代码:&%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&&%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%&&%@ taglib prefix="c" uri="/jsp/jstl/core" %&&!DOCTYPE html&&html&&head&
&title&admin.html&/title&
&meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
&meta http-equiv="description" content="this is my page"&
&meta http-equiv="content-type" content="text/ charset=UTF-8"&
&link rel="stylesheet" type="text/css" href="../css/bootstrap-3.2.0/dist/css/bootstrap.min.css"/&
&script src="/jquery/2.1.3/jquery.min.js"&&/script&
&script src="/bootstrap/3.3.4/js/bootstrap.min.js"&&/script&
&script src="/angular.js/1.3.15/angular.min.js"&&/script&
.bs-example {
padding: 45px 15px 15
margin: 0 -15px 15
border-color: #E5E5E5 #EEE #EEE;
border-style:
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
&/style&&/head&&body&
&div class="container" ng-app="app"&
&div class="row"&
&a href="../index.do"&首页&/a&
&div class="row"&
&div class="bs-example bs-example-tabs" data-example-id="togglable-tabs"&
&ul id="myTabs" class="nav nav-tabs" role="tablist"&
&li role="presentation" class="active"&
&a id="tab0" href="#orderform" id="home-tab" role="tab" data-toggle="tab" aria-controls="orderform" aria-expanded="true"&所有订单&/a&
&li role="presentation"&
&a id="tab1" href="#types" id="types-tab" role="tab" data-toggle="tab" aria-controls="types" aria-expanded="true"&商品类型编辑??&/a&
&li role="presentation"&
&a id="tab2" href="#pro" role="tab" id="pro-tab" data-toggle="tab" aria-controls="pro"&商品编辑??&/a&
&li role="presentation"&
&a id="tab3" href="#about" role="tab" id="about-tab" data-toggle="tab" aria-controls="about"&所有评论&/a&
&div id="myTabContent" class="tab-content"&
&div role="tabpanel" class="tab-pane fade in active orderform" id="orderform" aria-labelledby="home-tab"
ng-controller="orderform"&
&table class="table table-hover table-bordered"&
&th&订单id&/th&
&th&地址&/th&
&th&总金额?&/th&
&th&手机?&/th&
&th&详细信息&/th&
&tr ng-repeat="item in orderforms"&
&th scope="row"&{{item.id}}&/th&
&td&{{item.address}}&/td&
&td&{{item.totalPrice}}&/td&
&td&{{item.phone}}&/td&
&a ng-click="showInfo(item.orderlist)" href="###"&
查看订单详细信息
&div class="row"&
&ul class="list-group"&
class="list-group-item" ng-repeat="com in commoditys"&
&p&第{{$index+1}}条: 商品id为{{modityId}}, 的总数是为{{modityCount}}&/p&
&div commodity-directive id="{{modityId}}"&
&p&商品名字?{{res.name}}&/p&
&p&商品描述?{{res.depict}}&/p&
&p&商品厂商{{res.manufacturer}}&/p&
&p&商品价格?{{res.price}}&/p&
&p&商品logo?&img ng-src={{res.img}}
width=50 height=50/&&/p&
&div role="tabpanel" class="tab-pane fade types" id="types" aria-labelledby="type-tab" ng-controller="types"&
&div class="row"&
&ul class="list-group"&
class="list-group-item"&类型&/li&
class="list-group-item" ng-repeat="type in types"&
{{type.name}}
&button class="btn btn-default pull-right" ng-click="delType( type.id )"&删除该类型&/button&
&div class="row"&
&input placeholder="新类型名字" id="new_type" ng-model="new_type"&
&button class="btn btn-default" ng-click="new_type_fn()"&创建新类型??&/button&
&div id="pro" role="tabpanel" class="tab-pane fade" id="pro" aria-labelledby="pro-tab" ng-controller="pros"&
&button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&
创建新商品??
&ul class="list-group"&
&li class="list-group-item" ng-repeat="com in coms"&
&p&商品名{{com.name}}&/p&
&p&商品描述?{{com.depict}}&/p&
&p&商品公司{{com.manufacturer}}&/p&
&p&商品价格?{{com.price}}&/p&
&p&商品logo?&img ng-src={{com.img}} width=50 height=50 /&&/p&
&button class="btn btn-default" ng-click="removePro(com.id)"&
删除该商品??
role="tabpanel" class="comments tab-pane fade" id="about" aria-labelledby="about-tab" ng-controller="comments"&
&ul class="list-group"&
&li class="list-group-item" ng-repeat="comment in comments"&
&p&评论列表:&/p&
&div commodity-directive id="{{modityId}}"&
&p&商品名字{{res.name}}&/p&
&p&商品描述?{{res.depict}}&/p&
&strong&{{comment.userName}} &b&说&/b&&/strong&
&span&{{ment}}&/span&
&!-- Modal start --&
&div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&
&div class="modal-dialog" role="document"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title" id="myModalLabel"&创建商品&/h4&
&div class="modal-body"&
&div class="form-group"&
&label for="name"&name&/label&
&input type=text class="form-control" id="name" placeholder="商品名"&
&div class="form-group"&
&label for="depict"&depict&/label&
&input type=text class="form-control" id="depict" placeholder="商品描述"&
&div class="form-group"&
&label for="price"&price&/label&
&input type=text class="form-control" id="price" placeholder="商品价格"&
&div class="form-group"&
&label for="amount"&amount&/label&
&input type="text" class="form-control" id="amount" placeholder="商品个数"&
&div class="form-group"&
&label for="manufacturer"&manufacturer&/label&
&input type="text" class="form-control" id="manufacturer"" placeholder="商品厂商"&
&div class="form-group"&
&label for="img"&img&/label&
&input type="text" class="form-control" id="img" readonly=true placeholder="图片路径"&
&input type="file" value=上传文件 id="upload"&
&select id="select" ng-controller="select"&
&option ng-repeat="type in types" value="{{type.name}}"&
{{type.name}}
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&Close&/button&
&button id="submit"
type="button" class="btn btn-primary"&Save changes&/button&
&!-- Modal end--&
var app = angular.module("app", []);
app.directive("commodityDirective", function() {
restrict : "EA",
scope : true,
link : function( $scope ,$el, $iattrs) {
$.post("../getComById.do", {id:$iattrs.id},function( res ) {
$scope.res = res[0];
$scope.$apply();
app.controller("orderform", function($scope) {
$scope.orderforms = [];
$moditys = [];
$scope.showInfo = function( info ) {
$moditys = JSON.parse(info);
$("#tab0").click(function() {
ajaxModule.getFormAllList(".orderform");
app.controller("types",function($scope) {
优质网站模板}