AngularJS basics
11
AngularJS
-
Upload
atomize-software -
Category
Documents
-
view
6.723 -
download
1
description
Transcript of AngularJS basics
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 Controllerfunction 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>
<head>
<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>
</body>
</html>
binds the controller to the elements inside the body
repeats the elements inside the div for each element in the
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 viewfunction 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
Resourceshttp://angularjs.org/
![AngularJS Projects, Forms and Servicesiproduct.org/wp-content/uploads/2016/07/AngularJS... · AngularJS and TypeScript SPA Development Sources: AngularJS [ ], ... Designing front-end](https://static.fdocuments.us/doc/165x107/5ee35669ad6a402d666d455f/angularjs-projects-forms-and-angularjs-and-typescript-spa-development-sources.jpg)
