angluar ajax实例,angular实例

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

，则AngularJS脚本仅在该

中运行。

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

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

实例：

//引用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);

});

/*!

* 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;

}]);