زاوي
جميع المكتبات المستخدمة ، CDNs المستخدمة:
نسخة الكود كما يلي:
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
مثيل ربط بيانات angular ، هذا هو الأكثر أساسية ، جميع الفروع وأوراق البدء الزاوي من هنا :.
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
أقوى شيء في Angular هو ربط ربط البيانات
</div>
<viv>
<div id = "bind" ng-controller = "bf">
<type type = "text" ng-model = "data" />
{{بيانات}}
<script>
App.Controller ("BF" ، Function ($ scope) {
$ scope.data = "testData" ؛
// $ scope. $ application () ؛
}) ؛
</script>
</div>
</div>
</div>
</body>
</html>
من خلال الزاوي ، عرض البيانات المقابلة للمصفوفة ؛.
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
من خلال الزاوي ، عرض البيانات المقابلة للمصفوفة ؛
</div>
<viv>
<div id = "arr-bind" ng-app = "arr-app" ng-controller = "arrcon">
<style>
.s {
اللون:#F00 ؛
}
لي {
المؤشر: مؤشر.
}
</style>
<ul>
<li ng-repeat = "i in lists" ng click = "bered ($ index)" ng-class = "{s: $ index == flag}">
{{i.name}} ---- {{i.age}}
</li>
</ul>
<script>
//angular.module("arr-app "، []) ؛
وظيفة ARRCON (نطاق $) {
$ scope.flag = 0 ؛
$ scope.bered = function (i) {
$ scope.flag = i ؛
} ؛
$ scope.lists = [
{الاسم: "Hehe" ،
العمر: 10} ،
{
الاسم: "xx" ،
العمر: 20
} ،
{
الاسم: "YY" ،
العمر: 2
} ،
{
الاسم: "JJ" ،
العمر: 220
}
]
} ؛
</script>
</div>
</div>
</div>
</body>
</html>
عرض مرشح البيانات:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
مرشح البيانات ؛
</div>
<div ng-controller = "filte">
{{sourcode}}
<br>
{{sourcode | أعلى}}
</div>
<script>
مرشح الوظيفة (نطاق $) {
$ scope.SourCode = "Hehe lala dudu oo zz" ؛
} ؛
app.filter ("up" ، function () {
وظيفة الإرجاع (ipt) {
إرجاع ipt.replace (/(/w)/g ، الدالة ($ 0 ، $ 1) {
إرجاع "" "+$ 1. touppercase () ؛
}) ؛
}
}) ؛
</script>
</div>
</body>
</html>
. المصنع الفعلي ، مزود $ ، الخدمة ، وما إلى ذلك. لا تشعر أنه أمر صعب. في الواقع ، إنه مجرد رؤية نموذج أو مثيل بيانات ؛:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<div id = "Factory">
<viv>
يعادل المصنع في الزاوية طريقة مثيل مشترك ، والتي يمكن فهمها كدالة يمكن استخدامها بواسطة وحدات تحكم متعددة ؛
</div>
<div ng-controller = "factory">
{{json}}
<script>
app.factory ("ff" ، function () {
يعود {
"ملاحظة": "JSON"
} ؛
}) ؛
App.Controller ("Factory" ، Function ($ scope ، ff) {
$ scope.json = ff ؛
}) ؛
</script>
</div>
</div>
<viv>
<viv>
التوجيه الزاوي
</div>
<viv>
<heh> هل أنت راضية عن؟ </heh>
<script>
app.directive ("heh" ، function () {
يعود {
تقييد: "ae" ،
استبدال: صحيح ،
transclude: صحيح ،
قالب:
} ؛
})
</script>
</div>
</div>
</body>
</html>
استخدام التوجيه .NG-switch (أريد حقًا هذا القالب ، وهو زاوي للنقرات المشتركة لدينا لإخفاء وعرض المكون الإضافي لـ TAB أولاً) ::
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
استخدام ng-switch
</div>
<div ng-controller = "sw">
<div ng-init = "a = 2">
<ul ng-switch on = "a">
<li ng-switch-in = "1"> 1 </li>
<li ng-switch-in = "2"> 2 </li>
<li ng-switch-default> other </li>
</ul>
</div>
<viv>
<button ng click = "a = 1"> اختبار </button>
<button ng click = "a = 2"> اختبار </button>
<button ng click = "a = 3"> اختبار </button>
</div>
</div>
<script type = "text/javaScript">
App.Controller ("SW" ، وظيفة (نطاق $) {
}) ؛
</script>
</div>
</body>
</html>
NG-SRC و NG-HREF ؛
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
استخدام NG-SRC و NG-HREF (إذا كنت تستخدم SRC أو HREF ، فسيتم تحميل HTML عند تهيئته ، وهو بالتأكيد غير ممكن)
</div>
<div ng-controller = "srccon">
<a ng-href = "{{logo}}">
<img ng-src = "{{logo}}" />
</a>
</div>
<script type = "text/javaScript">
App.Controller ("SRCCON" ، Function ($ scope) {
$ scope.logo = "http://www.mainbo.com/templets/images/logo.gif" ؛
}) ؛
</script>
</div>
</body>
</html>
كيفية تشغيل نمط الصفحة ، ما عليك سوى تغيير نموذج البيانات المربوطة مباشرة:
نسخة الكود كما يلي:
<viv>
<viv>
يعمل Angular على الأنماط. (JQ هو تحديد العناصر يدويًا للعمل على أنماط العناصر. يوفر Angular طريقة أكثر لتعيين سمات العنصر إلى متغير ، تحتاج فقط إلى تغيير هذا المتغير)
</div>
<viv>
<hehe id = "wh" ng-style = "{width: w + 'px' ، الارتفاع: h + 'px' ، backgroundColor: '#364'}">
Hehe-O (^^) o Wow ؛
</hehe>
</div>
<script type = "text/javaScript">
app.directive ("hehe" ، function () {
وظيفة compile () {
} ؛
يعود {
الرابط: وظيفة (نطاق $ ، عنصر $) {
var obj = Angular.Element ($ element) ؛
//obj.find ليس من السهل استخدامه ؛
var add = obj [0] .getElementsByClassName ("add") [0] ؛
var تقليل = obj [0] .getElementsByClassName ("تقليل") [0] ؛
Angular.Element (إضافة) .bind ("انقر" ، وظيفة () {
$ scope.h = $ scope.h+10 ؛
يتقدم()؛
})
Angular.Element (تقليل) .bind ("انقر" ، وظيفة () {
$ scope.h = $ scope.h-10 ؛
يتقدم()؛
}) ؛
وظيفة تطبيق () {
$ scope. $ application () ؛
}
ترجمة العودة.
} ،
وحدة التحكم: وظيفة (نطاق $) {
$ scope.w = 200 ؛
$ scope.h = 50 ؛
// $ scope. $ application () ؛
} ،
تقييد: 'ae' ،
استبدال: صحيح ،
النطاق: "= نمط نانوغرام" ،
transclude: صحيح ،
قالب:
}
})
</script>
</div>
كيفية استخدام القالب في الزاوي؟ يجب استخدام هذا مع جهاز التوجيه:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
باستخدام القوالب
</div>
<div ng-controller = "ngtpl">
<! --- يجب الإعلان عن هذا النوع بدقة->
<script type = "text/ng-template" id = "tpl">
{{ver}}
</script>
<! --- TPL هي قيمة ثابتة ، وليس متغيرًا ، ويجب تحديد المتغير في النطاق --->>
<div ng-in-tclude src = "'tpl'"> </viv>
<viv>
<button ng click = "chan ()"> تغيير </button>
</div>
</div>
<script type = "text/javaScript">
app.controller ("ngtpl" ، وظيفة (نطاق $) {
وظيفة hehe (str) {
str = _.shuffle (str) ؛
إرجاع str.join ("")
} ؛
$ scope.ver = "var-ver- heehe" ؛
$ scope.chan = function () {
$ scope.ver = hehe ($ scope.ver) ؛
} ؛
}) ؛
</script>
</div>
</body>
</html>
كيفية استخدام نطاق $. شاهد $ لتغيير قالب الواجهة الربط في الوقت الفعلي:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
<span> تحديث </span> تحديثات بيانات الإخطار الزاوي بثلاث طرق نطاق $. $ digest () ، نطاق $. $ application () ، والتحديثات من خلال $ scope. watch watch ؛
</div>
<div ng-controller = "تطبيق">
{{hehe}}
<type type = "text" ng-model = "m0" />
<viv>
القيمة المحددة بواسطة $ Scope. $ watch == >> {{wat}}
</div>
<br>
<button ng click = "up ()">
يتقدم؛
</button>
</div>
<script type = "text/javaScript">
App.Controller ("تطبيق" ، دالة ($ scope) {
$ scope.hehe = "lll________xxx" ؛
$ scope.m0 = 1 ؛
SS = نطاق $ ؛
$ scope.up = function () {
$ scope.hehe = $ scope.m0 ؛
// نعم ، ولكن تم الإبلاغ عن خطأ عندما تم إعطاء المطالبة. من يدري لماذا؟
// $ scope. $ application () ؛
$ scope. $ digest () ؛
} ؛
// إعطاء $ scope.m0 متغير ليكون غير صالح ؛
$ scope. $ watch ("m0" ، function (va) {
$ scope.wat = va ؛
})
}) ؛
</script>
</div>
</body>
</html>
طريقة الأداة التي تحددها في الزاوية
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
قائمة طريقة الأدوات في الزاوي
</div>
<viv>
<ul>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.bind </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.bootstrap </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.copy </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.Element </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.equals </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.Extend </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.foreach </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.fromjson </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.Identity </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.Injector </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.isarray </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.isdate </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.isDefined </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.iseLement </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.isfunction </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.isnumber </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.isobject </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.isstring </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.isundefined </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.Lowercase </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.module </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.noop </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.ReloAdwithDebuginfo </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.tojson </a> </li>
<li rob = "العرض التقديمي"> <a href = "###"> Angular.UpperCase </a> </li>
</ul>
<viv>
هذه الأدوات والأساليب تشبه المكتبات الأخرى ؛
Angular.Element هو JQ صغير لعنصر اختيار أنغوارليت.
<br>
Angular.Module هي طريقة لعناصر الوحدة النمطية ؛
</div>
</div>
</div>
</body>
</html>
استخدام ng-transclude (هذه حالة رسمية) ، والرمز كما يلي:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
استخدام ng-transclude (هذه حالة رسمية):
</div>
<div ng-controller = "exampleController">
<viv>
<input ng-model = "title"> <br>
<textarea ng-model = "text"> </textarea> <br/>
<Pane> {{text}} </pane>
</div>
</div>
<script type = "text/javaScript">
app.directive ('pane' ، function () {
يعود {
تقييد: 'e' ،
transclude: صحيح ،
النطاق: {title: '@'} ،
قالب: "<div style =" الحدود: 1 بكسل سوداء صلبة ؛ "> ' +
'<div style = "background-color: gray"> {{title}} </iv>' +
'<ng-transclude> </grotclude>' +
'</div>' '
} ؛
})
.controller ('exampleController' ، ['$ scope' ، function ($ scope) {
$ scope.title = 'lorem ipsum' ؛
$ scope.text = 'nequ porno quisquam est qui dolorem ipsum quia dolor ...' ؛
}]) ؛
</script>
</div>
</body>
</html>
فيما يلي مثال على التحقق من دقة صندوق البريد:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
NgPaste ، NgMouseup ، Ngkeyup ، NgModeloptions ، وما إلى ذلك ، الرجوع إلى الاستخدام الرسمي ، فقط استخدم API Check ، (الاحتياجات الرسمية FQ ؛)
</div>
<script src = "https://yearofmoo.github.io/ngmessages/angular-messages.js"> </script>
<div ng-controller = "fromVaild">
إذا لم تستخدم مكون NG-Message ، فإن موجه الخطأ هو كما يلي ؛
<name form = "userform">
<viv>
<label for = "emailAddress"> أدخل عنوان بريدك الإلكتروني: </label>
<type type = "البريد الإلكتروني" name = "emailAddress" ng-model = "data.email" مطلوب />
<!-هذه الأشياء هي وسيلة معقدة للغاية->
<div ng-if = "userform.emailaddress. $ error.required">
لقد نسيت إدخال عنوان بريدك الإلكتروني ...
</div>
<div ng-if = "! userform.emailaddress. $ error.required && &
userform.emailaddress. $ error.email ">
لم تدخل عنوان بريدك الإلكتروني بشكل صحيح ...
</div>
</div>
<نوع الإدخال = "إرسال" />
</form>
<br>
<a href = "https://yearofmoo.github.io/ngmessages/"> العرض التجريبي الذي كتبه الأجانب </a>
</div>
<script type = "text/javaScript">
App.Controller ("FromVaild" ، Function ($ scope) {
//$ SCOPE.Myfield.unederror = {minlength: true ، مطلوب: false} ؛
})
</script>
</div>
</body>
</html>
يتم لف setTimeOut و SetInterval بواسطة Angular ، وإرجاع مثيل للكائن المتأخر:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Angular </title>
<meta http-equiv = "x-ua- متوافق" content = "ie = edge ، chrome = 1">
<script src = "http://cdn.bootcss.com/jquery/2.1.1/jquery.js"> </script>
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"> </script>
<link href = "http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel = "stylesheet">
<script src = "http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type = "text/javaScript"> </script>
</head>
<body ng-app = "app">
<script type = "text/javaScript">
var app = Angular.module ("app" ، []) ؛
</script>
<viv>
<viv>
مهلة $ وفاصل $ ، هاتين الخدمتين ؛
</div>
<div ng-controller = "st">
<viv>
<a href = "#">
<h4> setInterval </h4>
<p>
الفاصل الزمني $ (fn ، التأخير ، [count] ، [invokeapply]) ؛
</p>
</a>
<a href = "#">
<h4> مهلة </h4>
<p>
$ timeout (fn ، [delay] ، [invokeapply]) ؛
</p>
</a>
</div>
<viv>
<div rol = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100">
0 ٪
</div>
</div>
<button ng click = "prog ()">
يبدأ
</button>
</div>
<script type = "text/javaScript">
app.controller ("ST" ، وظيفة ($ scope ، $ element ، $ interal) {
var $ el = $ ($ element [0]). find (". progress-bar") ؛
console.log (الحجج) ؛
// استخدم العنصر الذي تم اختياره بواسطة Angular.Element للعثور على شيء ما دون العثور ؛
$ scope.prog = function () {
var df = $ interval (function () {
var val = parseint ($ el.html ())+4 ؛
if (val> = 104) $ vertal.cancel (df) ؛
$ el.html (val+"٪") .width (Val+"٪") ؛
} ، 100) ؛
console.log (df)
//console.log(AA = $ interal)
} ؛
}) ؛
</script>
</div>
</body>
</html>