AngulrJS Overview

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>AngulrJJS Hello World</title>
</head>
<body>

1 + 1 * 3 = {{1+1*3}} <br/>

Name: <input type="text" data-ng-model="name"/> {{name}}
<script src="/Scripts/angular.min.js"></script>
</body>
</html>

<!DOCTYPE html>
<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>
</body>
</html>

<!DOCTYPE html>
<head>
<title>ng-repeat directive</title>
</head>
<body>
<div data-ng-init="names=[{id:1,name:'eyal'},{id:2,name:'vardi'}]">
<ul>
<li data-ng-repeat="n in names | orderBy:'name'">
{{n.id}} - {{n.name}}
</li>
</ul>
</div>
</body>
</html>

<div data-ng-controller="MyController">
<ul>
{{n.id}} - {{n.name}}
</li>
</ul>
</div>
<script>
function MyController($scope) {
$scope.names = [
{ id: 1, name: 'eyal' },
{ id: 2, name: 'vardi' },
{ id: 3, name: 'apple' }
];
}
</script>

<html data-ng-app="myApp">
...
<div data-ng-controller="MyController">
<ul>
{{n.id}} - {{n.name}}
</li>
</ul>
</div>
<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>

<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>
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>

//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();
});

AngulrJS Overview

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie AngulrJS Overview

Ähnlich wie AngulrJS Overview (20)

Mehr von Eyal Vardi

Mehr von Eyal Vardi (19)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

AngulrJS Overview