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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

Semelhante a AngulrJS Overview

Semelhante a AngulrJS Overview (20)

Mais de Eyal Vardi

Mais de Eyal Vardi (19)

Último

Último (20)

AngulrJS Overview