AngularJS: Difference between revisions
Jump to navigation
Jump to search
| (9 intermediate revisions by the same user not shown) | |||
| Line 72: | Line 72: | ||
myApp.controller("dayCtrl", function($scope){ // inject the dependency on $scope | myApp.controller("dayCtrl", function($scope){ // inject the dependency on $scope | ||
$scope.day = "Thursday"; | $scope.day = "Thursday"; | ||
}); | }) | ||
.controller("tomorrowCtrl", function($scope){ // fluent api allows chaining | |||
$scope.day = "Friday"; | |||
}); | |||
</source> | </source> | ||
In the view: | In the view: | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<h4>Today is {{day}}</h4> | <div ng-controller="dayCtrl"> | ||
<h4>Today is {{day}}</h4> | |||
</div> | |||
<div ng-controller="tomorrowCtrl"> | |||
<h4>Tomorrow is {{day}}</h4> | |||
</div> | |||
</source> | |||
== Directives == | |||
<source lang="javascript"> | |||
myApp.directive("highlight", function () { // factory function | |||
return function (scope, element, attrs) { // returns a worker function | |||
if (scope.day == attrs["highlight"]) { | |||
element.css("color", "red"); | |||
} | |||
} | |||
}); | |||
</source> | |||
In the view: | |||
<source lang="html4strict"> | |||
<h4 ng-controller="dayCtrl" highlight="Monday"> | |||
Today is {{day}} | |||
</h4> | |||
</source> | |||
== Filters == | |||
<source lang="html4strict"> | |||
<p>{{ name | uppercase }}</p> | |||
<p>{{ price | currency }}</p> | |||
<p>{{ pubdate | date }}</p> | |||
</source> | </source> | ||
Latest revision as of 18:24, 11 June 2015
Good tutorials:
Example
<!DOCTYPE html>
<html ng-app="exampleApp" >
<head>
<title>AngularJS Demo</title>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script src="angular.js"></script>
<script>
var myApp = angular.module("exampleApp", []);
myApp.controller("dayCtrl", function ($scope) {
// controller statements will go here
});
</script>
</head>
<body>
<div class="panel" ng-controller="dayCtrl">
<div class="page-header">
<h3>AngularJS App</h3>
</div>
<h4>Today is {{day || "(unknown)"}}</h4>
</div>
</body>
</html>
Utility methods
angular.isNumber(o);
angular.isString(o);
angular.isArray(o);
angular.isObject(o);
angular.lowercase(o);
angular.uppercase(o);
angular.extend(obj1, obj2); // add properties of obj2 to obj1
for (var prop in myData) {
console.log("Name: " + prop + " Value: " + myData[prop]);
}
angular.forEach(myData, function (value, key) {
console.log("Name: " + key + " Value: " + value);
});
Modules
var myApp = angular.module("myApp", []); // create the app
var myApp = angular.module("myApp"); // gives an error if the app hasn't been created
myApp.name; // "myApp"
myApp.constant(key, value); // define a constant
myApp.value(key, value); // define a service that returns a constant
myApp.controller(name, constructor); // create a controller
myApp.service(name, constructor); // create a service
myApp.factory(name, provider); // create a service
myApp.provider(name, type); // create a service
myApp.config(callback); // register a function to configure a model after loading
myApp.run(callback); // register a function to run after load and configure
myApp.animation(name, factory); // create animations
myApp.directive(name, factory); // create a directive to extend HTML
myApp.filter(name, factory); // create a filter
Controllers
myApp.controller("dayCtrl", function($scope){ // inject the dependency on $scope
$scope.day = "Thursday";
})
.controller("tomorrowCtrl", function($scope){ // fluent api allows chaining
$scope.day = "Friday";
});
In the view:
<div ng-controller="dayCtrl">
<h4>Today is {{day}}</h4>
</div>
<div ng-controller="tomorrowCtrl">
<h4>Tomorrow is {{day}}</h4>
</div>
Directives
myApp.directive("highlight", function () { // factory function
return function (scope, element, attrs) { // returns a worker function
if (scope.day == attrs["highlight"]) {
element.css("color", "red");
}
}
});
In the view:
<h4 ng-controller="dayCtrl" highlight="Monday">
Today is {{day}}
</h4>
Filters
<p>{{ name | uppercase }}</p>
<p>{{ price | currency }}</p>
<p>{{ pubdate | date }}</p>