Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngulrJS Overview

9,967 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();});

×