angular实例

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,width,height); // The "background" circle var x = width / 2; var y = height / 2; ctx.beginPath(); ctx.arc(x,y,parseInt(outerCircleRadius),Math.PI * 2,false); ctx.lineWidth = parseInt(outerCircleWidth); ctx.strokeStyle = outerCircleBackgroundColor; ctx.stroke(); // The inner circle ctx.beginPath(); ctx.arc(x,parseInt(innerCircleRadius),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,startAngle,endAngle,anticlockwise); ctx.lineWidth = parseInt(outerCircleWidth); ctx.strokeStyle = outerCircleForegroundColor; ctx.stroke(); },true); },post: function postLink(scope,controller) {} }; } }; var roundProgress = { //compile里面先对dom进行操作,再对$socpe进行监听; compile: compilationFunction,replace: true }; return roundProgress;}]);</script></body></html>

原文链接：https://www.f2er.com/angularjs/149785.html

猜你在找的Angularjs相关文章