Création d'une application complète avec AngularJs
==================================================
![category](web)
![tag](python)
![tag](javascript)
![tag](angularjs)
L'architecture d'une application Angular JS est simple mais découpe bien le modèle MVC
![angularjs.png](./upload/angularjs.png)
Nous avons donc:
- un serveur applicatif
- un serveur web distribuant l'application
Le serveur web
--------------
Dans un premier temps le serveur web sera un serveur Apache avec une configuration
très basique: son seul rôle est de distribué des fichiers
* html
* css
* font
* js
Le fichier de configuration su site web ressemble à
```apache
# conf/site-available/test1.conf
ServerName mytest.fr
ServerAlias *.mytest.fr
DocumentRoot "/var/www/test"
AllowOverride None
Options None
Order allow,deny
Allow from all
DirectoryIndex index.html
ErrorDocument 404 /missing.html
ErrorLog "/var/logs/apache/errortest1.log"
LogLevel info
```
Le serveur applicatif
---------------------
On l'écrit en python et permettra de founir des données au format **json** (
format standart d'échange de donnée).
Le serveur utilisera les modules flask et flask-cors
```bash
pip install flask
pip install flask-cors
```
```note
Le module flask-cors permet de gérer le problème de Access-Control-Allow-Origin
Par défaut un client ne peut faire de demande json que sur le même serveur.
Dans notre architecture on sépare bien le serveur web du serveur d'application
```
Le serveur applicatif est donc écrit ainsi
```python
from flask import Flask
from flask import jsonify
from flask import json
from flask import request
from flask.ext.cors import CORS
app = Flask(__name__)
cors = CORS(app)
USERS = {'1': {'name':'nameA',
'forname' : 'fornameA',
'email' : 'nameA@domaine.fr'},
'2': {'name':'nameB',
'forname' : 'fornameB',
'email' : 'nameB@domaine.fr'},
'3': {'name':'nameC',
'forname' : 'fornameC',
'email' : 'nameC@domaine.fr'},
'4': {'name':'nameD',
'forname' : 'fornameD',
'email' : 'nameD@domaine.fr'},
'5': {'name':'nameE',
'forname' : 'fornameE',
'email' : 'nameE@domaine.fr'},
'6': {'name':'nameF',
'forname' : 'fornameF',
'email' : 'nameF@domaine.fr'},
'7': {'name':'nameG',
'forname' : 'fornameG',
'email' : 'nameG@domaine.fr'},
}
@app.errorhandler(404)
def not_found(error=None, msg=''):
message = {
'status': 404,
'message': 'Not Found: ' + msg,
}
resp = jsonify(message)
resp.status_code = 404
return resp
@app.route('/users/', methods = ['GET'])
def api_user(userid):
if userid in USERS:
return json.dumps([USERS[userid]])
else:
return not_found(error=None, msg="user %s" % userid)
@app.route('/users', methods = ['GET'])
def api_users():
return json.dumps([dict(USERS[userid], id=userid) for userid in USERS.keys()])
@app.route('/setuser', methods = ['POST'])
def api_setuser():
data = json.loads(request.data.decode())
id = int(data['user']['id'])
USERS[id] = data['user']
print('set user %s' % id)
return json.dumps([{"msg":"ok"}])
if __name__ == '__main__':
app.run()
```
Notre serveur répond donc au demande:
- /users: donne la liste des utilisateurs
- /users/id: donne les informations de l'utilisateur *id*
- /setuser: modifie un utilisateur
L'application AngularJs
-----------------------
L'application AngularJs reste une application classique, mais qui communique
avec le serveur d'application.
Cette capacité est native avec AngularJS
```javascript
var modUser = angular.module('user', [])
// add constant
modUser.constant("API_USERS", "http://localhost:5000/users");
modUser.constant("API_SETUSER", "http://localhost:5000/setuser");
// add controller
modUser.controller('UserController' , function ($scope, $http, $log, API_USERS, API_SETUSER) {
$scope.setuser = function() {
$http.get(API_USERS).
success(function(data, status, headers, config) {
$scope.users = data;
}).
error(function(data, status, headers, config) {
alert('error');
});
};
$scope.setuser = function() {
alert('setuser');
$http.post(API_SETUSER, {'user':$scope.edituser}).
success(function(data, status, headers, config) {
// none
}).
error(function(data, status, headers, config) {
alert('error');
});
};
}
});
```
On peut trouver l'ensemble d'un projet [ici](images/mascarille_angularjs.zip)`