Angular js Öffentlich

Angular js

FREDYS  FERNANDEZ
Kurs von FREDYS FERNANDEZ, aktualisiert more than 1 year ago Beitragende

Beschreibung

Curso de conocimientos angular

Modulinformationen

Keine Merkmale angegeben
Angular Software  general que puede ser selectivamente modificado por codigo adicional por el usuario para crear software especifíco. Directivas Grupos de codigo que extienden las capacidades de HTML Lista de directivas ng-app : Indica que tiene una aplicación de angular Ejemplo "Hola mundo" con Angular js <!DOCTYPE html> <html ng-app>   <head>     <meta charset="utf-8">     <title>Hola Mundo con Angular JS</title>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js">     </script>   </head>   <body>           {{"Hola " + "Mundo"}}   </body> </html>
Weniger sehen
Keine Merkmale angegeben
Controladores Ejemplos de controladores Archivo HTML (index.html) "          Hola controller con Angular JS                       {{"Hola " + nombre}}   "              Archivo JS (controller.js) var app = angular.module("MyFirstApp",[]); app.controller("FirstController", function($scope){        $scope.nombre = "Fredy Fernandez "; });
Weniger sehen
Keine Merkmale angegeben
Módulos Para agregar un nuevo modulo debemos llamar la librería (angular.module). El primer parámetro que recibe es el nombre del modulo, el segundo parámetro que recibe son los módulos de los que dependen el módulo que nosotros estamos creando. ngResource : Con este modulo podremos crear un objeto reffull que se pueda comunicar un API que REST Por ejemplo Archivo JS (controller.js) angular.module("MyFirstApp",[]); .controller("FirstController", function($scope){        $scope.nombre = "Fredy Fernandez "; }).controller("SecondController". function($scope){   });
Weniger sehen
Keine Merkmale angegeben
Two way data binding y bg model
Weniger sehen
Keine Merkmale angegeben
Dependency Injection EJemplo  var app = angular.module("MyFirstApp",[]); app.controller("FirstController", function($scope){         $scope.nombre = "Fredy Fernandez ";        $scope.dateDay= "03/08/2017"        $scope.nuevoComentario = {};        $scope.comentarios = [            {                    comentario: "Buen Tutorial",                    username: "Fredy Fernandez",                    dateDay: "03/08/2017"                                },            {                    comentario: "Malisimo Tutorial",                    username: "Jose Carrasxo",                    dateDay: "03/08/2017"            }        ];        $scope.agregarComentarios = function(){                $scope.comentarios.push($scope.nuevoComentario);                $scope.nuevoComentario = {};        } });   $scope es una Dependencia
Weniger sehen
Keine Merkmale angegeben
Archivo js (controller.js) var app = angular.module("MyFirstApp",[]); app.controller("FirstController",function($scope, $http){       $scope.posts = [];       $scope.newPost = {};       $http.get("http://jsonplaceholder.typicode.com/posts")              .success(function(data){                      console.log(data);                      $scope.posts = data;              })              .error(function(err){              });       $scope.addPost = function(){               $http.post("http://jsonplaceholder.typicode.com/posts",{                       title: $scope.newPost.title,                       body: $scope.newPost.body,                       userId: 1                 })              .success(function(data, status, headers, config){                  $scope.posts.push($scope.newPost);                  $scope.newPost = {};              })              .error(function(error,status, headers, config){                  console.log(error);              });       } });   Arhcivo HTML (index.html "          Hola controller con Angular JS                                Enviar Datos                                {{ post.title}}           {{ post.body}}                   "
Weniger sehen
Keine Merkmale angegeben
Archivo js angular.module("ToDoList",["LocalStorageModule"]) .controller("ToDoController", function($scope, localStorageService){     if (localStorageService.get("angular-todoList")) {         $scope.todo = localStorageService.get("angular-todoList");     }else {         $scope.todo = [];     }     $scope.$watchCollection("todo",function(newValue, oldValue){         localStorageService.set("angular-todoList",$scope.todo);     })          $scope.AddActividad = function(){         $scope.todo.push($scope.newActividad);         $scope.newActividad = {};     }     $scope.clearActividad = function(){         $scope.todo = [];     } });   Archivo html <!DOCTYPE html> <html ng-app="ToDoList">   <head>     <meta charset="utf-8">     <title>Hola controller con Angular JS</title>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>     <script src="controller.js"></script>     <script src="angular-local-storage.min.js"></script>   </head>   <body ng-controller="ToDoController">         <ul>             <li ng-repeat="Actividad in todo">                 {{Actividad.descripcion}} -                 {{Actividad.fecha | date: 'short'}}                         </li>         </ul>         <form ng-submit="AddActividad()">             <input type="text" ng-model="newActividad.descripcion">             <br><br>             <input type="datetime-local" ng-model="newActividad.fecha">             <br><br>             <input type="submit" value="Guardar actividad">             <button ng-click="clearActividad()">Limpiar</button>         </form>   </body> </html>
Weniger sehen
Zusammenfassung anzeigen Zusammenfassung ausblenden