angularJS 练习

最新推荐文章于 2019-07-24 11:33:20 发布

Java_攻城狮

最新推荐文章于 2019-07-24 11:33:20 发布

阅读量590

点赞数 1

分类专栏： Web 前端文章标签： web angularjs Java

Web 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

前端

16 篇文章 0 订阅

订阅专栏

学习地址：http://www.runoob.com/angularjs/angularjs-tutorial.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="cloud">
  <meta name="Keywords" content="angularJS web 前端">
  <meta name="Description" content="">
  <title>angularJs练习</title>
 
	<script src = "https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
 </head>
 <body>
	<!-- angular 值绑定 -->
	<div ng-app = "user_name_app" ng-controller = "user_name_controller">
		姓: <input type="text" ng-model="f_name"><br>
		名: <input type="text" ng-model="l_name"><br>
		
		<!-- angular 表达式 -->
		<div>
			姓名: {{f_name + l_name}}
		</div>
	
		<!-- angular 表达式 -->
		<div ng-init="quantity=1;cost=5">
			{{ quantity * cost }}
		</div>

		<!-- angular 表达式 -->
		{{1 + 1}}

		<!-- angular 表达式 -->
		<div ng-init="points=[1,15,19,2,40]">
			{{ points[0]}}
		</div>
	</div>
	
	<!-- angular 脚本 -->
	<script>
		var app = angular.module('user_name_app', []);
		app.controller('user_name_controller', function($scope) {
			$scope.f_name= "china";
			$scope.l_name= "cloud";
		});
	</script>
 </body>
</html>