AngularJS实战

下载并应用AngularJS
地址：https://angularjs.org/
模块，控制器和数据绑定：AngularJS实现了纯页面端的MVC，即实现了视图模板，数据模板和代码控制的分离
AngularJS为了分离代码达到复用的效果，提供了一个module(模块)

无依赖模块：
angular.module('firstModule' , []);
有依赖模块：
angular.module('firstModule' , ['moduleA', 'moduleB']);

多视图和路由

AngularJS内置了一个$routeProvider对象来负责页面加载和页面路由转向。
1.2.0之后的AngularJS将路由功能移出，所以使用路由功能要另外引入angular-route.js

实战

建立一个只选Web依赖的Spring Boot项目

导入该有的包

action.html

<!DOCTYPE html>
<html lang="zh-cn" ng-app="actionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实战</title>

<!-- Bootstrap的CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="jqueryui/jquery-ui.min.css" rel="stylesheet">
<style type="text/css">

.content {
  padding: 100px 15px;
  text-align: center;
}
</style>

<!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#/oper">后台交互</a></li>
            <li><a href="#/directive">自定义指令</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
	
	
     <div class="content">
        <ng-view></ng-view> 
    </div>
	<script src="js/jquery.min.js"></script>
	<script src="jqueryui/jquery-ui.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/angular.min.js"></script>
	<script src="js/angular-route.min.js"></script>
	<script src="js-action/app.js"></script>
	<script src="js-action/directives.js"></script>
	<script src="js-action/controllers.js"></script>
</body>
</html>

app.js定义AngularJS的模块和路由

/**
 * 
 */

var actionApp = angular.module('actionApp',['ngRoute']);




actionApp.config(['$routeProvider' , function($routeProvider) {
	
	$routeProvider.when('/oper', { 
		controller: 'View1Controller', 
		templateUrl: 'views/view1.html', 
	}).when('/directive', {
		controller: 'View2Controller',
		templateUrl: 'views/view2.html',
	});

}]);

directives.js为自定义的指令

/**
 * 
 */

actionApp.directive('datePicker',function(){
    return {
        restrict: 'AC',    //限制为属性样式和元素样式
        link:function(scope,elem,attrs){
           // scope.treeObj = $.fn.zTree.init(elem, scope.settings);
            
            elem.datepicker();
        }
    };
});

controllers.js是控制器定义
$viewContentLoaded事件，可以在页面内容加载完成后进行一些操作。

/**
 * 
 */

actionApp.controller('View1Controller', ['$rootScope', '$scope', '$http', function($rootScope, $scope,$http) {
    $scope.$on('$viewContentLoaded', function() {
    	console.log('页面加载完成');
    });
    
    
    $scope.search = function(){
      personName = $scope.personName;
      $http.get('search',{
    	  params:{personName:personName}
      }).success(function(data){
    	 $scope.person=data;
      });;
     
    };
}]);

actionApp.controller('View2Controller', ['$rootScope', '$scope',  function($rootScope, $scope) {
    $scope.$on('$viewContentLoaded', function() {
    	console.log('页面加载完成');
    });
}]);

view1.html(演示与服务器交互)

  <div class="row">
    <label for="attr" class="col-md-2 control-label">属性形式</label>
    <div class="col-md-2">
      <input type="text" class="form-control" date-picker>
    </div>
  </div>
  
  <div class="row">
    <label for="style" class="col-md-2 control-label">样式形式</label>
    <div class="col-md-2">
      <input type="text" class="form-control date-picker" >
    </div>
  </div>

view2.html（演示自定义指令）

  <div class="row">
    <label for="attr" class="col-md-2 control-label">名称</label>
    <div class="col-md-2">
      <input type="text" class="form-control" ng-model="personName">
    </div>
    <div class="col-md-1">
    	<button class="btn btn-primary" ng-click="search()">查询</button>
    </div>
  </div>
  
   <div class="row">
     <div class="col-md-4">
		  <ul class="list-group">
		  	<li class="list-group-item">名字： {{person.name}}</li>
		  	<li class="list-group-item">年龄：  {{person.age}}</li>
		  	<li class="list-group-item">地址：  {{person.address}}</li>
		  </ul>
  </div>
  </div>

服务端代码：

传值对象JavaBean：

package com.example;

public class Person {
	private String name;
	private Integer age;
	private String address;
	
	
	public Person() {
		super();
	}
	public Person(String name, Integer age, String address) {
		super();
		this.name = name;
		this.age = age;
		this.address = address;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getAge() {
		return age;
	}
	public void setAge(Integer age) {
		this.age = age;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	
	

}

控制器：

package com.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@SpringBootApplication
public class Ch77Application {
	
	@RequestMapping(value="/search",produces={MediaType.APPLICATION_JSON_VALUE})
	public Person search(String personName){
		
		return new Person(personName, 32, "hefei");
		
	}

    public static void main(String[] args) {
        SpringApplication.run(Ch77Application.class, args);
    }
}

效果图

AngularJS实战

AngularJS实战

猜你喜欢