AngularJS 1.x 2.x笔记

人们总是会开发新的语言、或者改进旧的语言来使开发越来越简单(至少是开发大型项目更简单);另一个目的是使一门语言可以做更多的事。

JavaScript本来用于前端,后来NodeJS等工具的出现,使JavaScript开发服务器后端程序成为可能。

可爱的程序员们又动脑筋开发了ES6(ECMAScript6)、TypeScript、CoffeeScript等JavaScript的改进版。

AngularJS 2.0属于比较前卫的改革者,目前看了是选择了TypeScript,原因是TypeScript不像ES6那样限制于各种组织而发展缓慢。

AngularJS 1.x测试程序
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-controller="myCtrl" ng-init="color='green'">
名字: <input ng-model="name"><br>
说明:{{name + " " + info}}<br>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="260">

<circle cx="100" cy="50" r="{{r}}" stroke="black"
stroke-width="{{w}}" fill="{{color}}" />

<path d="M101 56C101 56 96 56 94 53C91 50 83 46 79 58C79 58 80 63 73 66C73 66 71 67 71 70C71 72 72 73 70 75C69 77 66 75 68 79C70 83 65 84 63 85C62 85 63 95 63 95C63 95 58 96 59 103C59 103 51 106 52 109C53 113 64 116 60 124C56.625 130.75 51.11426 128.2451 52.47794 139.9118C52.6042 140.992 52.78941 142.1938 53.0407 143.5356C53.29199 144.8774 53.60938 146.3594 54 148C54 148 61 154 49 162C49 162 44 167 59 166C59 166 65 166 55 177C55 177 53 189 55 198C57 208 72 192 61 212C61 212 51 227 60 227C60 227 63 227 58 235C53 243 55 257 61 261C67 265 65 259 65 258C65 258 69 250 76 253C76 253 88 256 88 247C88 247 87 237 96 235C96 235 99 223 105 231C111 238 116 239 127 238C127 238 131 244 135 237C139 230 139 226 140 219C140 219 145 219 149 212C152 205 143 208 148 193C148 193 151 192 142 186C142 186 134 180 144 169C144 169 154 162 155 157C155 157 155 145 166 140C166 140 168 134 165 131C162 128 154 117 155 113C156 110 157 100 141 101C141 101 137 103 139 93C139 93 142 88 124 86C124 86 121 87 124 80C126 73 113 76 112 78C110 80 105 75 103 61C103 61 102 56 101 56Z" fill="#F3CB91" fill-opacity="{{o}}" stroke="#000000" />

</svg>
<br>

<div>
颜色:{{color}}
</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.name = "microic";
	$scope.info = "microic.com";
	$scope.r = 0;
	$scope.w = 0;
	$scope.o = 1;

	$interval(function(){
		$scope.color = "red";
	
		$scope.r += 10;
		$scope.w += 1;
		$scope.o =  $scope.r / 100.0;
		$scope.info = $scope.w;
		if ($scope.r > 100) $scope.r = 0;
		if ($scope.w > 10) $scope.w = 0;
	}, 1000);
});
</script>

</body>
</html>

效果演示


发表于:2016-10-13 09:15:23

原文链接(转载请保留): http://www.multisilicon.com/blog/a34252524.html

友情链接: MICROIC
首页