Intro to Angular.JS Directives
Le téléchargement de votre SlideShare est en cours.
×
Consultez-les par la suite
Plus De Contenu Connexe
Diaporamas pour vous (20)
Les utilisateurs ont également aimé (19)
Similaire à AngulrJS Overview (20)
Plus par Eyal Vardi (19)
Plus récents (20)
AngulrJS Overview
- 1. HTML enhanced for web apps!
- 2. <!DOCTYPE html> <html data-ng-app=""> <head> <title>AngulrJJS Hello World</title> </head> <body> <!-- Expressions --> 1 + 1 * 3 = {{1+1*3}} <br/> <!-- Directives & Data Binding --> Name: <input type="text" data-ng-model="name"/> {{name}} <script src="/Scripts/angular.min.js"></script> </body> </html>
- 3. <!DOCTYPE html> <html data-ng-app=""> <head> <title>ng-repeat directive</title> </head> <body> <div data-ng-init="names=[{id:1,name:'eyal'},{id:2,name:'vardi'}]"> Looping with the ng-repeat Directive:<br/> <ul> <li data-ng-repeat="n in names">{{n.id}} - {{n.name}}</li> </ul> </div> <script src="/Scripts/angular.min.js"></script> </body> </html>
- 4. <!DOCTYPE html> <html data-ng-app=""> <head> <title>ng-repeat directive</title> </head> <body> <div data-ng-init="names=[{id:1,name:'eyal'},{id:2,name:'vardi'}]"> Looping with the ng-repeat Directive:<br/> <ul> <li data-ng-repeat="n in names | orderBy:'name'"> {{n.id}} - {{n.name}} </li> </ul> </div> <script src="/Scripts/angular.min.js"></script> </body> </html>
- 5. Model ($scope) ControllerView
- 6. <div data-ng-controller="MyController"> Looping with the ng-repeat Directive:<br/> <ul> <li data-ng-repeat="n in names | orderBy:'name'"> {{n.id}} - {{n.name}} </li> </ul> </div> <script src="/Scripts/angular.min.js"></script> <script> function MyController($scope) { $scope.names = [ { id: 1, name: 'eyal' }, { id: 2, name: 'vardi' }, { id: 3, name: 'apple' } ]; } </script>
- 7. <html data-ng-app="myApp"> ... <div data-ng-controller="MyController"> Looping with the ng-repeat Directive:<br/> <ul> <li data-ng-repeat="n in names | orderBy:'name'"> {{n.id}} - {{n.name}} </li> </ul> </div> <script src="/Scripts/angular.min.js"></script> <script> var myApp = angular.module('myApp', []); myApp.controller('MyController', function($scope) { $scope.names = [ { id: 1, name: 'eyal' }, { id: 2, name: 'vardi' }, { id: 3, name: 'apple' } ]; }); </script>
- 8. <div data-ng-controller="MyCont"> <a data-ng-href="#/">View 1</a> | <a data-ng-href="#/view2">View 2</a> <div data-ng-view="#/View2"></div> </div> <script src="/Scripts/angular.min.js"></script> <script> var myApp = angular.module('myApp', []); myApp.config(function($routeProvider) { $routeProvider .when('/' , { controller: 'MyCont', templateUrl: 'V1.htm' }) .when('/view2', { controller: 'MyCont', templateUrl: 'V2.htm' }) .otherwise({ redirectTo: '/' }); }); myApp.controller('MyCont', function($scope) { $scope.names = [{ id: 1, name: 'eyal' },{ id: 2, name: 'vardi' }, { id: 3, name: 'apple' }]; }); </script>
- 9. //factory style, more involved but more sophisticated myApp.factory('myFactory', function () { return { sayHello: function () { return "Hello, World!"; } }; }); myApp.controller('MyCntr', function ($scope, myFactory) { $scope.myFactory = myFactory.sayHello(); });
