AngulrJS Overview
•
15 likes•10,760 views
The document shows examples of using AngularJS directives, data binding, controllers and routing to build dynamic web applications. It demonstrates the ng-repeat directive to loop and display data, using controllers to define scopes and models, and routing to load different views. Later examples introduce Angular modules, configuring routes, and using factories to share data between components.
Report
Share
AngulrJS Overview
- 1. HTML enhanced for web apps!
- 3. <!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>
- 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">{{n.id}} - {{n.name}}</li> </ul> </div> <script src="/Scripts/angular.min.js"></script> </body> </html>
- 5. <!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>
- 9. <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>
- 14. <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>
- 15. <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>
- 16. //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(); });