angular采用的是1.6.5,
1.ng-model,ng-include,ng-click,ng-hide,ng-show,form表单的使用
<!doctype html>
<html>
<head>
<script src="angular.js"></script>
<title>第一个AngularJS程序</title>
</head>
<body>
<div ng-app="mainApp" ng-controller="studentFun">
<br>------------------ng-model-------------------</br>
<div><input type="text" ng-model="studentDTO.firstName"></div>
<div><input type="text" ng-model="studentDTO.lastName"></div>
<div><input type="text" ng-model="studentDTO.fees"></div>
<div>{{studentDTO.fullName()|uppercase}}</div>
<div>{{studentDTO.fees|currency}}</div>
<div><input type="text" ng-model="subjectName"></div>
<div>
<ul>
<li ng-repeat="subject in studentDTO.subjects | filter:subjectName|orderBy:'marks'">{{subject.name+",marks"+subject.marks}}</li>
</ul>
</div>
<br>-------------------include 引用----------------------</br>
<div ng-include="'main.html'"></div>
<br>------------------ng-click,ng-hide,ng-show----------------</br>
<div>
<input type="checkbox" ng-model="enableDisableButton"/>button
<button ng-disabled="enableDisableButton">click me</button>
<div>{{clickCouter}}</div>
<button ng-click="clickCouter=clickCouter+1">click me</button>
<div><input type="checkbox" ng-model="showButton">button</div>
<div><button ng-hide="showButton">click me</button></div>
</div>
<br>-----------------------form---------------------</br>
<div>
<form name="studentForm">
<input type="text" name="firstName" ng-model="firstName" required>
<span style="color:red" ng-show="studentForm.firstName.$dirty && studentForm.firstName.$invalid">
<span ng-show="studentForm.firstName.$error.required">姓氏不能为空</span>
</span>
<input type="email" name="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show="studentForm.email.$error.required">邮箱不能为空</span>
<span ng-show="studentForm.email.$error.email">不符合邮箱规则</span>
</span>
</form>
</div>
</div>
<script>
var mainApp = angular.module("mainApp",[]);
mainApp.controller("studentFun",function($scope){
$scope.studentDTO = {
firstName:"李",
lastName:"四",
fees:"200",
subjects:[
{name:"物理",marks:83},
{name:"化学",marks:81},
{name:"数学",marks:82}
],
fullName:function() {
var studentObject = $scope.studentDTO;
return studentObject.firstName+studentObject.lastName;
}
};
});
</script>
<script>
angular.module("myapp", [])
.controller("HelloController",function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
<script>
angular.module("app",[]).controller('helloController',function($scope) {
$scope.product = {};
$scope.product.productName = '产品名称';
$scope.product.price = 10.01;
});
</script>
main.html
<table border="0">
<tr><td>姓氏:</td><td><input type="text" ng-model="studentDTO.firstName"></td></tr>
<tr><td>名字: </td><td><input type="text" ng-model="studentDTO.lastName"></td></tr>
<tr><td>全名: </td><td>{{studentDTO.fullName()}}</td></tr>
</table>
2.ajax的使用，这个是重点，前后端分离必须要用到的
注：1.6版本以前采用的是$http.get().success(),在1.6版本之后采用的是$http.get().then()
<html>
<head>
<title>Angular JS Controller</title>
<script src="angular.js"></script>
</head>
<body>
<h2>ajax请求</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table>
<tr>
<td>名称</td><td>号码</td><td>百分比</td>
</tr>
<tr ng-repeat="s in students">
<td>{{s.name}}</td><td>{{s.phone}}</td><td>{{s.percent}}</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope,$http) {
$http.get("./data.json",{
params: {
name: '张三',
age: 'abc'
}
}).then(function(response) {
$scope.students = response.data;
// $scope.student = JSON.parse(response)
},function(response){
alert("error:"+error);
});
});
</script>
</body>
</html>
data.json
[{
"name":"周杰伦",
"phone":"12345",
"percent":"0.2"
},{
"name":"李晓春",
"phone":"1234567",
"percent":"0.3"
},{
"name":"李连杰",
"phone":"112211",
"percent":"0.5"
}]
3.ng-routeProvider,ng-template,ng-view的使用，用的场景可能就是tab页
注：1.6版本之前不需要$locationProvider.hashPrefix('')，这个作用是处理点击链接时会出现#!addStudent的现象
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Angular JS 视图</title>
<script src="angular.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body>
<div ng-app="mainApp">
<a href="#addStudent">添加学生</a>
<a href="#viewStudent">查询学生</a>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.htm">
<h2>添加学生</h2>
{{message}}<br>
</script>
<script type="text/ng-template" id="viewStudent.htm">
<h2>查询学生</h2>
{{message}}<br>
</script>
</div>
<script>
var mainApp = angular.module("mainApp",['ngRoute']);
mainApp.config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){
$locationProvider.hashPrefix('');
$routeProvider.when('/addStudent',{
templateUrl:'addStudent.htm',
controller:'addStudentController'
}).when('/viewStudent',{
templateUrl:'viewStudent.htm',
controller:'viewStudentController'
}).otherwise({
redirectTo:'/addStudent'
});
}]);
mainApp.controller("addStudentController",function($scope){
$scope.message="这是一个提示信息，添加学生";
});
mainApp.controller("viewStudentController",function($scope){
$scope.message="这是一个提示信息，查询学生";
});
</script>
</body>
</html>
4.factory的使用，factory,service,controller这种写法有点像是后端的dao,service,controller层，代码最后注释掉的部分是采用（this.$get）AngularJS内部创建服务，工厂
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Angular JS</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="calcuController">
<div><input type="text" ng-model="number"></div>
<div><button ng-click="quire()">X</button></div>
<div>{{result}}</div>
</div>
<script>
var mainApp = angular.module("mainApp",[]);
mainApp.value("defaultInput",5);
mainApp.factory("MathService",function(){
var factory = {};
factory.multiply = function(a,b) {
return a*b;
}
return factory;
});
mainApp.service("cicleService",function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
mainApp.controller("calcuController",function($scope,cicleService,defaultInput){
$scope.number=defaultInput;
$scope.quire = function() {
$scope.result = cicleService.square($scope.number);
}
});
//mainApp.config(function($provide) {
// $provide.provider("MathService",function(){
// this.$get = function() {
// var factory = {};
// factory.multiply = function(a,b) {
// return a*b;
// }
// return factory;
// }
// });
//});
</script>
</body>
</html>