AngularJS 介绍

迷南。 2022-03-25 07:56 224阅读 0赞

AngularJS是一个开发动态Web应用的框架。它让你可以使用HTML作为模板语言并且可以通过扩展的HTML语法来使应用组件更加清晰和简洁。它的创新之处在于，通过数据绑定和依赖注入减少了大量代码，而这些都在浏览器端通过JavaScript实现，能够和任何服务器端技术完美结合。

参考网站 [http://www.angularjs.net.cn/][http_www.angularjs.net.cn]

Angular名称概念：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!doctype html>
    
    <html ng-app="myApp">
      <head>
    	<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
      </head>
      <body>
      	
      	
        <div ng-controller="TestCtrl" ng-init="init()">
          <b>订单:</b>
          <div>
          		
            	数量: <input name="num" type="number" ng-model="num" required >
          </div>
          <div>
          		
            	单价: <input name="price" type="number" ng-model="price" required >
          </div>
          <div>
          	
            <b>总价:{
       { num * price}}</b> 
          </div>
        </div>
        <script>
        	//定义angular模块myApp,绑定到Dom根元素
    	    var myApp = angular.module('myApp',[]);
    	    //在模块myApp中定义Controller
    	    //$scope是数据作用域,负责数据对象管理
    	    //Angular采用注入对象管理服务，如果需要服务通过构造注入的方式
    	    myApp.controller('TestCtrl', ['$scope', function($scope) {
    	    	//定义数据属性
    	        $scope.num = 10;
    	        $scope.price = 15;
    	        //定义方法
    	        $scope.init = function()
    	        {
    	        	alert('init function');
    	        }
    	    }]);
        
        </script>
      </body>
    </html>

服务

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!doctype html>
    
    <html ng-app="myApp">
      <head>
    	<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
      </head>
      <body>
      	
      	
        <div ng-controller="TestCtrl" ng-init="init()">
          <b>订单:</b>
          <div>
          		
            	数量: <input name="num" type="number" ng-model="num" required >
          </div>
          <div>
          		
            	单价: <input name="price" type="number" ng-model="price" required >
          </div>
          <div>
          	
            <b>总价:{
       { num * price}}</b> 
          </div>
        </div>
        <script>
        	//定义angular模块myApp,绑定到Dom根元素
    	    var myApp = angular.module('myApp',[]);
    	    //创建 'greeter' 服务 
    	    myApp.factory('greeter', function($window) {
    	        // 这是一个 factory 函数，负责创建 'greeter' 服务 
    	        return {
    	          greet: function(text) {
    	            $window.alert(text);
    	          }
    	        };
    		});
    	    //在模块myApp中定义Controller
    	    //$scope是数据作用域,负责数据对象管理
    	    //TestCtrl注入了$scope与自定义服务greeter,注入了几个服务构造方法就需要几个参数function($scope,greeter)
    	    myApp.controller('TestCtrl', ['$scope','greeter', function($scope,greeter) {
    	    	//定义数据属性
    	        $scope.num = 10;
    	        $scope.price = 15;
    	        //定义方法
    	        $scope.init = function()
    	        {
    	        	greeter.greet('init function');
    	        }
    	    }]);
    
        </script>
      </body>
    </html>

[http_www.angularjs.net.cn]: http://www.angularjs.net.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]: /images/20220325/7eaaa82fbd5d464b8c52f1cb9c148089.png