• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
AngularJS basics

AngularJS basics






Total Views
Views on SlideShare
Embed Views



5 Embeds 179

http://blog.i2devlabs.com 160
https://confluence.my.magora.com 16
https://abs.twimg.com 1
http://i2devlabs.tumblr.com 1
http://www.bing.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    AngularJS basics AngularJS basics Presentation Transcript

    • AngularJS
    • What is AngularJS?• It is many things, but fits best in the Framework category. (It is often mistaken for a library because it is more lightweight than a normal framework)• It’s 100% Javascript and 100% client side.
    • Main Concepts• Model - application data• View - what the user sees• Controller - application behavior• Scope - glue between application data and behavior• $ - angular namespace• Module - configures the injector• Injector - assembles the application
    • How it works• Browser loads the HTML and then the angular.js script.• Angular waits for DOMContentLoaded event and looks for the ng-app directive.• The module specified in ng-app is used to configure the injector.• The injector is used to create the $compile service and $rootScope.• $compile compiles the DOM and links it with $rootScope.• ng-init assigns World to the name property on the scope.• {{name}} is turned into World. <!doctype html> <html ng-app> <head> <script src=”http://code.angularjs.org/angular-1.0.3.min.js”></script> </head> <body> <p ng-init=” name=‘World’ “>Hello {{name}}!</p> </body> </html>
    • Simple Controller function ContainersListCtrl($scope){ $scope.containers = [{ "Number": "CAXU0000004", "AttributedForLoading": false, "Notes": null, "id": 10564, "ContainerType": { "id": 10, "Code": "20DV", "TareWeight": 2300 }, "OperationalStatus": { "Code": "STOCKPSA", "IsOutOfPark": true } }]; } (file - app/js/controllers.js)
    • <!doctype html> <html ng-app> binds the controller to the <head> elements inside the body <title>Containers</title> <script src="lib/angular/angular.js"></script> <script src="js/controllers.js"></script> <link href="css/containerList.css" rel="stylesheet" type="text/ css"> </head> <body ng-controller="ContainersListCtrl"> <div ng-repeat="container in containers"> <p>{{container.Number}}</p> <p>{{container.OperationalStatus.Code}}</p> <p>{{container.ContainerType.Code}}</p> <p>{{container.Notes}}</p> </div> repeats the elements inside the </body> div for each element in the </html> controller’s $scope.containers(file - app/index.html)
    • Using services in the controller• If you want to use a service in order to populate the controller’s scope with a json array, you can.• Here’s an example of an http GET request, that uses the $http service provided by angular.function ContainersListCtrl($scope, $http) { $http.get(http://address?callback=true&action=getallcontainersjson).success(function(data) { $scope.containers = data; });}(file - app/js/controllers.js)
    • Generating Templates• In order to generate a template, you will need to: 1. Define a new module for your application. var containerModule = angular.module(containersTOS, []). config([$routeProvider, function($routeProvider){ $routeProvider. when(/containers, { templateUrl: partials/containers-list.html, controller: ContainersListCtrl}). when(/containers/:containerNumber, { templateUrl: partials/container-detail.html, controller: ContainerCtrl}). otherwise({redirectTo: /containers}); }]); (file - app/js/app.js) links URLs to controllers and views
    • 2. Modify the index.html page to use this module <html lang="en" ng-app="containersTOS">3. Modify the index.html in order to use a view <body> <div ng-view></div> </body>4. Add a new controller for the container Detail view function ContainerCtrl($scope, $routeParams, $http){ $http.get(http://address?callback=true&action=getcontainerjson&number= + $routeParams.containerNumber).success(function(data){ $scope.container = data; }); } (file - app/js/controllers.js)
    • 5. Add new html views to your project<ul> <li>Container: {{container.Number}}</li> <li>Container Status: {{container.ContainerStatus.LocalizedDescription}}</li> <li>Container Type: {{container.ContainerType.Code}}</li> <li>Place: {{container.Place.Name}} [{{container.Z}}]</li> </ul>(file - app/partials/container-detail.html)<div class="containerLi" ng-repeat="container in containers”> <a ng-href="#/containers/{{container.Number}}"><p>Número: {{container.Number}}</p> <p>Destino: {{container.OperationalStatus.Code}}</p> <p>Tipo: {{container.ContainerType.Code}}</p> <p>Notas: {{container.Notes}}</p></a></div>(file - app/partials/container-list.html)
    • More on AngularJS in the next chapter • Unit and End to End tests • Search and Filters Resources http://angularjs.org/