URL：
https://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/?utm_source=javascriptweekly&utm_medium=email
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="js/lib/angular.min.js"></script>
<script >
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', 'Math', function($scope, Math) {
var a = 12;
var b = 24;
$scope.myModel = '';
$scope.result = Math.multiply(a, b);
$scope.greeting = 'Todd Motto';
$scope.numbers = [10, 25, 35, 45, 60, 80, 100];
$scope.lowerBound = 42;
$scope.greaterThanNum = function(item) {
return item > $scope.lowerBound;
};
$scope.user = {};
$scope.user.details = {
"username": "Todd Motto",
"id": "89101112"
};
}]);
myApp.directive('customButton', function() {
return {
restrict: 'A',
replace: true,
transclude: true,
templateUrl: 'templates/customButton.html',
link: function (scope, element, attrs) {
//dom mani/event
}
};
});
myApp.service('Math', function() {
this.multiply = function(x, y) {
return x * y;
};
});
myApp.filter('reverse', function() {
return function(input, uppercase) {
var out = '';
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
if (uppercase) {
out = out.toUpperCase();
}
return out;
}
});
myApp.controller('EmailsCtrl', ['$scope', function($scope) {
$scope.emails = {};
$scope.emails.messages = [{
"from": "Steve Jobs",
"subject": "I think I'm holding my phone wrong :/",
"sent": "2013-10-01T08:05:59Z"
},{
"from": "Ellie Goulding",
"subject": "I've got Starry Eyes, lulz",
"sent": "2013-09-21T19:45:00Z"
},{
"from": "Michael Stipe",
"subject": "Everybody hurts, sometimes.",
"sent": "2013-09-12T11:38:30Z"
},{
"from": "Jeremy Clarkson",
"subject": "Think I've found the best car... In the world",
"sent": "2013-09-03T13:15:11Z"
}];
$scope.deleteEmail = function(index) {
$scope.emails.messages.splice(index, 1);
};
$scope.main = {};
$scope.main.test1 = [];
$scope.main.test2 = [{"some": "data"}];
}]);
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
welcome, {{ user.details.username}}.<br>
user ID: {{ user.details.id }}<br>
{{result}}<br>
<a custom-button>Click Me</a><br>
no filter: {{greeting}}<br>
Reverse: {{greeting|reverse}}<br>
<input type="text" ng-model="lowerBound" /><br>
<li ng-repeat="number in numbers|filter: greaterThanNum">
{{number}}
</li><br>
<input type="text" ng-model="myModel" placeholder="Start typing..." />
<p>My model data: {{ myModel }} </p>
</div>
<div ng-controller="EmailsCtrl">
<ul>
<li ng-repeat="message in emails.messages">
<p>{{ message.index }}</p>
<p>From: {{ message.from }}</p>
<p>Subject: {{ message.subject }}</p>
<p>{{message.sent|date:'MMM d, y h:mm:ss a'}}</p>
<p><a ng-click="deleteEmail($index)">Delete email</a></p>
</li>
</ul>
<p>Test 1: {{ main.test1.length > 0 && 'My data' || 'No data' }}</p>
<p>Test 2: {{ main.test2.length > 0 && 'My data' || 'No data' }}</p>
</div>
<a href="" ng-click="toggle = !toggle">Toggle nav</a>
<ul ng-show="toggle">
<li>Link 1</li>
<li>Link 2</li>
<li>Kub 3</li>
</ul>
</div>
</body>
</html>
时间： 2024-10-22 20:53:50