AngularJS Getting started with AngularJS Showcasing all common Angular constructs
Example
The following example shows common AngularJS constructs in one file:
<!DOCTYPE html>
<html ng-app="myDemoApp">
<head>
<style>.started { background: gold; }</style>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script>
function MyDataService() {
return {
getWorlds: function getWorlds() {
return ["this world", "another world"];
}
};
}
function DemoController(worldsService) {
var vm = this;
vm.messages = worldsService.getWorlds().map(function(w) {
return "Hello, " + w + "!";
});
}
function startup($rootScope, $window) {
$window.alert("Hello, user! Loading worlds...");
$rootScope.hasStarted = true;
}
angular.module("myDemoApp", [/* module dependencies go here */])
.service("worldsService", [MyDataService])
.controller("demoController", ["worldsService", DemoController])
.config(function() {
console.log('configuring application');
})
.run(["$rootScope", "$window", startup]);
</script>
</head>
<body ng-class="{ 'started': hasStarted }" ng-cloak>
<div ng-controller="demoController as vm">
<ul>
<li ng-repeat="msg in vm.messages">{{ msg }}</li>
</ul>
</div>
</body>
</html>
Every line of the file is explained below:
ng-app="myDemoApp", the ngApp directive that bootstraps the application and tells angular that a DOM element is controlled by a specificangular.modulenamed"myDemoApp";<script src="angular.min.js">is the first step in bootstrapping the AngularJS library;
Three functions (MyDataService, DemoController, and startup) are declared, which are used (and explained) below.
-
angular.module(...)used with an array as the second argument creates a new module. This array is used to supply a list of module dependencies. In this example we chain calls on the result of themodule(...)function; -
.service(...)creates an Angular Service and returns the module for chaining; -
.controller(...)creates an Angular Controller and returns the module for chaining; -
.config(...)Use this method to register work which needs to be performed on module loading. -
.run(...)makes sure code is run at startup time and takes an array of items as a parameter. Use this method to register work which should be performed when the injector is done loading all modules.- the first item is letting Angular know that the
startupfunction requires the built-in$rootScopeservice to be injected as an argument; - the second item is letting Angular know that the
startupfunction requires the built-in$windowservice to be injected as an argument; - the last item in the array,
startup, is the actual function to run on startup;
- the first item is letting Angular know that the
-
ng-classis the ngClass directive to set a dynamicclass, and in this example utilizeshasStartedon the$rootScopedynamically -
ng-cloakis a directive to prevent the unrendered Angular html template (e.g. "{{ msg }}") to be briefly shown before Angular has fully loaded the application. -
ng-controlleris the directive that asks Angular to instantiate a new controller of specific name to orchestrate that part of the DOM; -
ng-repeatis the directive to make Angular iterate over a collection and clone a DOM template for each item; -
{{ msg }}showcases interpolation: on-the-spot rendering of a part of the scope or controller;
