Angular 前后端分离

1. 项目结构

index.html

<!DOCTYPE html>
<html lang="en"  ng-app="myApp">
<head><meta charset="UTF-8"><title>Document</title>
//顺序不要变<script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="js/angular-ui-router.min.js"></script><script type="text/javascript" src="controller/StudentController.js"></script><script type="text/javascript" src="app/app.js"></script>
<body><div ui-view="content"></div>
</body>
</html>

template

addStudent.html

 <div><form>姓名:<input type="text" ng-model="formData.name" >年龄:<input type="number" ng-model="formData.age">性别:<input type="radio" name="gender" ng-model="formData.gender" value="0">女<input type="radio" name="gender" ng-model="formData.gender" value="1">男<button ng-click="add()">添加</button></form></div>

showStudent.html

 <div><table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr ng-repeat="item in datas"><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.gender}}</td><td><a ng-click="delete(item.id)">删除</a></td><td><a ui-sref="Main.getStudent({id:item.id})">更新</a></td></tr></tbody></table></div>

main.html

 <div><a ui-sref="Main.addStudent">添加</a><a ui-sref="Main.queryStudent">查询</a></div><div ui-view="Main_content"></div>

UpdateStudent.html

 <div><form>姓名:<input type="text" ng-model="formData.name" >年龄:<input type="number" ng-model="formData.age">性别:<input type="radio" name="gender" ng-model="formData.gender" value="0">女<input type="radio" name="gender" ng-model="formData.gender" value="1">男<button ng-click="">保存</button></form></div>

app.js

//千万不要忘了注册Controller
var m = angular.module('myApp',['ui.router','StudentController']);
m.config(function($stateProvider,$urlRouterProvider){$urlRouterProvider.otherwise("/Main/queryStudent");$stateProvider.state("Main",{url:'/Main',views:{"content":{templateUrl:"templates/main.html"}}}).state("Main.queryStudent",{url:'/queryStudent',views:{"Main_content@Main":{controller:'ShowStudentCNTR',templateUrl:"templates/showStudent.html"}}}).state("Main.addStudent",{url:'addStudent',views:{"Main_content@Main":{controller:'AddStudentCNTR',templateUrl:"templates/addStudent.html"}}}).state("Main.getStudent",{url:'/getStudent/{id}',views:{"Main_content@Main":{controller:'GetStudentCNTR',templateUrl:'templates/UpdateStudent.html'}}});});

StudentController.js

//牛逼的双向数据绑定
var m = angular.module("StudentController",[]);m.controller("GetStudentCNTR",function($scope,$stateParams){var id = $stateParams.id;alert(id);
});m.controller("AddStudentCNTR",function($scope){$scope.formData={gender:0}$scope.add = function(){alert($scope.formData.name)alert($scope.formData.age);alert($scope.formData.gender);}});m.controller("ShowStudentCNTR",function($scope){$scope.datas = [{id:1,name:'哈哈哈',age:18,gender:'男'},{id:2,name:'哈哈2',age:18,gender:'男'},{id:3,name:'哈哈3',age:18,gender:'男'},{id:4,name:'哈哈哈',age:18,gender:'男'},{id:1,name:'哈哈哈',age:18,gender:'男'},{id:1,name:'哈哈哈',age:18,gender:'男'},{id:1,name:'哈哈哈',age:18,gender:'男'},{id:1,name:'哈哈哈',age:18,gender:'男'}];var pos = 0;$scope.delete = function(id){for(var i=0;i<$scope.datas.length;i++){var ob = $scope.datas[i];if(ob.id==id){pos = i;break;}}$scope.datas.splice(pos, 1);$state.go("Main");}});

源码点此下载密码：enht

Angular 前后端分离相关推荐

推荐9个大气美观的前后端分离项目：前端react,vue,ts,ElementUI,Angular等，后端mysql,springBoot,myBatis,springSecurity,cloud等
文章目录 1. 引言 2. 微人事 2. 前后端分离博客项目 3. V部落博客管理平台 4. 基于SpringBoot的微信点餐系统 5. eladmin后台管理系统 6. NiceFish(美人鱼) ...
视频教程-Angular+Django前后端分离实战项目开发教程-AngularJS
Angular+Django前后端分离实战项目开发教程胜蓝博创(韬略课堂)创始人,IT培训讲师,先后在蓝港在线,热酷,乐元素等大型游戏公司任职,参与过多款大型网游.手游的设计和开发,精通页游.手游前 ...
angular4前后端分离_使用Angular v4的新HTTP客户端
angular4前后端分离 With the release of Angular v4.3 in July, some new features where introduced. Among th ...
大型医院云HIS系统：采用前后端分离架构，前端由Angular语言、JavaScript开发；后端使用Java语言开发融合B/S版电子病历系统
一套医院云his系统源码采用前后端分离架构,前端由Angular语言.JavaScript开发:后端使用Java语言开发.融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知 ...
七个开源的 SpringBoot 前后端分离项目，Star过千，快去收藏夹吃灰吧！
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 微信公众号:江南一点雨前后端分离已经在慢慢走进各公司的技 ...
某小公司RESTful、共用接口、前后端分离、接口约定的实践
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料作者:邵磊 juejin.im/post/59eafab36fb9 ...
前后端分离后的前端时代
什么是前后端分离,要区分前端和后端,需要有个明确的界限.一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了. 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的 ...
开发一个大型后台管理系统，应该用前后端分离的技术方案吗？
话说这天,我们团队开会讨论了一个问题,不,与其说"讨论",不如说"争吵"更合适. 背景是这样的: 我们要开发一个 xxx 后台管理系统,这个系统业务复杂.功能又 ...
sm4 前后端加密_这7个开源的Spring Boot前后端分离项目整理给你
来源|公众号:江南一点雨前后端分离已经开始逐渐走进各公司的技术栈,不少公司都已经切换到前后端分离开发技术栈上面了,因此建议技术人学习前后端分离开发以提升自身优势.同时,也整理了 7 个开源的 Spr ...

Angular 前后端分离

Angular 前后端分离相关推荐

最新文章

热门文章