9 |
10 | In the Angular implementation of MVC, the view has knowledge of both the model and the controller.
11 | The view knows about the model where two-way data-binding occurs. The view has knowledge of the
12 | controller through Angular directives, such as {@link api/ng.directive:ngController
13 | ngController} and {@link api/ng.directive:ngView ngView}, and through bindings of this form:
14 | `{{someControllerFunction()}}`. In these ways, the view can call functions in an associated
15 | controller function.
16 |
17 |
18 | ## Related Topics
19 |
20 | * {@link dev_guide.mvc About MVC in Angular}
21 | * {@link dev_guide.mvc.understanding_model Understanding the Model Component}
22 | * {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
23 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.services.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Angular Services
3 | @description
4 |
5 | Services are a feature that Angular brings to client-side web apps from the server side, where
6 | services have been commonly used for a long time. Services in Angular apps are substitutable
7 | objects that are wired together using {@link di dependency injection (DI)}.
8 |
9 |
10 | ## Related Topics
11 |
12 | * {@link dev_guide.services.understanding_services Understanding Angular Services}
13 | * {@link dev_guide.services.creating_services Creating Angular Services}
14 | * {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
15 | * {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers}
16 | * {@link dev_guide.services.testing_services Testing Angular Services}
17 |
18 | ## Related API
19 |
20 | * {@link api/ng Angular Service API}
21 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.services.testing_services.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Angular Services: Testing Angular Services
3 | @description
4 |
5 | The following is a unit test for the 'notify' service in the 'Dependencies' example in {@link
6 | dev_guide.services.creating_services Creating Angular Services}. The unit test example uses Jasmine
7 | spy (mock) instead of a real browser alert.
8 |
9 |
10 | var mock, notify;
11 |
12 | beforeEach(function() {
13 | mock = {alert: jasmine.createSpy()};
14 |
15 | module(function($provide) {
16 | $provide.value('$window', mock);
17 | });
18 |
19 | inject(function($injector) {
20 | notify = $injector.get('notify');
21 | });
22 | });
23 |
24 | it('should not alert first two notifications', function() {
25 | notify('one');
26 | notify('two');
27 |
28 | expect(mock.alert).not.toHaveBeenCalled();
29 | });
30 |
31 | it('should alert all after third notification', function() {
32 | notify('one');
33 | notify('two');
34 | notify('three');
35 |
36 | expect(mock.alert).toHaveBeenCalledWith("one\ntwo\nthree");
37 | });
38 |
39 | it('should clear messages after alert', function() {
40 | notify('one');
41 | notify('two');
42 | notify('third');
43 | notify('more');
44 | notify('two');
45 | notify('third');
46 |
47 | expect(mock.alert.callCount).toEqual(2);
48 | expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);
49 | });
50 |
51 |
52 |
53 | ## Related Topics
54 |
55 | * {@link dev_guide.services.understanding_services Understanding Angular Services}
56 | * {@link dev_guide.services.creating_services Creating Angular Services}
57 | * {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
58 | * {@link dev_guide.services.injecting_controllers Injecting Services Into Controllers}
59 |
60 | ## Related API
61 |
62 | * {@link api/ng Angular Service API}
63 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.services.understanding_services.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Angular Services: Understanding Angular Services
3 | @description
4 |
5 | Angular services are singletons that carry out specific tasks common to web apps, such as the
6 | {@link api/ng.$http $http service} that provides low level access to the browser's
7 | `XMLHttpRequest` object.
8 |
9 | To use an Angular service, you identify it as a dependency for the dependent (a controller, or
10 | another service) that depends on the service. Angular's dependency injection subsystem takes care
11 | of the rest. The Angular injector subsystem is in charge of service instantiation, resolution of
12 | dependencies, and provision of dependencies to factory functions as requested.
13 |
14 | Angular injects dependencies using "constructor" injection (the service is passed in via a factory
15 | function). Because JavaScript is a dynamically typed language, Angular's dependency injection
16 | subsystem cannot use static types to identify service dependencies. For this reason a dependent
17 | must explicitly define its dependencies by using the `$inject` property. For example:
18 |
19 | myController.$inject = ['$location'];
20 |
21 | The Angular web framework provides a set of services for common operations. Like other core Angular
22 | variables and identifiers, the built-in services always start with `$` (such as `$http` mentioned
23 | above). You can also create your own custom services.
24 |
25 |
26 | ## Related Topics
27 |
28 | * {@link di About Angular Dependency Injection}
29 | * {@link dev_guide.services.creating_services Creating Angular Services}
30 | * {@link dev_guide.services.managing_dependencies Managing Service Dependencies}
31 | * {@link dev_guide.services.testing_services Testing Angular Services}
32 |
33 | ## Related API
34 |
35 | * {@link api/ng Angular Service API}
36 | * {@link api/angular.injector Injector API}
37 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.templates.css-styling.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Templates: Working With CSS in Angular
3 | @description
4 |
5 |
6 | Angular sets these CSS classes. It is up to your application to provide useful styling.
7 |
8 | # CSS classes used by angular
9 |
10 | * `ng-invalid`, `ng-valid`
11 | - **Usage:** angular applies this class to an input widget element if that element's input does
12 | not pass validation. (see {@link api/ng.directive:input input} directive).
13 |
14 | * `ng-pristine`, `ng-dirty`
15 | - **Usage:** angular {@link api/ng.directive:input input} directive applies `ng-pristine` class
16 | to a new input widget element which did not have user interaction. Once the user interacts with
17 | the input widget the class is changed to `ng-dirty`.
18 |
19 |
20 | ## Related Topics
21 |
22 | * {@link dev_guide.templates Angular Templates}
23 | * {@link forms Angular Forms}
24 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.templates.databinding.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Templates: Data Binding in Angular
3 | @description
4 |
5 | Data-binding in Angular web apps is the automatic syncronization of data between the model and view
6 | components. The way that Angular implements data-binding lets you treat the model as the
7 | single-source-of-truth in your application. The view is a projection of the model at all times.
8 | When the model changes, the view reflects the change, and vice versa.
9 |
10 | ## Data Binding in Classical Template Systems
11 |
12 | 
13 | Most templating systems bind data in only one direction: they merge template and model components
14 | together into a view, as illustrated in the diagram. After the merge occurs, changes to the model
15 | or related sections of the view are NOT automatically reflected in the view. Worse, any changes
16 | that the user makes to the view are not reflected in the model. This means that the developer has
17 | to write code that constantly syncs the view with the model and the model with the view.
18 |
19 | ## Data Binding in Angular Templates
20 |
21 | 
22 | The way Angular templates works is different, as illustrated in the diagram. They are different
23 | because first the template (which is the uncompiled HTML along with any additional markup or
24 | directives) is compiled on the browser, and second, the compilation step produces a live view. We
25 | say live because any changes to the view are immediately reflected in the model, and any changes in
26 | the model are propagated to the view. This makes the model always the single-source-of-truth for
27 | the application state, greatly simplifying the programming model for the developer. You can think of
28 | the view as simply an instant projection of your model.
29 |
30 | Because the view is just a projection of the model, the controller is completely separated from the
31 | view and unaware of it. This makes testing a snap because it is easy to test your controller in
32 | isolation without the view and the related DOM/browser dependency.
33 |
34 |
35 | ## Related Topics
36 |
37 | * {@link scope Angular Scopes}
38 | * {@link dev_guide.templates Angular Templates}
39 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Templates: Filters: Creating Angular Filters
3 | @description
4 |
5 | Writing your own filter is very easy: just register a new filter (injectable) factory function with
6 | your module. This factory function should return a new filter function which takes the input value
7 | as the first argument. Any filter arguments are passed in as additional arguments to the filter
8 | function.
9 |
10 | The following sample filter reverses a text string. In addition, it conditionally makes the
11 | text upper-case and assigns color.
12 |
13 | 25 |
29 | Fast just got faster with Nexus S. 30 |
31 |35 | The Next, Next Generation tablet. 36 |
37 |Total number of phones: 2
47 | 48 | 49 | # Summary 50 | 51 | This addition to your app uses static HTML to display the list. Now, let's go to {@link step_02 52 | step 2} to learn how to use AngularJS to dynamically generate the same list. 53 | 54 | 55 |This page is currently unavailable because your are offline.
4 |Please connect to the Internet and reload the page.
5 | -------------------------------------------------------------------------------- /example/buzz/buzz.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: -webkit-gradient(linear, left top, left 100, from(#bbb), to(#fff)); 3 | background-repeat: no-repeat; 4 | margin: 0px; 5 | font-family: sans-serif; 6 | font-size: 12px; 7 | } 8 | 9 | body > div { 10 | border-top: 1px solid white; 11 | border-bottom: 1px solid black; 12 | text-align: center; 13 | background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#888)); 14 | -webkit-background-origin: padding; -webkit-background-clip: content; 15 | } 16 | body > div button { 17 | margin: 5px; 18 | } 19 | 20 | body > div span:FIRST-CHILD { 21 | float: left; 22 | font-family: monospace; 23 | font-size: 1.5em; 24 | color: black; 25 | padding: 2px 5px; 26 | } 27 | 28 | body > div span:last-child { 29 | float: right; 30 | } 31 | 32 | ul { 33 | list-style: none; 34 | padding: 10px; 35 | margin: 0; 36 | } 37 | 38 | body > ul > li { 39 | border: 1px solid black; 40 | margin: 15px 5px; 41 | padding: 0; 42 | -webkit-box-shadow: 5px 5px 5px #888; 43 | } 44 | 45 | body > ul > li > h1 { 46 | margin: 0; 47 | background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999)); 48 | font-size: 13px; 49 | border-bottom: 1px solid black; 50 | } 51 | 52 | h1 > img, 53 | li > img { 54 | max-height: 30px; 55 | max-width: 30px; 56 | vertical-align: middle; 57 | padding: 3px; 58 | } 59 | 60 | a > img { 61 | margin-right: 5px; 62 | margin-top: 5px; 63 | } 64 | 65 | body > ul > li > h1 > a:last-child { 66 | float: right; 67 | margin: 10px; 68 | } 69 | 70 | body > ul > li > div { 71 | background-color: white; 72 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); 73 | margin: 0; 74 | padding: 10px; 75 | } 76 | 77 | body > ul > li ul { 78 | margin: 0; 79 | padding: 0; 80 | margin-left: 5px; 81 | border-left: 5px solid lightgray; 82 | } 83 | 84 | body > ul > li ul > li { 85 | margin: 0; 86 | padding: 10px; 87 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); 88 | } 89 | 90 | -------------------------------------------------------------------------------- /example/buzz/buzz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |23 | view1 | view2 | blank 24 |
25 | 26 |tweets=(TODO: display me!!!)33 | 34 | 35 | -------------------------------------------------------------------------------- /example/tweeter/tweeterclient.js: -------------------------------------------------------------------------------- 1 | function noop() {} 2 | $(document).ready(function() { 3 | function xhr(method, url, data, callback){ 4 | jQuery.getJSON(url, function() { 5 | callback.apply(this, arguments); 6 | scope.updateView(); 7 | }); 8 | } 9 | 10 | var resourceFactory = new ResourceFactory(xhr); 11 | 12 | var Tweeter = resourceFactory.route("http://twitter.com/statuses/:service:username.json", {}, { 13 | home: {method:'GET', params: {service:'home_timeline'}, isArray:true }, 14 | user: {method:'GET', params: {service:'user_timeline/'}, isArray:true } 15 | }); 16 | 17 | 18 | var scope = window.scope = angular.compile(document, { 19 | location:angular.startUrlWatcher() 20 | }); 21 | 22 | function fetchTweets(username){ 23 | return username ? Tweeter.user({username: username}) : Tweeter.home(); 24 | } 25 | 26 | scope.set('fetchTweets', fetchTweets); 27 | scope.set('users', [ 28 | {screen_name:'mhevery', name:'Mi\u0161ko Hevery', 29 | notes:'Author of
myStyle={{myStyle}}
23 |
20 | * // Given:
21 | * // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
22 | * // Route: /Chapter/:chapterId/Section/:sectionId
23 | * //
24 | * // Then
25 | * $routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
26 | *
27 | */
28 | function $RouteParamsProvider() {
29 | this.$get = valueFn({});
30 | }
31 |
--------------------------------------------------------------------------------
/src/ng/sniffer.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * !!! This is an undocumented "private" service !!!
5 | *
6 | * @name ng.$sniffer
7 | * @requires $window
8 | * @requires $document
9 | *
10 | * @property {boolean} history Does the browser support html5 history api ?
11 | * @property {boolean} hashchange Does the browser support hashchange event ?
12 | *
13 | * @description
14 | * This is very simple implementation of testing browser's features.
15 | */
16 | function $SnifferProvider() {
17 | this.$get = ['$window', '$document', function($window, $document) {
18 | var eventSupport = {},
19 | android = int((/android (\d+)/.exec(lowercase($window.navigator.userAgent)) || [])[1]),
20 | document = $document[0];
21 |
22 | return {
23 | // Android has history.pushState, but it does not update location correctly
24 | // so let's not use the history API at all.
25 | // http://code.google.com/p/android/issues/detail?id=17471
26 | // https://github.com/angular/angular.js/issues/904
27 | history: !!($window.history && $window.history.pushState && !(android < 4)),
28 | hashchange: 'onhashchange' in $window &&
29 | // IE8 compatible mode lies
30 | (!document.documentMode || document.documentMode > 7),
31 | hasEvent: function(event) {
32 | // IE9 implements 'input' event it's so fubared that we rather pretend that it doesn't have
33 | // it. In particular the event is not fired when backspace or delete key are pressed or
34 | // when cut operation is performed.
35 | if (event == 'input' && msie == 9) return false;
36 |
37 | if (isUndefined(eventSupport[event])) {
38 | var divElm = document.createElement('div');
39 | eventSupport[event] = 'on' + event in divElm;
40 | }
41 |
42 | return eventSupport[event];
43 | },
44 | csp: document.securityPolicy ? document.securityPolicy.isActive : false
45 | };
46 | }];
47 | }
48 |
--------------------------------------------------------------------------------
/src/ng/window.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @ngdoc object
5 | * @name ng.$window
6 | *
7 | * @description
8 | * A reference to the browser's `window` object. While `window`
9 | * is globally available in JavaScript, it causes testability problems, because
10 | * it is a global variable. In angular we always refer to it through the
11 | * `$window` service, so it may be overriden, removed or mocked for testing.
12 | *
13 | * All expressions are evaluated with respect to current scope so they don't
14 | * suffer from window globality.
15 | *
16 | * @example
17 |