WTF, WHICH TOOL I NEED ???Backbone.jsEmber.jsGoogle ClosureSpinejQuery (non FW)Este.js (Is it not dead? ;-))...
No thanks, AngularJS is cool ;-)
WHY ?
(It's fucking good)
BootstrappingModule basedTemplates2-way data bindingDependency InjectionRoutingDirectives
BOOTSTRAPPINGStep 1:
Step 2:
Result:
I'm using this way (RequireJS)
<script src="lib/js/angular.min.js"></script>
<html ng-app>
{{1+2}} is 3
var app = angular.module('app', [/* deps */]);angular.bootstrap(document, ['app']);
MODULE BASEDHTML
JS
<html ng-app="myApp">
var myApp = angular.module('myApp', []); // No deps.
// Collection of UI directives.angular.module('uiDirectives', [/*...*/]);
var myApp = angular.module('myApp', ['uiDirectives']);
TEMPLATES
webelement#14
<ul> <li ng-repeat="item in ['web', 'element', '#14']"> {{item}} </li></div>
WITH CONTROLLERSJS
Template
Result
web 0 element 1 #14 2
myApp.controller('TemplatesController', function($scope) { $scope.items = ['web', 'element', '#14'];});
<div ng-controller="TemplatesController"> <span ng-repeat="item in items"> {{item}}<small>{{$index}}</small> </span></div>
ASYNC TEMPLATESBut, you can use this
with nested levels ;-)
AngularJS loads the templates asynchronously.
<div ng-view> <!-- Only one on the page -->
<div ng-include="templates/foo.html">
2-WAY DATA BINDINGController
Template
Result
Clear!
$scope.input = ""
$scope.input = "";$scope.clearInput = function() { $scope.input = "";};
<input ng-model="input"><input ng-click="clearInput()" type="button" value="Clear!">
HOW IT WORKS?ONE WAY DATA BINGING
HOW IT WORKS?TWO IS MORE THAN ONE, BRO
HOW IT WORKS?SCOPES
DEPENDENCY INJECTIONDependecny injector is better than Chuck N.
myApp.service('myService', function() {/*...*/});
myApp.controller('SomeItemsController', function(myService) { // myService was automatically injected
myService.get('some/path').success(function(data) { $scope.items = data.items; });});
HOW IT WORKS?
ROUTING$routeProvider
myApp.config(['$routeProvider', function($rp) { $rp .when('/foo', { templateUrl: 'tpl/foo.html', controller: FooController }) .otherwise({redirectTo: '/bar'});}]);
DIRECTIVESIt's all about directives.
Value of slider: 5
myApp.directive('slider', function() { return { link: function(scope, element, attrs) { $(element).slider(); } }});
and so much more on
Thanks for coming
|
angularjs.org
@new_POPE newpope.org
Recommended
