angular实例

爱被打了一巴掌 2022-01-15 04:33 222阅读 0赞

`1.ng-app`指令标记了AngularJS脚本的作用域，在`<html>`中添加`ng-app`属性即说明整个`<html>`都是AngularJS脚本作用域。开发者也可以在局部使用`ng-app`指令，如`<div ng-app>`，则AngularJS脚本仅在该`<div>`中运行。

2.这行代码载入angular.js脚本，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本，angular.js脚本运行后将会寻找含有`ng-app`指令的HTML标签，该标签即定义了AngularJS应用的作用域。

3.AngularJS模板的核心功能——绑定，这个绑定由双大括号`{ {}}`

实例：

<!DOCTYPE html>  
<html ng-app="APP">  
<head>  
<meta charset="UTF-8">  
<script src="js/angular.js"></script>  
</head>  
<body ng-controller="MainCtrl">  
  
<div ang:round:progress data-round-progress-model="roundProgressData"></div>  
<br>  
<input type="number" ng-model="roundProgressData.label"/>  
<script>  
//引用angular.directives-round-progress这个模块;  
var APP = angular.module('APP', \['angular.directives-round-progress'\]).  
controller('MainCtrl', function($scope) \{  
$scope.roundProgressData = \{  
//这个是初始化的数据;  
label: 11,  
percentage: 0.11  
\}  
//通过监听scope下的这个roundProgressData属性, 对界面的canvas进行重绘;  
$scope.$watch('roundProgressData', function (newValue) \{  
newValue.percentage = newValue.label / 100;  
\}, true);  
\});  
</script>  
<script>  
/\*!  
\* AngularJS Round Progress Directive  
\*  
\* Copyright 2013 Stephane Begaudeau  
\* Released under the MIT license  
\*/  
angular.module('angular.directives-round-progress', \[\]).directive('angRoundProgress', \[function () \{  
var compilationFunction = function (templateElement, templateAttributes, transclude) \{  
if (templateElement.length === 1) \{  
//初始化DOM模型, 包括初始化canvas等;  
var node = templateElement\[0\];  
var width = node.getAttribute('data-round-progress-width') || '400';  
var height = node.getAttribute('data-round-progress-height') || '400';  
var canvas = document.createElement('canvas');  
canvas.setAttribute('width', width);  
canvas.setAttribute('height', height);  
canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model'));  
//相当于demo, 替换原来的元素;  
node.parentNode.replaceChild(canvas, node);  
//各种配置;  
var outerCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';  
var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';  
var outerCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') || '\#505769';  
var outerCircleForegroundColor = node.getAttribute('data-round-progress-outer-circle-foreground-color') || '\#12eeb9';  
var innerCircleColor = node.getAttribute('data-round-progress-inner-circle-color') || '\#505769';  
var labelColor = node.getAttribute('data-round-progress-label-color') || '\#12eeb9';  
var outerCircleRadius = node.getAttribute('data-round-progress-outer-circle-radius') || '100';  
var innerCircleRadius = node.getAttribute('data-round-progress-inner-circle-radius') || '70';  
var labelFont = node.getAttribute('data-round-progress-label-font') || '50pt Calibri';  
return \{  
pre: function preLink(scope, instanceElement, instanceAttributes, controller) \{  
var expression = canvas.getAttribute('data-round-progress-model');  
//监听模型, O了  
//就监听一个属性;  
scope.$watch(expression, function (newValue, oldValue) \{  
// Create the content of the canvas  
//包括新建和重绘;  
var ctx = canvas.getContext('2d');  
ctx.clearRect(0, 0, width, height);  
// The "background" circle  
var x = width / 2;  
var y = height / 2;  
ctx.beginPath();  
ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI \* 2, false);  
ctx.lineWidth = parseInt(outerCircleWidth);  
ctx.strokeStyle = outerCircleBackgroundColor;  
ctx.stroke();  
// The inner circle  
ctx.beginPath();  
ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI \* 2, false);  
ctx.lineWidth = parseInt(innerCircleWidth);  
ctx.strokeStyle = innerCircleColor;  
ctx.stroke();  
// The inner number  
ctx.font = labelFont;  
ctx.textAlign = 'center';  
ctx.textBaseline = 'middle';  
ctx.fillStyle = labelColor;  
ctx.fillText(newValue.label, x, y);  
// The "foreground" circle  
var startAngle = - (Math.PI / 2);  
var endAngle = ((Math.PI \* 2 ) \* newValue.percentage) - (Math.PI / 2);  
var anticlockwise = false;  
ctx.beginPath();  
ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, anticlockwise);  
ctx.lineWidth = parseInt(outerCircleWidth);  
ctx.strokeStyle = outerCircleForegroundColor;  
ctx.stroke();  
\}, true);  
\},  
post: function postLink(scope, instanceElement, instanceAttributes, controller) \{\}  
\};  
\}  
\};  
var roundProgress = \{  
//compile里面先对dom进行操作, 再对$socpe进行监听;  
compile: compilationFunction,  
replace: true  
\};  
return roundProgress;  
\}\]);  
</script>  
</body>  
</html>

转载于:https://blog.51cto.com/warmdoll/1754327