You can use Angular to develop both single-page and round-trip apps, but Angular is designed primarily for developing single-page apps. Angular supports browser history, forward and back buttons, and bookmarking in single-page apps.
You normally wouldn't want to load Angular with every page change, as would be the case with using Angular in a round-trip app. However, it would make sense to do so if you were adding a subset of Angular's features (for example, templates to leverage angular's data-binding feature) to an existing round-trip app. You might follow this course of action if you were migrating an older app to a single-page Angular app.
index.html script.js Developer Guide
Developer Guide // modulemodule
Most applications have a main method which instantiates, wires, and bootstraps the application. Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several
advantages to this approach:
The process is more declarative which is easier to understand
In unit-testing there is no need to load all modules, which may aid in writing unit-tests.
Additional modules can be loaded in scenario tests, which can override some of the configuration and help end-to-end test the application
Third party code can be packaged as reusable modules.
The modules can be loaded in any/parallel order (due to delayed nature of module execution).
Ok, I'm in a hurry. How do I get a Hello World module working?
Important things to notice:
Module API
Notice the reference to the myApp module in the <html ng-app="myApp">, it is what bootstraps the app using your module.
Source
index.html :
<!doctype html>
<!doctype html>
1.
<html
<html ng-appng-app=="myApp""myApp">>
2.
<head><head>
3.
<script<script srcsrc=="http://code.angularjs.org/1.0.4angular.min.js""http://code.angularjs.org/1.0.4angular.min.js"></script>></script>
4.
<script<script srcsrc=="script.js""script.js"></script>></script>
5.
</head></head>
6.
<body><body>
7.
<div><div>
8.
{{ 'World' | greet }}
{{ 'World' | greet }}
9.
</div></div>
10.
</body></body>
11.
</html>
</html>
12.
script.js :
// declare a module // declare a module 1.
varvar myAppModule myAppModule == angular angular..modulemodule(('myApp''myApp',, []);[]);
2.
3.
// configure the module.
// configure the module.
4.
// in this example we will create a greeting filter // in this example we will create a greeting filter 5.
myAppModule
myAppModule..filterfilter(('greet''greet',, functionfunction()() {{ 6.
returnreturn functionfunction((namename)) {{ 7.
index.html script.js
returnreturn 'Hello, ''Hello, ' ++ name name ++ '!''!';; 8.
};};
9.
});});
10.
Demo
While the example above is simple, it will not scale to large applications. Instead we recommend that you break your application to multiple modules like this:
A service module, for service declaration A directive module, for directive declaration A filter module, for filter declaration
And an application level module which depends on the above modules, and which has initialization code.
The reason for this breakup is that in your tests, it is often necessary to ignore the initialization code, which tends to be difficult to test. By putting it into a separate module it can be easily ignored in tests. The tests can also be more focused by only loading the modules that are relevant to tests.
The above is only a suggestion, so feel free to tailor it to your needs.
Source
index.html :
<!doctype html>
<!doctype html>
1.
<html
<html ng-appng-app=="xmpl""xmpl">>
2.
<head><head>
3.
<script<script srcsrc=="http://code.angularjs.org/1.0.4angular.min.js""http://code.angularjs.org/1.0.4angular.min.js"></script>></script>
4.
<script<script srcsrc=="script.js""script.js"></script>></script>
5.
</head></head>
6.
<body><body>
7.
<div<div ng-controllerng-controller=="XmplController""XmplController">>
8.
{{ greeting }}!
{{ greeting }}!
9.
</div></div>
10.
</body></body>
11.
</html>
</html>
12.
script.js :
angular
angular..modulemodule(('xmpl.service''xmpl.service',, []).[]).
1.
value
value(('greeter''greeter',, {{ 2.
salutation
salutation:: 'Hello''Hello',, 3.
localize
localize:: functionfunction((localizationlocalization)) {{ 4.
thisthis..salutation salutation == localization localization..salutationsalutation;; 5.
},}, 6.
greet
angular..modulemodule(('xmpl.directive''xmpl.directive',, []);[]);
17.
18.
angular
angular..modulemodule(('xmpl.filter''xmpl.filter',, []);[]);
19.
20.
angular
angular..modulemodule(('xmpl''xmpl',, [['xmpl.service''xmpl.service',, 'xmpl.directive''xmpl.directive',, 'xmpl.filter''xmpl.filter']).]).
21.
run
run((functionfunction((greetergreeter,, user user)) {{ 22.
// This is effectively part of the main method initialization code// This is effectively part of the main method initialization code 23.
// A Controller for your app // A Controller for your app 31.
varvar XmplControllerXmplController == functionfunction(($scope$scope,, greeter greeter,, user user)) {{ 32.
$scope
$scope..greeting greeting == greeter greeter..greetgreet((useruser..namename););
33.
}} 34.
Demo
A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process. In its simplest form the module consist of collection of two kinds of blocks:
Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
1.
Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.
2.
angular
angular..modulemodule(('myModule''myModule',, []).[]).
1.
config
config((functionfunction((injectablesinjectables)) {{ // provider-injector// provider-injector 2.
}).}).
7.
run
run((functionfunction((injectablesinjectables)) {{ // instance-injector// instance-injector 8.
There are some convenience methods on the module which are equivalent to the config block. For example:
angular
angular..modulemodule(('myModule''myModule',, []).[]).
1.
directive(('directiveName''directiveName',, ...)....).
4.
angular..modulemodule(('myModule''myModule',, []).[]).
9.