Angular 前后端分离
1. 项目结构
index.html
Document
//顺序不要变
template
addStudent.html
showStudent.html
main.html
UpdateStudent.html
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