Formation SfeirSchool - Angular 100
147
-
Upload
sfeir -
Category
Technology
-
view
566 -
download
0
Transcript of Formation SfeirSchool - Angular 100
<html>
<head>
<script src="path/to/angular.js"></script>
</head>
<body>
</body>
</html>
TIPS : You can directly use the google cdn : //ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js
…
<html ng-app>
<head>
<script src="path/to/angular.js"></script>
</head>
<body>
</body>
</html>
…
<html ng-app>
<head>
<script src="path/to/angular.js"></script>
</head>
<body>
{{ 1 + 1 }}
</body>
</html>
●○○
○○ …
○ …○○
var myApp = angular.module('myApp', []);
<html ng-app="myApp">
</html>
●
●
angular.module(name, [dependency1,dependency2]);
angular.module(name);
●
●
angular.module(name).config(function(){});
angular.module(name).run(function(){});
●●●●●
●●
{{ 1 + 2 }}
{{ user.name }}
{{ getUsers() }}
$(document).ready(function() {
var $input = $('input');
var $span = $('#name');
$input.keyup(function (event) {
$span.text(event.target.value);
});
});
<html>
Bonjour <span id="name"></span>
<input type="text"/>
</html>
<html ng-app>
<div>
<input type="text" ng-model="name">
<p>Bonjour {{name}}</p>
</div>
</html>
●●●
●●●●●
●
<html ng-app="myApp">
<div ng-controller="MyController">
<input type="text" ng-model="name">
<p>Hello {{ name }}</p>
</div>
</html>
function MyController($scope){
$scope.name = 'World';
}
// or
var myApp = angular.module('myApp', []);
myApp.controller(MyController, function($scope){
$scope.name = 'World';
});
<html ng-app="myApp">
<div ng-controller="myController as MyCtrl">
<input type="text" ng-model="myCtrl.name">
<p>Hello {{myCtrl.name}}</p>
</div>
</html>
function MyController($scope){
this.name = 'World';
}
●●●●
$scope.$broadcast('myEvent', param1, param2, ...);
$scope.$emit('anotherEvent', param1, param2, ...);
$scope.$on('yetAnotherEvent', function(event, param1, param2, ...)
{
console.log(param1);
});
<ul>
<li ng-repeat="fruit in fruits">
<!-- répétition du template li par élément fruit -->
{{ $index }} : {{ fruit.name }}
</li>
</ul>
●●●●●
<button ng-click="faireUnTruc(arg1, arg2, ...)"></button>
function MyController($scope){
$scope.faireUnTruc = function(arg1, arg2, ...){
/* faire un truc */
};
}
●
●●●
function myController($scope, $http){
};
$http(options)
$http.get(url, options)
$http.post(url, data, options)
$http.put(url, data, options)
$http.delete(url, options)
$http.get(url, options)
.success(function(data, status, headers, config){
/* do something */
})
.error(function(data, status, headers, config){
/* handle error */
});
●●
http://localhost:3001/#/home
http://localhost:3001/#/movies
http://localhost:3001/#/movies/edit/1
<body>
<header>
<!-- Common part for all pages. -->
</header>
<section ng-view>
<!-- this is the dynamic part -->
</section>
<footer>
<!-- Common part for all pages. -->
</footer>
</body>
/* Dans le fichier de définition de votre module app.js */
var angularMovieApp = angular.module('angularMovieApp', ['ngRoute']);
angularMovieApp.config(function($routeProvider) {
/* routes configurations */
});
TIPS : You can directly the google cdn : //ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-route.min.js
when(path,route)
otherwise(route)
// Dans le search après '?' ou dans le path après ':'
'/maroute/:param1'
$routeParams.param1
●
●
●
●
● …
$routeProvider
.when('/route1', {
templateUrl: 'path/to/view1.html',
controller : 'view1Controller'
})
.when('/route2', {
templateUrl: 'path/to/view2.html',
controller : 'view2Controller'
})
.when('/route2/:id', {
templateUrl: 'path/to/view3.html',
controller : 'view3Controller'
})
.otherwise({
redirectTo: '/route1'
});
●
●●
●
●●●●●●
Si vous appréciez la formation, please retweet :)
Vous pouvez dire par exemple que vos formateurs sont super sympas :D
#sfeirschool @sfeir @cbalit
http://www.wufoo.com/html5/
<input type="text" ng-model="name">
<select
name="{string}"
[required]
[ngRequired="{string}"]
[ngOptions="{comprehension_expression}"]>
</select>
<input type="email" ng-model="user.mail">
<input ng-model="name"
required
ng-minlength="3"
ng-maxlength="10"
ng-pattern="/[^a-d]/"
>
●○○○○
●
<form novalidate name="myForm">
<input name="myInput">
</form>
myForm.myInput.$error.required // état de validité d'une contrainte
myForm.myInput.$invalid // état de validité d'un champ de saisie
myForm.$dirty && myForm.$valid // vérifier si le formulaire est sale et valide
●●
●<div class="control-group error" ng-class="{error : boolean}">
<label>...</label>
<input>
<span class="help-block">...</span>
</div>
●
●
<button ng-disabled="boolean"></button>
<div class="control-group error">
<label>...</label>
<input>
<span ng-show="boolean" class="help-block">...</span>
</div>
●
<div ng-messages="expression">
<div ng-message="keyValue1">a message<div>
<div ng-message="keyValue2">another message<div>
<div ng-message="keyValue3">a third message<div>
</div>
●
<div ng-messages="expression" ng-messages-multiple> … </div>
●
<div ng-messages="myForm.myInput.$error">
<div ng-message="required">Champs requis<div>
<div ng-message="min">Trop petit<div>
<div ng-message="max">Trop grand<div>
</div>
●●●●●●●●●●●●●
●○○○
●○ …
config( function($routeProvider) {
$routeProvider.when('/home/', {name:pf.model.PageName.HOME});
})
●
●
●
●
●
function MyController($scope, greeter) {
...
}
var MyController = function(renamed$scope, renamedGreeter)
{
...
}
MyController.$inject = ['$scope', 'greeter'];
●
someModule.controller('MyController', function($window) {
...
});
someModule.controller('MyController',
['$window', function(renamed$window) {
...
}]
);
●
●
●
●○○○○○
myModuleApp.factory("CountService", function (dep1, dep2, ...) {
// privée
var counter = 0;
// publique
return {
increment : function(){
counter = counter + 1;
}
};
});
function myController($scope, CountService){
CountService.increment();
};
●●
●
€
●
●
●
$scope.amount = 1234.56;
<div>{{amount}}</div> <!-- 1234.56 -->
<div>{{amount | currency}}</div> <!-- $1,234.56 -->
<div>{{amount | currency:"USD$"}}</div> <!-- USD$1,234.56 -->
<!-- by default use the “US” location -->
●●●●●●●
<div>{{collection | orderBy:predicat:reverse}}</div>
●●●
●●
●●●
angularMovieApp.filter('greet', function () {
return function(inputValue, arg1, arg2, ....) {
return 'Hello ' + inputvalue;
};
});
<div>{{name | greet}}</div>
<div>{{name | greet:arg1:arg2}}</div>
●●
●●●●●●
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...
</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<ul class="nav-tabs">
<li class="active">
<a href="#">Primary tab</a>
</li>
<li>
<a href="#">Primary tab</a>
</li>
<li>
<a href="#">Primary tab</a>
</li>
</ul>
<tabs>
<pane title="Primary tab" active>
<!-- contenu -->
</pane>
<pane title="Secondary tab">
<!-- contenu -->
</pane>
<pane title="some other tab">
<!-- contenu -->
</pane>
</tabs>
<calendar></calendar>
<progress-bar></progress-bar>
<dialog></dialog>
<datepicker></datepicker>
<accordion></accordion>
●●●●●
<div navbar ></div>
<navbar></navbar>
<div class="navbar" ></div>
<!-- directive : navbar -->
myModuleApp.directive("MaDirective", function (dep1, dep2) {
return {
template : "<div></div>",
};
});
myModuleApp.directive("MaDirective", function (dep1, dep2) {
return {
template : "<div></div>",
templateUrl : "/path/to/ma-directive.html",
};
});
myModuleApp.directive("MaDirective", function (dep1, dep2) {
return {
template : "<div></div>",
templateUrl : "/path/to/ma-directive.html",
replace : true,
};
});
myModuleApp.directive("MaDirective", function (dep1, dep2) {
return {
template : "<div></div>",
templateUrl : "/path/to/ma-directive.html",
replace : true,
restrict : 'EACM',
};
});
myModuleApp.directive("MaDirective", function (dep1, dep2) {
return {
template : "<div></div>",
templateUrl : "/path/to/ma-directive.html",
replace : true,
restrict : 'EACM',
scope : true,
};
});
myModuleApp.directive("MaDirective", function (dep1, dep2) {
return {
template : "<div></div>",
templateUrl : "/path/to/ma-directive.html",
replace : true,
restrict : 'EACM',
scope : true,
transclude : true,
};
});
myModuleApp.directive("MaDirective", function (dep1, dep2) {
return {
template : "<div></div>",
templateUrl : "/path/to/ma-directive.html",
replace : true,
restrict : 'EACM',
scope : true,
transclude : true,
controller : function($scope, $element, $attrs, $transclude){...}
};
});
myModuleApp.directive("MaDirective", function (dep1, dep2) {
return {
template : "<div></div>",
templateUrl : "/path/to/ma-directive.html",
replace : true,
restrict : 'EACM',
scope : true,
transclude : true,
controller : function($scope, $element, $attrs, $transclude){...},
compile : function(tElement, tAttrs, transclude){...},
link : function (scope, element, attrs){...}
// more ?
};
});
myModuleApp.directive("MaDirective", function (dep1, dep2) {
return {
priority: 0, // terminal: true
template: '<div></div>', // or // function(tElement, tAttrs) { ... },
// or
// templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
transclude: false,
restrict: 'A',
templateNamespace: 'html',
scope: false,
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
controllerAs: 'stringAlias',
require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
compile: function compile(tElement, tAttrs, transclude) {...}
// or
// link: {
// pre: function preLink(scope, iElement, iAttrs, controller) { ... },
// post: function postLink(scope, iElement, iAttrs, controller) { ... }
// }
// or
// link: function postLink( ... ) { ... }
};
});
…
…
<person user="selectedUser"/>
…
●●●●●●●●
