Angular JS + SQL (versión simple)

Hoy vamos a ver una forma moderna y sencilla para crear los aplicaciones Web - utilizando la framework Angulars JS.  Por fin JavaScript se puede comunicar con una base de datos, que antes no era posible. Obviamente no comunica solo, sino a través de una página web con contenido dinámico escrito en cualquier lenguaje (Java, .NET, PHP).

Hace 15 años, cuando las paginas se cargaban lentamente y eso era normal, las paginas dinámicas se comunicaban directamente con una BD y el usuario tenía que utilizar toda su paciencia para esperar la respuesta. Hoy la página se recarga por partes a la manera que el usuario ni se da cuenta. Y en una de estas partes puede haber el código que recupera información desde la BD, que puede ser, por ejemplo, una lista de algo, o un formulario, o otra cosa.

Sin embargo, técnicamente un código Javascript sigue siendo incapaz de comunicarse con una BD o hacer otras operaciones que se llaman “server-side”. En este ejemplo nos ayuda una página dinámica ASP.NET escrita en C# y será esta página que se va comunicar con la BD. La misma cosa puede ser hecha en JSP o PHP. El código Javascript (en la forma de Angular JS) va llamar a esta página que se ocupa de recuperar la información (o actualizar la información) desde la BD.

La cadena se puede presentar asi:

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

Empezamos por la creación de una tabla SQL:

El código HTML de la página:

 Cuando el usuario da al botón "Guardar", Angular JS llama nuestra página ASP con el parámetro “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.");

            })

        };




Aquella linea del código llama la función "Save()" en la pagina ASP:




        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();

            }

        }

    }




Al final el codigo JS hace "fillList()" que mostra nuestra tabla actualizada: 

        $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;

            })

        };

Detrás del codigo, nuestra pagina ASP recupera los datos desde la BD:

    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;

    }




Como dicho antes, la misma tarea puede ser conseguida con el código Java o PHP, si no quiereis utilizar C#.NET. En caso de Java, p.e. podíamos utilizar o JDBC, o una capa de persistencia (como Hibernate), si quieres hacer lo de la forma más elegante.

También podemos ir más allá y crear un servicio web REST en vez de crear una pagina JSP o ASP.NET. Y nuestra pagina puede ser un cliente que con Angular JS va llamar a este servicio REST. Asi nuestro cliente Front-End y la lógica detrás serán claramente separados.

Vamos dejar estas opciónes para el futuro.