您的位置：首页 > Web前端 > AngularJS

angularjs 入门编写

2015-08-25 15:26 549 查看

项目组一直没有前端，也不派人过来，项目又一直催上线，没办法自己写吧。开始选技术，之前有用过EasyUI说实话真的不好看。后来经研究决定用angularjs 谷歌大牛写的，这里就不详细说了

两个js搞定

<!doctype html>
<html data-ng-app="indexApp">
<head>
<title> --------------- </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="./css/lib/jquery-ui/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="./css/lib/poshytip/tip-yellow.css">
<link rel="stylesheet" type="text/css" href="./css/lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/all/awifi_2g.min.css">

<script type="text/javascript" src="./js/lib/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/lib/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/lib/jquery/jquery.poshytip.min.js"></script>
<script type="text/javascript" src="./js/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="./js/lib/angular/angular-route.min.js"></script>
<script type="text/javascript" src="./js/lib/bootstrap/ui-bootstrap-tpls-0.13.3.min.js"></script>
<!--<script type="text/javascript" src="./js/lib/highcharts/highcharts.js"></script>-->
<!--<script type="text/javascript" src="./js/lib/layer/layer.js"></script>-->
<script type="text/javascript" src="./js/all/awifi_2g.min.js"></script>
</head>

<body>
<!--整体-->
<div class="all">

<!--头(上)-->
<div class="header">
<div class="title">----------------------</div>
<div class="mark" data-ng-controller="topMenuController">
<!--  <img src="./images/touxiang.png"/>  -->
<span>{{ userName }}</span>
<a href="/j_spring_security_logout">退出</a>
<img src="./images/logo.png"/>
</div>
</div><!--头(上)-->

<!--下(中间)-->
<div class="centre">
<!--下(左)-->
<div class="left">

<div class="menu" id="user_menu">
<!-- <img src="images/userManager.png"/> -->
<span class="sp1">用户管理</span>
<img id="img01" src="./images/arrow_u.png" width="100%" />
</div>

<ul class="user_menu" id="user_ul" data-ng-controller="leftMenuController">
<a href="#/user/list"><li data-ng-click="selectMenu($event)">用户列表</li></a>
<a href="#/staticuser/list"><li data-ng-click="selectMenu($event)">参数配置</li></a>
<a href="#/blackList/blackListHistoryList"><li data-ng-click="selectMenu($event)">黑名单设置</li></a>
<a href="#/blacklist/manage"><li data-ng-click="selectMenu($event)">黑名单管理</li></a>
</ul>

<div class="menu" id="user_menu">
<!-- <img src="images/userManager.png"/> -->
<span class="sp1">系统设置</span>
<img id="img01" src="./images/arrow_u.png" width="100%" />
</div>

<ul class="user_menu" id="user_ul" data-ng-controller="leftMenuController">
<a href="#/sysconfig/list"><li data-ng-click="selectMenu($event)">系统参数配置</li></a>
<a href="#/exceptionlog/list"><li data-ng-click="selectMenu($event)">异常日志</li></a>
<a href="#/requestlog/list"><li data-ng-click="selectMenu($event)">请求日志</li></a>
</ul>

</div><!--下(左)-->

<!--下(右)-->
<div class="right" data-ng-view=""></div>
<!--下(右)-->

</div><!--下(中间)-->

</div><!--整体-->
</body>
</html>

　　先把大体做出来，然后就要MVC了跟后台MVC类似，很容易上手，通过

<a href="#/exceptionlog/list">

indexApp.config(function($routeProvider) {
$routeProvider
.when('/', {//第一次加载时，默认模板
templateUrl : 'html/template/user/userList.html',
controller  : 'userListController'
})
.when('/user/list', {//用户列表
templateUrl : 'html/template/user/userList.html',
controller  : 'userListController'
})
.when('/blackList/blackListHistoryList', {//黑名单列表(分页)
templateUrl : 'html/template/blacklist/blackList.html',
controller  : 'blackListController'
})
.when('/blackList/details',{//黑名单设置详情
templateUrl : 'html/template/blacklist/BlacklistDetails.html',
controller  : 'blacklistDetailsController'
})
.when('/blacklist/manage', {//黑名单管理
templateUrl : 'html/template/blacklist/BlacklistManage.html',
controller  : 'blacklistManageController'
})
.when('/sysconfig/list',{//系统参数列表
templateUrl : 'html/template/system/sysConfigList.html',
controller  : 'sysConfigListController'
})
.when('/sysconfig/add',{//新增系统参数
templateUrl : 'html/template/system/sysConfigAdd.html',
controller  : 'sysConfigAddController'
})
.when('/sysconfig/edit',{//编辑系统参数
templateUrl : 'html/template/system/sysConfigEdit.html',
controller  : 'sysConfigEditController'
})
.when('/staticuser/list',{//静态用户名认证中的MAC列表
templateUrl : 'html/template/staticuser/staticUserList.html',
controller  : 'staticUserListController'
})
.when('/requestlog/list',{//请求日志列表
templateUrl : 'html/template/system/requestLogList.html',
controller  : 'requestLogListController'
})
.when('/exceptionlog/list', {//异常日志列表
templateUrl : 'html/template/log/exceptionlogList.html',
controller  : 'exceptionlogListController'
})

.otherwise({
redirectTo: '/'
});
});

　　分配controller

看这个controller,service,dao 是不是很熟悉呀。。。呵呵

indexApp.controller('blackListController', function($scope, blackListService)

　调用controller 再把service注入进来

//黑名单列表(分页)
function list(){
blackListService.BlackListHistoryList($scope);
initConditionForDate();
};
$scope.list = list;

　　service在调用BlackListHistoryList

突然不想写了，改天再补上吧。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航