Angular JS + SQL (version simple)

Aujourd'hui, j'aimerais examiner la façon moderne et simple de faire des applications Web - en utilisant le framework Angular JS très populaire. Oui, Javascript peut communiquer avec la base de données, mais pas tout seul, mais à travers la page Web dynamique écrite dans n'importe quelle langue (Java, .NET, PHP).
Il y a 15 ans, on n'a pas pensé beaucoup a la présentation de notre appli, donc nos pages JSP / ASP / PHP ont envoyé directement la requête à la BD et l'utilisateur attendait patiemment la réponse. Ensuite, la page entière a été rechargée avec les résultats. 

La même chose quand l'utilisateur a inséré des données dans le DB.

Par contre Javascript sans Node.js n’est pas capable d’exécuter le code « server side », i.e. pour communiquer a la BD, etc. Pour cette raison on peut utiliser une page ASP/JSP/PHP qui est capable de communiquer avec la BD. Donc, l’Angular, appele la page ASP (avec un paramètre, comme ca la page peut savoir, quelle procedure il faut execute -sauvegarder, lister, effacer, etc.). Dans le cas de la liste, on utilise le paramètre « GetList », dans le cas de sauvegarde – « Save », etc.

 

Code source: http://dotnetlearners.com/tutorial/angularjs/48/angularjs-ajax-http-asp-net-with-sql-example

La chaine pourrait être présentée comme suivant :

Page Web -> Angular JS -> Code ASP/JSP/PHP -> DB

D'abord la Table SQL:

HTML du page:

Quand l'utilisateur fait "Save" le script Angular JS apelle la page ASP avec le parametre Save:

 $scope.Save = function () {

            var httpreq = {

                method: 'POST',

                url: 'Default.aspx/Save',

                headers: {

                    'Content-Type': 'application/json; charset=utf-8',

                    'dataType': 'json'

                },

                data: { StudentName: $scope.studetnName }

            }

            $http(httpreq).success(function (response) {

                $scope.fillList();

                alert("Saved successfully.");

            })

        };

 Et eunsuite fait la liste pour afficher toute la table:

 $scope.fillList = function () {

            $scope.studetnName = "";

            var httpreq = {

                method: 'POST',

                url: 'Default.aspx/GetList',

                headers: {

                    'Content-Type': 'application/json; charset=utf-8',

                    'dataType': 'json'

                },

                data: {}

            }

            $http(httpreq).success(function (response) {

                $scope.StudentList = response.d;

            })

        };

Derrier Angular il y a un method en .NET qui fait tout le travail:
 //save

 public static void Save(string StudentName)

    {

        using (SqlConnection con = new SqlConnection(@"data source=localhost\sqlexpress;user id=sa; password=123; database=Sample;"))

        {

            using (SqlCommand cmd = new SqlCommand())

            {

                cmd.Connection = con;

                cmd.CommandText = "insert into tblStudents (StudentName) values (@StudentName);";

                cmd.Parameters.AddWithValue("@StudentName", StudentName);

                con.Open();

                cmd.ExecuteNonQuery();

                con.Close();

            }

        }

    }

 //Get List

 public static List<Names> GetList()

    {

        List<Names> names = new List<Names>();

        DataSet ds = new DataSet();

        using (SqlConnection con = new SqlConnection(@"data source=localhost\sqlexpress;user id=sa; password=123; database=Sample;"))

        {

            using (SqlCommand cmd = new SqlCommand())

            {

                cmd.Connection = con;

                cmd.CommandText = "select StudentID,StudentName from tblStudents where IsActive=1;";

                using (SqlDataAdapter da = new SqlDataAdapter(cmd))

                {

                    da.Fill(ds);

                }

            }

        }

        if (ds != null && ds.Tables.Count > 0)

        {

            foreach (DataRow dr in ds.Tables[0].Rows)

                names.Add(new Names(int.Parse(dr["StudentID"].ToString()), dr["StudentName"].ToString()));

        }

        return names;

    }

Dans le cas de Java le code sera pareil, pour communiquer avec la BD on peut utiliser soit JDBC (la manière simple), soit une couche de persistance (comme Hibernate), si on veut faire le chose a la manière plus élégant.

On peut aussi aller plus loin et créer un service web de type REST qui va courrier sur un serveur et va être disponible pour un client Angular. On va regarder cette option dans le future.

Note que j'ai pas utilisé Node.js pour le moment. On va aussi garder cette option pour les prochaines etapes.