AngulrJS Overview

9,560 views

Published on

AngulrJS Overview

Published in: Technology, Business

AngulrJS Overview

  1. 1. HTML enhanced for web apps!
  2. 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. 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. 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. 5. Model($scope)ControllerView
  6. 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. 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. 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. 9. //factory style, more involved but more sophisticatedmyApp.factory(myFactory, function () {return {sayHello: function () {return "Hello, World!";}};});myApp.controller(MyCntr, function ($scope, myFactory) {$scope.myFactory = myFactory.sayHello();});

×