AngularJS 第一个应用

En créant un tutorielBonjour le mondePrécédemment！L'application utilise AngularJS, voyons les différentes parties de l'application AngularJS. L'application AngularJS contient les trois parties importantes suivantes-

ng-app −Cette instruction définit l'application AngularJS et la lie à l'HTML.
ng-model −Ce pseudo-instruction lie les valeurs des données de l'application AngularJS aux contrôles d'entrée HTML.
ng-bind −Cette instruction lie les données de l'application AngularJS aux balises HTML.

Créez une application AngularJS

Étapes1：Charger le cadre

En tant que cadre JavaScript pur, il peut être ajouté avec l'élément <script>.

<script　
　　　src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js</script>/script>

Étapes2：Utilisez ng-L'instruction app définit l'application AngularJS

<div　ng-app　=　"">
　　　...</div>

Étapes3：Utilisez ng-L'instruction model définit le nom du modèle

<p>Enter　your　Name:　<input　type　=　"text"　ng-model　=　"name"></p>

Étapes4：Lié avec ng-Les valeurs du modèle définies par l'instruction bind

<p>Hello　<span　ng-bind　=　"name"></span>!</p>

Exécutez l'application AngularJS

Utilisez les trois étapes précédentes dans une page HTML.

testAngularJS.htm

Exemple

<html>
　　　<head>
　　　　　　<title>AngularJS　First　Application</title>/title>
　　　</head>
　　　
　　　<body>
　　　　　　<h1>Sample　Application</h1>
　　　　　　
　　　　　　<div　ng-app　=　"">
　　　　　　　　　<p>Enter　your　Name:　<input　type　=　"text"　ng-model　=　"name"></p>
　　　　　　　　　<p>Hello　<span　ng-bind　=　"name"></span>!</p>
　　　　　　</div>
　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

AngularJS如何与HTML集成

ng-app指令指示AngularJS应用程序的启动。
ng-model指令创建一个名为name的模型变量，该变量可以与HTML页面一起使用，并且可以在具有ng-app指令的div中使用。
然后，每当用户在文本框中输入输入内容时，ng-bind就会使用名称模型显示在HTML <span>标记中。
Closing </ div>标记指示AngularJS应用程序结束。

AngularJS 指令 AngularJS MVC架构

Tutoriel de base AngularJS