عملية التشغيل الأساسية للقوالب والبيانات هي كما يلي:
طلب طلب طلب المستخدم صفحة بدء
يبدأ متصفح المستخدم اتصال HTTP بالخادم ، ثم يقوم بتحميل صفحة index.html ، والتي تحتوي على القالب
يتم تحميل Angular في الصفحة ، في انتظار تحميل الصفحة ، والبحث عن توجيه NG-APP لتحديد حدود القالب.
قوالب اجتياز الزاوي ، ابحث عن العلاقات المحددة والمرتبطة ، وسوف تؤدي إلى بعض إجراءات الأعمدة: قم بتسجيل المستمع ، وأداء بعض عمليات DOM ، والحصول على بيانات التهيئة من الخادم. أخيرًا ، سيتم إطلاق التطبيق وسيتم تحويل القالب إلى عرض DOM
اتصل بالخادم لتحميل البيانات الأخرى التي يجب عرضها على المستخدم
إظهار النص
واحد يستخدم النموذج {{}} ، مثل {{Greeting}} النوع الثاني ng-bind = "Greeting"
استخدم النوع الأول ، قد يرى المستخدمون الصفحات التي لا يمكن أن تكون. يوصى باستخدام النوع الثاني من صفحة الفهرس ، ويمكن للصفحات المتبقية استخدام النوع الأول
شكل الإدخال
نسخة الكود كما يلي:
<html ng-app>
<head>
<title> نموذج </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
وظيفة StartupController (نطاق $) {
$ scope.funding = {startestimate: 0} ؛
computeNeed = function () {
$ scope.funding.needed = $ scope.funding.StartingEstimate * 10 ؛
} ؛
$ scope. $ watch ('تمويل // تغييرات نموذج الساعة
}
</script>
</head>
<body>
<form ng-controller = "startupController">
البداية: <input ng-change = "computeNeed ()" ng-model = "تمويل. startingestimate"> // استدعاء الوظيفة عند التغيير
التوصية: {{تمويل. needed}}
</form>
</body>
</html>
في بعض الحالات ، لا نريد القيام بحركات على الفور عندما يكون هناك تغيير ، لكن علينا الانتظار. على سبيل المثال:
نسخة الكود كما يلي:
<html ng-app>
<head>
<title> نموذج </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
وظيفة StartupController (نطاق $) {
$ scope.funding = {startestimate: 0} ؛
computeNeed = function () {
$ scope.funding.needed = $ scope.funding.StartingEstimate * 10 ؛
} ؛
نطاق $. watch $ ('تمويل. startingestimate' ، computeNed) ؛ // مشاهدة مراقبة تعبير ، وعندما يتغير هذا التعبير ، سيتم استدعاء وظيفة رد الاتصال
$ scope.requestfunding = function () {
window.alert ("آسف ، يرجى الحصول على المزيد من العملاء أولاً.")
} ؛
}
</script>
</head>
<body>
<form ng-submit = "requestFunding ()" ng-controller = "startupController"> // ng-submit
البدء: <input ng-change = "computeNeed ()" ng-model = "phindding.startingestimate">
التوصية: {{تمويل. needed}}
<Nustral> قم بتمويل بدء التشغيل الخاص بي! </button>
</form>
</body>
</html>
تفاعل التقديم غير المشكل ، خذ انقر كمثال
نسخة الكود كما يلي:
<html ng-app>
<head>
<title> نموذج </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
وظيفة StartupController (نطاق $) {
$ scope.funding = {startestimate: 0} ؛
computeNeed = function () {
$ scope.funding.needed = $ scope.funding.StartingEstimate * 10 ؛
} ؛
$ scope. $ watch ('تمويل
$ scope.requestfunding = function () {
window.alert ("آسف ، يرجى الحصول على المزيد من العملاء أولاً.")
} ؛
$ scope.reset = function () {
$ scope.funding.startingEstimate = 0 ؛
} ؛
}
</script>
</head>
<body>
<form ng-controller = "startupController">
البدء: <input ng-change = "computeNeed ()" ng-model = "phindding.startingestimate">
التوصية: {{تمويل. needed}}
<button ng click = "requestFunding ()"> قم بتمويل بدء التشغيل الخاص بي! </button>
<button ng click = "reset ()"> إعادة تعيين </button>
</form>
</body>
</html>
القوائم والجداول والعناصر التكرارية الأخرى
سيقوم NG-Repeat بإرجاع رقم العنصر المشار إليه حاليًا من خلال فهرس $. رمز العينة كما يلي:
نسخة الكود كما يلي:
<html ng-app>
<head>
<title> نموذج </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
var students = [{name: 'Mary' ، Score: 10} ، {name: 'Jerry' ، Score: 20} ، {name: 'Jack' ، Score: 30}]
وظيفة StudentListController (نطاق $) {
$ scope.students = الطلاب ؛
}
</script>
</head>
<body>
<Table NG-Controller = "StudentListController">
<tr ng-repeat = 'student in student'>
<td> {{$ index+1}} </td>
<td> {{student.name}} </td>
<td> {{student.score}} </td>
</r>
</table>
</body>
</html>
الاختباء والعرض
وظائف NG-Show و NG-Hide متكافئة ، لكن تأثير التشغيل هو عكس ذلك تمامًا.
نسخة الكود كما يلي:
<html ng-app>
<head>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script>
وظيفة deathraymenucontroller (نطاق $) {
$ scope.menustate = {show: false} ؛ // إذا قمت بتغيير إلى menustate.show = false ، فلن يتم عرض التأثير. في المستقبل ، ضع المتغيرات في {}
$ scope.togglemenu = function () {
$ scope.menustate.show =! $ scope.menustate.show ؛
} ؛
}
</script>
</head>
<body>
<div ng-controller = 'deathraymenucontroller'>
<button ng click = 'togglemenu ()'> تبديل القائمة </button>
<ul ng-show = 'menustate.show'>
<li ng click = 'und ()'> und </li>
<li ng click = 'dinentegrate ()'> تفكك </li>
<li ng click = 'rease ()'> محو من التاريخ </li>
</ul>
</div>
</body>
</html>
فئة CSS والأناقة
يمكن أن تقبل كل من NG-Class و NG على طراز NG تعبيرًا ، وقد تكون نتيجة تنفيذ التعبير أحد القيم التالية:
سلسلة تمثل اسم فئة CSS ، مفصولة بالمسافات
صفيف اسم فئة CSS
تعيين اسم فئة CSS إلى قيمة منطقية
مثال الكود كما يلي:
نسخة الكود كما يلي:
<html ng-app>
<head>
<type type = "text/css">
.خطأ {
لون الخلفية: أحمر.
}
.تحذير {
لون الخلفية: أصفر.
}
</style>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script>
وظيفة HeaderController (نطاق $) {
$ scope.iserror = false ؛
$ scope.iswarning = false ؛
$ scope.showerror = function () {
$ scope.messageText = "خطأ !!!"
$ scope.iserror = true ؛
$ scope.iswarning = false ؛
}
$ scope.showwarning = function () {
$ scope.messageText = "تحذير !!!"
$ scope.iswarning = true ؛
$ scope.iserror = true ؛
}
}
</script>
</head>
<body>
<div ng-controller = "HeaderController">
<div ng-class = "{error: iserror ، تحذير: iSwarning}"> {{messageText}} </fire>
<button ng click = "showrror ()"> خطأ </button>
<button ng click = "showwarning ()"> تحذير </button>
</div>
</body>
</html>
تعيين اسم فئة CSS إلى قيمة منطقية
رمز العينة كما يلي:
نسخة الكود كما يلي:
<html ng-app>
<head>
<type type = "text/css">
.
خلفية اللون: Lightgreen.
}
</style>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script>
وظيفة مطعم (نطاق $) {
$ scope.list = [{name: "the and the cuisine:" BBQ "} ، {name:" Green "، Cuisine:" Salads "} ، {name:" House "، Cuisine: 'Seafood'}] ؛
$ scope.seRestaurant = function (row) {
$ scope.selectedRow = ROW ؛
}
}
</script>
</head>
<body>
<Table NG-Controller = "Restaurant">
<tr ng-repeat = 'Restaurant in list' ng-click = 'selectRestaurant ($ index)' ng-class = '{select: $ index == selectRow}'> // map of css class name to boolean. عندما تكون قيمة سمة النموذج المحددة مساوية لمؤشر $ في التكرار ng ، سيتم تعيين نمط SelectD على هذا السطر
<td> {{restream.name}} </td>
<td> {{restream.cuisine}} </td>
</r>
</table>
</body>
</html>