View
441
Download
0
Category
Preview:
Citation preview
ngularJS – Beginner ModuleMay 3, 2023
#YOOXlabsTechEvent
(maybe )
Why is this project called "AngularJS"?Because HTML has Angular
bracketsWhy is the namespace called "ng"?
"ng" sounds like "Angular"Is AngularJS a library, framework, plugin or a browser extension?
AngularJS fits the definition of a framework the best
AngularJS Speech Topics
TemplateModuleScopeControllerModelView
Dev Utils
Getting Started: Comparison of the options for starting a new project
Debugging: Batarang Testing: Karma, Protractor Editor support: Webstorm,
Sublime Text, Visual Studio Workflow: Yeoman.io and
Angular Yeoman Tutorial
We understand two main data binding concepts
Data Binding
Data Binding
TemplateDirective
Template structureWe will say: «Hello world!»
At a high level, Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children
«Hello world!!» - Template Head
<!DOCTYPE html><html lang="en" ng-app="ngBeginner" class="no-js"><head>
....
<link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css"> <link type="text/css" rel="stylesheet" href="assets/css/main.css">....
</head>
«Hello world!!» - ngAppUse this directive to auto-bootstrap an AngularJS application.
The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.
«Hello world!!» - Template Body
<body> <!-- menu -->......
<!-- Dynamic view injection --><div ng-view></div>
......
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file.
«Hello world!!» - Template Footer
......
<script src="bower_components/angular/angular.js"></script><script src="bower_components/angular-route/angular-route.js"></script><script src="app.js"></script>
......
</body></html>
ModuleDI – dependecy injection
Routing
Partial Template
Module defined in app.jsWe will say: «Hello world!»
Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies
«Hello world!!» - App.js <init>
(function (jQuery) {
'use strict';
var NGBeginner = angular .module('ngBeginner', [ 'ngRoute' ])})(jQuery);
"use strict"; Defines that JavaScript code should be executed in "strict mode"
«Hello world!!» - App.js <DI - Routing>NGBeginner.config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/home', {
templateUrl:'views/home.html‘ }). when('/scope-hierarchy', { templateUrl:'views/scopeHierarchy.html' }).
ScopeHierarchy
Scope EcoSystemWe will say: «Hello world!»
Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events
«Hello world!!» - Scope EcoSystem
«Hello world!!» - Scope EcoSystem
«Hello world!!» - Scope EcoSystem
ControllerDataBinding
Model
Controller and ModelWe will say: «Hello world!»
In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope
«Hello world!!» - Controllers and Model
<div class="show-scope-demo"> <div ng-controller="GreetController"> Hello {{name}}! </div> <div ng-controller="ListController">
<ol> <li ng-repeat="name in names">
{{name}} from {{department}}</li>
</ol> </div></div>
«Hello world!!» - The code
angular .module('ngBeginner') .controller('GreetController', greetController) .controller('ListController', ['$scope', function($scope) { $scope.names = ['Igor', 'Misko', 'Vojta']; }]);
function greetController($rootScope, $scope){ $scope.name = 'World'; $rootScope.department = 'Angular';}
«Hello world!!» - Scope EcoSystem
Learning curve
NG Learning0
1
2
3
4
5
6
AngularAngular
Time
Diffi
cult
Well...and now??
Facepalm
Most awesome framwork ever!!
My code works I have no idea why
My code doesn’t works I have no idea why
My code works I have idea why
My code doesn’t works I have idea
why
We can say
ngular(ly) Happy ^_^Angular
^_^We are Angular(ly) Happy
QUESTIONS
#YOOXlabsTechEvent
riccardo.masetti@yoox.com - @MaRiccardo
Recommended