Comment développer des applications web avec angulairejs ? Exemples d'applications Web de développement Angularjs

Cet article présente principalement comment développer une application web simple avec angularjs. Si vous voulez savoir, dépêchez-vous et jetez un œil. Il présente en détail comment développer des applications Web avec Angularjs. Jetons ensuite un coup d'œil à l'article

Familiarisons-nous d'abord avec la force d'AngularJS :

À l'heure actuelle, différents types de développeurs Web utilisent largement AngularJS. Cet ensemble d'excellents frameworks a également pleinement démontré sa capacité à répondre à divers besoins. En tant que développeur Web, que vous débutiez ou que vous ayez une riche expérience pratique, le choix d'un excellent framework est une condition préalable nécessaire au travail, et AngularJS est une solution idéale. En utilisant AnguarJS, vous pouvez en apprendre davantage sur le développement d'applications et sur la façon de créer des résultats d'application meilleurs et plus attrayants. Si vous souhaitez adopter les meilleures pratiques en matière de création d’applications, AngularJS peut également être d’une grande aide. Dans l’ensemble, les fonctions et fonctionnalités puissantes de ce framework ne décevront jamais les amis ayant des besoins de développement d’applications.

AngularJS possède de nombreuses fonctionnalités exceptionnelles. Aujourd'hui, nous allons prendre une application simple comme exemple pour vous aider à comprendre comment l'utiliser. Avec Firebase, notre application simple mais pratique peut être facilement créée. En tant que produit fini, l'application développée permet à chacun de se connecter à tout moment ou de se connecter et d'y publier des articles.

Ceci est une introduction à AngularJS et Firebase :

AngularJS est actuellement le framework JavaScript MVC le plus populaire parmi les développeurs Web. Si vous souhaitez créer une application unique, alors c'est certainement le meilleur choix pour vous - grâce à ses puissantes fonctionnalités d'extension de fonctions HTML. Avec l'aide d'AngularJS, nous n'avons plus besoin d'utiliser beaucoup de code pour créer des applications. Son incroyable mécanisme d'injection de dépendances et de liaison rendra le développement d'applications extrêmement pratique.

D'un autre côté, Firebase offre un excellent support pour AngularJS, ce qui vous évite d'avoir à développer un support backend pour les applications que vous créez. Avec l'aide de Firebase, notre application sera capable d'effectuer une sauvegarde des données en temps réel - bien entendu, les appels API nécessaires restent indispensables.

Bien qu'AngularJS lui-même soit déjà assez puissant, avec l'aide de Firebase, nous pourrons faire passer les résultats de notre application au niveau supérieur.

Le texte commence ici, veuillez noter :

Avant de commencer à utiliser AngularJS pour créer cette petite application Web simple, vous devez d'abord télécharger le projet angulaire-seed. Une fois le téléchargement terminé, vous devez ouvrir le répertoire de téléchargement correspondant et y installer les dépendances pour l'exécuter. Le code spécifique est le suivant :

$ cd angular-seed 
$ npm install ## Install the dependencies

L'étape suivante consiste à utiliser le représentant suivant pour démarrer le serveur de nœuds :

$ npm start ## Start the server

Après le serveur de nœuds est opérationnel, vous devez ouvrir le navigateur et visiter http://localhost:8000/app/index.html, et l'application par défaut en cours d'exécution s'affichera.

Ensuite, visitez le répertoire de l'application sous le dossier du projet angulaire-seed, où le code de l'application est enregistré.

En tant que cœur de l'application, app.js sera également stocké dans le dossier de l'application. Tous les modules et routes au niveau de l'application dans app.js doivent être déclarés.

De plus, vous trouverez également ici deux vues d'angular-seed, à savoir la vue 1 et la vue 2. Ils existent toujours sous leur forme par défaut. Nous devons supprimer ces vues dans le dossier de l'application.

Nous allons maintenant créer l'application à partir de zéro : vous devez d'abord ouvrir app.js et supprimer tout le code existant qu'il contient. Définir nos routes d'application dans app.js nous oblige à utiliser ngRoute, l'un des modules d'AngularJS. Par défaut, app.js ne contient pas ce module, nous devons donc l'injecter manuellement dans l'application pour l'utiliser. Vous pouvez utiliser le code suivant pour finaliser l'ajout du module AngularJS :

angular.module('myApp', [ 
'ngRoute' 
])

Le module ngRoute apportera un composant important, à savoir $routeProvider, qui pourra parfaitement configurer le routage. Nous devons utiliser le code suivant pour injecter $routeProvider dans la méthode de configuration du module angulaire afin de compléter la définition de la route :

'use strict'; 
angular.module('myApp', [ 
'ngRoute' 
]). 
config(['$routeProvider', function($routeProvider) { 
// Routes will be here 
}]);

Après avoir terminé les étapes ci-dessus, nous pouvons maintenant ouvrir index.html. Effacez tout le contenu dans index.html, en ne laissant que les références de script et les div.

Chaque fois que le routage est modifié, nous devons ajuster le contenu div selon la méthode ci-dessus. (Si vous souhaitez en savoir plus, je vous recommande le site Web PHP chinois, qui contient le tutoriel vidéo Angularjs que vous souhaitez regarder)

Créez maintenant des symboles dans la vue :

Nous devons créer un nouveau dossier dans le répertoire de l'application et le nommer home. Dans ce dossier, nous créons deux dossiers supplémentaires, home.js et home.html. Ouvrez d’abord home.html et ajoutez-y le code suivant :

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="icon" href="http://www.php.cn/favicon.ico"> 
<title>AngularJS & Firebase Web App</title> 
<link href="http://www.php.cn/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="http://www.php.cn/examples/signin/signin.css" rel="stylesheet"> 
<link href="justified-nav.css" rel="stylesheet"> 
</head> 
<body> 
<div> 
<div style="padding-bottom:0px;"> 
<h2>AngularJS & Firebase App!</h2> 
</div> 
<form role="form"> 
<input type="email" placeholder="Email address" required="" autofocus=""> 
<input type="password" placeholder="Password" required=""> 
<label> 
<a href="#"> Sign Up</> 
</label> 
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
</form> 
</div> 
</body>
</html>

在home.js当中，我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示：

use strict'; 
angular.module('myApp.home', ['ngRoute']) 
// Declared route 
.config(['$routeProvider', function($routeProvider) { 
$routeProvider.when('/home', { 
templateUrl: 'home/home.html', 
controller: 'HomeCtrl' 
}); 
}]) 
// Home controller 
.controller('HomeCtrl', [function() { 
}]);

现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：

'use strict'; 
angular.module('myApp', [ 
'ngRoute', 
'myApp.home'           // Newly added home module 
]). 
config(['$routeProvider', function($routeProvider) { 
// Set defualt view of our app to home 
$routeProvider.otherwise({ 
redirectTo: '/home' 
}); 
}]);

如果大家希望显示自己的home页面，则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作，请打开index.html文件并湢以下代码：

<script src="home/home.js"></script>

现在一切工作已经完成，该应用随时准备加以运行了！要开始使用这款应用，我们需要重启服务器并将自己的浏览器指向http://localhost:8000/app/index.html以访问登入页面，在这里大家可以实现对该应用程序的访问。

如果大家需要使用Firebase（具体理由如前文所述），则需要首先创建一个Firebase账户。在账户创建完成后，我们将屏幕上所显示的已创建应用url添加进来，而后点击“管理该应用”。

创建自己的应用程序感觉不错吧？Angular.js能够为此类开发工作提供我们所需要的一切。而且只需几分钟，我们的这款简单小应用就已经正式上线啦！

好了，以上就是本篇关于angularjs开发web应用的全部内容了（想学更多就拉PHP中文网，AngularJS使用手册栏目学习），你学会了吗？没学会的继续读，知道学会为止。有问题的可以在下方留言提问。

【小编推荐】

angularjs的路由原理你知道吗？这里有angularjs路由的详细原理

angularjs应用场景有哪些？angularjs的应用场景介绍

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!