AngularJS: Difference between revisions
Jump to navigation
Jump to search
| Line 73: | Line 73: | ||
$scope.day = "Thursday"; | $scope.day = "Thursday"; | ||
}); | }); | ||
myApp.controller("tomorrowCtrl", function($scope){ | |||
$scope.tomorrow = "Friday"; | |||
}); | |||
</source> | </source> | ||
In the view: | In the view: | ||
| Line 78: | Line 81: | ||
<div ng-controller="dayCtrl"> | <div ng-controller="dayCtrl"> | ||
<h4>Today is {{day}}</h4> | <h4>Today is {{day}}</h4> | ||
</div> | |||
<div ng-controller="tomorrowCtrl"> | |||
<h4>Tomorrow is {{tomorrow}}</h4> | |||
</div> | </div> | ||
</source> | </source> | ||
Revision as of 18:18, 25 May 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";
});
myApp.controller("tomorrowCtrl", function($scope){
$scope.tomorrow = "Friday";
});
In the view:
<div ng-controller="dayCtrl">
<h4>Today is {{day}}</h4>
</div>
<div ng-controller="tomorrowCtrl">
<h4>Tomorrow is {{tomorrow}}</h4>
</div>