AngularJS 介绍_angularjs是一个用于开发web-优快云博客

本文链接：https://blog.youkuaiyun.com/qixiang_chen/article/details/86552858

本文介绍了AngularJS这一用于开发动态Web应用的框架，详细讲解了如何利用AngularJS的数据绑定、依赖注入特性简化代码，以及如何在浏览器端实现与服务器端技术的完美结合。通过实例演示了AngularJS的基本用法，包括模块、控制器、服务的定义与使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

Angular名称概念：

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<!-- Angular应用绑定Dom根节点 -->
<html ng-app="myApp">
  <head>
	<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
  </head>
  <body>
  	<!-- ng-controller为应用变量添加控制器  -->
  	<!-- ng-init初始化应用时创建一个变量 -->
    <div ng-controller="TestCtrl" ng-init="init()">
      <b>订单:</b>
      <div>
      		<!-- 绑定数据对象num与 Dom控件num-->
        	数量: <input name="num" type="number" ng-model="num" required >
      </div>
      <div>
      		<!-- 绑定数据对象price与 Dom控件price-->
        	单价: <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>
<!-- Angular应用绑定Dom根节点 -->
<html ng-app="myApp">
  <head>
	<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
  </head>
  <body>
  	<!-- ng-controller为应用变量添加控制器  -->
  	<!-- ng-init初始化应用时创建一个变量 -->
    <div ng-controller="TestCtrl" ng-init="init()">
      <b>订单:</b>
      <div>
      		<!-- 绑定数据对象num与 Dom控件num-->
        	数量: <input name="num" type="number" ng-model="num" required >
      </div>
      <div>
      		<!-- 绑定数据对象price与 Dom控件price-->
        	单价: <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>