Maison > Article > interface Web > Comment construire un framework front-end avec AngularJs ? Explication détaillée de la création d'un framework frontal dans AngularJS
Cet article parle principalement de l'introduction de la construction du framework front-end de angularjs, et de la façon de démarrer le projet, avec une explication étape par étape. Lisons cet article ensemble
Préface sur Angularjs :
Adresse : https://github.com/glitchtank/angular-seed-master
Vous devez installer git, puis le cloner localement
git clone https://github.com/glitchtank/angular -seed- master
Pour une introduction détaillée à cette graine, vous pouvez lire le README.md suivant en détail. Je ne le présenterai pas ici. Les étudiants ayant une formation front-end penseront certainement que je dis des bêtises.
windows Entrez cmd, accédez au projet que nous venons de cloner, exécutez la commande node scripts/web-server.js
puis entrez http://localhost:8000/app/index.html dans le navigateur. Vous pouvez voir un simple. page. Le projet a démarré avec succès.
1. Concernant le port 8000, si votre port 8000 est déjà occupé par d'autres programmes, vous pouvez modifier default_port dans web-server.js en un autre. ports.
2. Lors de l'exécution de la commande node scripts/web-server.js, si vous entrez script puis exécutez node web-server.js, entrez http://localhost:8000/app/index.html dans le champ. Rapport du navigateur 404.
img ; est stocké dans Quelques images que nous devons utiliser
Sous le fichier js :
contrôleur contrôleur.js
Filter.js Quelques filtres que nous avons écrits nous-mêmes
La connexion permettant à service.js d'appeler l'API back-end est généralement placée ici
Créez une nouvelle page html sous le projet : shopCart.html avec le contenu suivant
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <title>购物车例子</title></head><body ng-controller="CartController"><h1>your order</h1><p ng-repeat="item in items"> <span>{{item.title}}</span> <input ng-model="item.count"> <!--angularjs内置过滤器currency,实现美元格式化--> <span>{{item.price |currency}}</span> <span>{{item.price*item.count |currency}}</span></p><script src="lib/angular/angular.js"></script><script src="js/app.js"></script><script src="js/controllers.js"></script><script src="js/services.js"></script><script src="js/filters.js"></script><script src="js/directives.js"></script></body></html>Ajoutez
function CartController($scope){ $scope.items=[ {tile:'pea',count:8,price:3.00},{tile:'apple',count:9,price:4.00} ] }dans le fichier js/controller.js pour démarrer le projet
Manuel d'utilisation d'AngularJS pour en savoir plus). Si vous avez des questions, vous pouvez laisser un message ci-dessous.
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!