angular入门

落叶换新叶

浏览: 25597 次
性别:

最近访客更多访客>>

ehu1986

u010214413

zyhby2017

javaweb小王子

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

angularjs

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>

分享到：