第一个应用AngularJS

Nella creazione diCiao MondoPrima!Un'applicazione utilizza AngularJS, diamo un'occhiata alle parti dell'applicazione AngularJS. L'applicazione AngularJS contiene tre parti importanti:

ng-app − Questa istruzione definisce l'applicazione AngularJS e la collega all'HTML.
ng-model − Questo pseudo-istruzione lega i valori dei dati dell'applicazione AngularJS ai controlli di input HTML.
ng-bind − Questa istruzione lega i dati dell'applicazione AngularJS ai tag HTML.

Crea l'applicazione AngularJS

Passaggio 1: Carica il framework

Come framework JavaScript puro, può essere aggiunto con il tag <Script>.

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

Passaggio 2: Definisci l'applicazione AngularJS con l'istruzione ng-app

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

Passaggio 3: Definisci il nome del modello con l'istruzione ng-model

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

Passaggio 4: Lega i valori dei modelli definiti con l'istruzione ng-bind

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

Esegui l'applicazione AngularJS

Usa questi tre passaggi nell'HTML pagina.

testAngularJS.htm

Esempio

<html>
　　　<head>
　　　　　　<title>AngularJS First Application</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h1>Applicazione di Esempio</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>标记中。
标记</div>指示AngularJS应用程序结束。

指令AngularJS 架构MVCAngularJS

Tutorial di base AngularJS