mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +00:00
refactor($route): pull $route and friends into angular-route.js
$route, $routeParams and ngView have been pulled from core angular.js
to angular-route.js/ngRoute module.
This is was done to in order keep the core focused on most commonly
used functionality and allow community routers to be freely used
instead of $route service.
There is no need to panic, angular-route will keep on being supported
by the angular team.
Note: I'm intentionally not fixing tutorial links. Tutorial will need
bigger changes and those should be done when we update tutorial to
1.2.
BREAKING CHANGE: applications that use $route will now need to load
angular-route.js file and define dependency on ngRoute module.
Before:
```
...
<script src="angular.js"></script>
...
var myApp = angular.module('myApp', ['someOtherModule']);
...
```
After:
```
...
<script src="angular.js"></script>
<script src="angular-route.js"></script>
...
var myApp = angular.module('myApp', ['ngRoute', 'someOtherModule']);
...
```
Closes #2804
This commit is contained in:
Igor Minar
parent
7a5cfb593f
commit
5599b55b04
25 changed files with 157 additions and 123 deletions
12
Gruntfile.js
12
Gruntfile.js
|
|
@ -104,13 +104,22 @@ module.exports = function(grunt) {
|
|||
src: util.wrap([
|
||||
'src/ngSanitize/sanitize.js',
|
||||
'src/ngSanitize/directive/ngBindHtml.js',
|
||||
'src/ngSanitize/filter/linky.js',
|
||||
'src/ngSanitize/filter/linky.js'
|
||||
], 'module')
|
||||
},
|
||||
resource: {
|
||||
dest: 'build/angular-resource.js',
|
||||
src: util.wrap(['src/ngResource/resource.js'], 'module')
|
||||
},
|
||||
route: {
|
||||
dest: 'build/angular-route.js',
|
||||
src: util.wrap([
|
||||
'src/ngRoute/routeUtils.js',
|
||||
'src/ngRoute/route.js',
|
||||
'src/ngRoute/routeParams.js',
|
||||
'src/ngRoute/directive/ngView.js'
|
||||
], 'module')
|
||||
},
|
||||
cookies: {
|
||||
dest: 'build/angular-cookies.js',
|
||||
src: util.wrap(['src/ngCookies/cookies.js'], 'module')
|
||||
|
|
@ -136,6 +145,7 @@ module.exports = function(grunt) {
|
|||
loader: 'build/angular-loader.js',
|
||||
mobile: 'build/angular-mobile.js',
|
||||
resource: 'build/angular-resource.js',
|
||||
route: 'build/angular-route.js',
|
||||
sanitize: 'build/angular-sanitize.js',
|
||||
bootstrap: 'build/docs/components/angular-bootstrap.js',
|
||||
bootstrapPrettify: 'build/docs/components/angular-bootstrap-prettify.js',
|
||||
|
|
|
|||
38
angularFiles.js
vendored
38
angularFiles.js
vendored
|
|
@ -23,8 +23,6 @@ angularFiles = {
|
|||
'src/ng/log.js',
|
||||
'src/ng/parse.js',
|
||||
'src/ng/q.js',
|
||||
'src/ng/route.js',
|
||||
'src/ng/routeParams.js',
|
||||
'src/ng/rootScope.js',
|
||||
'src/ng/sniffer.js',
|
||||
'src/ng/window.js',
|
||||
|
|
@ -60,7 +58,6 @@ angularFiles = {
|
|||
'src/ng/directive/ngStyle.js',
|
||||
'src/ng/directive/ngSwitch.js',
|
||||
'src/ng/directive/ngTransclude.js',
|
||||
'src/ng/directive/ngView.js',
|
||||
'src/ng/directive/script.js',
|
||||
'src/ng/directive/select.js',
|
||||
'src/ng/directive/style.js'
|
||||
|
|
@ -69,6 +66,10 @@ angularFiles = {
|
|||
'angularSrcModules': [
|
||||
'src/ngCookies/cookies.js',
|
||||
'src/ngResource/resource.js',
|
||||
'src/ngRoute/routeUtils.js',
|
||||
'src/ngRoute/route.js',
|
||||
'src/ngRoute/routeParams.js',
|
||||
'src/ngRoute/directive/ngView.js',
|
||||
'src/ngSanitize/sanitize.js',
|
||||
'src/ngSanitize/directive/ngBindHtml.js',
|
||||
'src/ngSanitize/filter/linky.js',
|
||||
|
|
@ -106,19 +107,14 @@ angularFiles = {
|
|||
'test/ngScenario/jstd-scenario-adapter/*.js',
|
||||
'test/*.js',
|
||||
'test/auto/*.js',
|
||||
'test/ng/*.js',
|
||||
'test/ng/directive/*.js',
|
||||
'test/ng/filter/*.js',
|
||||
'test/ng/**/*.js',
|
||||
'test/ngCookies/*.js',
|
||||
'test/ngResource/*.js',
|
||||
'test/ngSanitize/*.js',
|
||||
'test/ngSanitize/directive/*.js',
|
||||
'test/ngSanitize/filter/*.js',
|
||||
'test/ngRoute/**/*.js',
|
||||
'test/ngSanitize/**/*.js',
|
||||
'test/ngMock/*.js',
|
||||
'test/ngMobile/*.js',
|
||||
'test/ngMobile/directive/*.js',
|
||||
'docs/component-spec/bootstrap/*.js',
|
||||
'docs/component-spec/*.js'
|
||||
'test/ngMobile/**/*.js',
|
||||
'docs/component-spec/**/*.js'
|
||||
],
|
||||
|
||||
'jstd': [
|
||||
|
|
@ -153,25 +149,15 @@ angularFiles = {
|
|||
'lib/jasmine/jasmine.js',
|
||||
'lib/jasmine-jstd-adapter/JasmineAdapter.js',
|
||||
'build/angular.js',
|
||||
'src/ngMock/angular-mocks.js',
|
||||
'src/ngCookies/cookies.js',
|
||||
'src/ngResource/resource.js',
|
||||
'src/ngMobile/mobile.js',
|
||||
'src/ngMobile/swipe.js',
|
||||
'src/ngMobile/directive/ngClick.js',
|
||||
'src/ngMobile/directive/ngSwipe.js',
|
||||
'src/ngSanitize/sanitize.js',
|
||||
'src/ngSanitize/directive/ngBindHtml.js',
|
||||
'src/ngSanitize/filter/linky.js',
|
||||
'@angularSrcModules',
|
||||
'src/ngScenario/browserTrigger.js',
|
||||
'test/matchers.js',
|
||||
'test/testabilityPatch.js',
|
||||
'test/ngMock/*.js',
|
||||
'test/ngCookies/*.js',
|
||||
'test/ngRoute/**/*.js',
|
||||
'test/ngResource/*.js',
|
||||
'test/ngSanitize/*.js',
|
||||
'test/ngSanitize/directive/*.js',
|
||||
'test/ngSanitize/filter/*.js',
|
||||
'test/ngSanitize/**/*.js',
|
||||
'test/ngMobile/**/*.js'
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ var service = { value: {} };
|
|||
var DEPENDENCIES = {
|
||||
'angular.js': 'http://code.angularjs.org/' + angular.version.full + '/angular.min.js',
|
||||
'angular-resource.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-resource.min.js',
|
||||
'angular-route.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-route.min.js',
|
||||
'angular-sanitize.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-sanitize.min.js',
|
||||
'angular-cookies.js': 'http://code.angularjs.org/' + angular.version.full + '/angular-cookies.min.js'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@ In this example we have a simple app which consist of two screens:
|
|||
* Welcome: url `welcome` Show the user contact information.
|
||||
* Settings: url `settings` Show an edit screen for user contact information.
|
||||
|
||||
<example module="deepLinking" deps="angular-sanitize.js">
|
||||
<example module="deepLinking" deps="angular-route.js, angular-sanitize.js">
|
||||
<file name="script.js">
|
||||
angular.module('deepLinking', ['ngSanitize'])
|
||||
angular.module('deepLinking', ['ngRoute', 'ngSanitize'])
|
||||
.config(function($routeProvider) {
|
||||
$routeProvider.
|
||||
when("/welcome", {templateUrl:'welcome.html', controller:WelcomeCntl}).
|
||||
|
|
@ -141,11 +141,11 @@ In this example we have a simple app which consist of two screens:
|
|||
# Things to notice
|
||||
|
||||
* Routes are defined in the `AppCntl` class. The initialization of the controller causes the
|
||||
initialization of the {@link api/ng.$route $route} service with the proper URL
|
||||
initialization of the {@link api/ngRoute.$route $route} service with the proper URL
|
||||
routes.
|
||||
* The {@link api/ng.$route $route} service then watches the URL and instantiates the
|
||||
* The {@link api/ngRoute.$route $route} service then watches the URL and instantiates the
|
||||
appropriate controller when the URL changes.
|
||||
* The {@link api/ng.directive:ngView ngView} widget loads the
|
||||
* The {@link api/ngRoute.directive:ngView ngView} widget loads the
|
||||
view when the URL changes. It also sets the view scope to the newly instantiated controller.
|
||||
* Changing the URL is sufficient to change the controller and view. It makes no difference whether
|
||||
the URL is changed programatically or by the user.
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ instances).
|
|||
# Associating Controllers with Angular Scope Objects
|
||||
|
||||
You can associate controllers with scope objects implicitly via the {@link api/ng.directive:ngController ngController
|
||||
directive} or {@link api/ng.$route $route service}.
|
||||
directive} or {@link api/ngRoute.$route $route service}.
|
||||
|
||||
|
||||
## Controller Constructor and Methods Example
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ the DOM based on information in the template, controller and model.
|
|||
In the Angular implementation of MVC, the view has knowledge of both the model and the controller.
|
||||
The view knows about the model where two-way data-binding occurs. The view has knowledge of the
|
||||
controller through Angular directives, such as {@link api/ng.directive:ngController
|
||||
ngController} and {@link api/ng.directive:ngView ngView}, and through bindings of this form:
|
||||
ngController} and {@link api/ngRoute.directive:ngView ngView}, and through bindings of this form:
|
||||
`{{someControllerFunction()}}`. In these ways, the view can call functions in an associated
|
||||
controller function.
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ Things to notice in this example:
|
|||
* The `batchLog` service depends on the built-in {@link api/ng.$timeout $timeout} and
|
||||
{@link api/ng.$log $log} services, and allows messages to be logged into the
|
||||
`console.log` in batches.
|
||||
* The `routeTemplateMonitor` service depends on the built-in {@link api/ng.$route
|
||||
* The `routeTemplateMonitor` service depends on the built-in {@link api/ngRoute.$route
|
||||
$route} service as well as our custom `batchLog` service.
|
||||
* Both of our services use the factory function signature and array notation for inject annotations
|
||||
to declare their dependencies. It is important that the order of the string identifiers in the array
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@ with {@link expression expressions}:
|
|||
In a simple single-page app, the template consists of HTML, CSS, and angular directives contained
|
||||
in just one HTML file (usually `index.html`). In a more complex app, you can display multiple views
|
||||
within one main page using "partials", which are segments of template located in separate HTML
|
||||
files. You "include" the partials in the main page using the {@link api/ng.$route
|
||||
$route} service in conjunction with the {@link api/ng.directive:ngView ngView} directive. An
|
||||
files. You "include" the partials in the main page using the {@link api/ngRoute.$route
|
||||
$route} service in conjunction with the {@link api/ngRoute.directive:ngView ngView} directive. An
|
||||
example of this technique is shown in the {@link tutorial/ angular tutorial}, in steps seven and
|
||||
eight.
|
||||
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@ In this example we will build a directive that displays the current time.
|
|||
|
||||
# Writing directives (long version)
|
||||
|
||||
There are different ways to declare a directive. The difference resides in the return
|
||||
There are different ways to declare a directive. The difference resides in the return
|
||||
value of the factory function. You can either return a Directive Definition Object
|
||||
(see below) that defines the directive properties, or just the postLink function
|
||||
of such an object (all other properties will have the default values).
|
||||
|
|
@ -284,7 +284,7 @@ Here's an example directive declared with a Directive Definition Object:
|
|||
|
||||
In most cases you will not need such fine control and so the above can be simplified. You can still
|
||||
return a Directive Definition Object, but only setting the 'compile' function property of the Object,
|
||||
and rely on the default values for other properties.
|
||||
and rely on the default values for other properties.
|
||||
|
||||
Therefore the above can be simplified as:
|
||||
|
||||
|
|
@ -462,7 +462,7 @@ The compile function deals with transforming the template DOM. Since most direct
|
|||
template transformation, it is not used often. Examples that require compile functions are
|
||||
directives that transform template DOM, such as {@link
|
||||
api/ng.directive:ngRepeat ngRepeat}, or load the contents
|
||||
asynchronously, such as {@link api/ng.directive:ngView ngView}. The
|
||||
asynchronously, such as {@link api/ngRoute.directive:ngView ngView}. The
|
||||
compile function takes the following arguments.
|
||||
|
||||
* `tElement` - template element - The element where the directive has been declared. It is
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
if (jQuery) addTag('script', {src: debug ? 'js/jquery.js' : 'js/jquery.min.js'});
|
||||
addTag('script', {src: path('angular.js')}, sync);
|
||||
addTag('script', {src: path('angular-resource.js') }, sync);
|
||||
addTag('script', {src: path('angular-route.js') }, sync);
|
||||
addTag('script', {src: path('angular-cookies.js') }, sync);
|
||||
addTag('script', {src: path('angular-sanitize.js') }, sync);
|
||||
addTag('script', {src: path('angular-mobile.js') }, sync);
|
||||
|
|
|
|||
|
|
@ -679,7 +679,7 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
|
|||
};
|
||||
|
||||
|
||||
angular.module('docsApp', ['ngResource', 'ngCookies', 'ngSanitize', 'bootstrap', 'bootstrapPrettify']).
|
||||
angular.module('docsApp', ['ngResource', 'ngRoute', 'ngCookies', 'ngSanitize', 'bootstrap', 'bootstrapPrettify']).
|
||||
config(function($locationProvider) {
|
||||
$locationProvider.html5Mode(true).hashPrefix('!');
|
||||
}).
|
||||
|
|
|
|||
|
|
@ -95,7 +95,6 @@ function publishExternalAPI(angular){
|
|||
ngSwitchWhen: ngSwitchWhenDirective,
|
||||
ngSwitchDefault: ngSwitchDefaultDirective,
|
||||
ngOptions: ngOptionsDirective,
|
||||
ngView: ngViewDirective,
|
||||
ngTransclude: ngTranscludeDirective,
|
||||
ngModel: ngModelDirective,
|
||||
ngList: ngListDirective,
|
||||
|
|
@ -122,8 +121,6 @@ function publishExternalAPI(angular){
|
|||
$location: $LocationProvider,
|
||||
$log: $LogProvider,
|
||||
$parse: $ParseProvider,
|
||||
$route: $RouteProvider,
|
||||
$routeParams: $RouteParamsProvider,
|
||||
$rootScope: $RootScopeProvider,
|
||||
$q: $QProvider,
|
||||
$sniffer: $SnifferProvider,
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
* | Directive | Supported Animations |
|
||||
* |========================================================== |====================================================|
|
||||
* | {@link ng.directive:ngRepeat#animations ngRepeat} | enter, leave and move |
|
||||
* | {@link ng.directive:ngView#animations ngView} | enter and leave |
|
||||
* | {@link ngRoute.directive:ngView#animations ngView} | enter and leave |
|
||||
* | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave |
|
||||
* | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave |
|
||||
* | {@link ng.directive:ngIf#animations ngIf} | enter and leave |
|
||||
|
|
@ -183,7 +183,7 @@ var $AnimatorProvider = function() {
|
|||
*/
|
||||
var AnimatorService = function(scope, attrs) {
|
||||
var animator = {};
|
||||
|
||||
|
||||
/**
|
||||
* @ngdoc function
|
||||
* @name ng.animator#enter
|
||||
|
|
@ -198,7 +198,7 @@ var $AnimatorProvider = function() {
|
|||
* @param {jQuery/jqLite element} after the sibling element (which is the previous element) of the element that will be the focus of the enter animation
|
||||
*/
|
||||
animator.enter = animateActionFactory('enter', insert, noop);
|
||||
|
||||
|
||||
/**
|
||||
* @ngdoc function
|
||||
* @name ng.animator#leave
|
||||
|
|
@ -212,7 +212,7 @@ var $AnimatorProvider = function() {
|
|||
* @param {jQuery/jqLite element} parent the parent element of the element that will be the focus of the leave animation
|
||||
*/
|
||||
animator.leave = animateActionFactory('leave', noop, remove);
|
||||
|
||||
|
||||
/**
|
||||
* @ngdoc function
|
||||
* @name ng.animator#move
|
||||
|
|
@ -228,7 +228,7 @@ var $AnimatorProvider = function() {
|
|||
* @param {jQuery/jqLite element} after the sibling element (which is the previous element) of the element that will be the focus of the move animation
|
||||
*/
|
||||
animator.move = animateActionFactory('move', move, noop);
|
||||
|
||||
|
||||
/**
|
||||
* @ngdoc function
|
||||
* @name ng.animator#show
|
||||
|
|
@ -241,7 +241,7 @@ var $AnimatorProvider = function() {
|
|||
* @param {jQuery/jqLite element} element the element that will be rendered visible or hidden
|
||||
*/
|
||||
animator.show = animateActionFactory('show', show, noop);
|
||||
|
||||
|
||||
/**
|
||||
* @ngdoc function
|
||||
* @name ng.animator#hide
|
||||
|
|
@ -262,14 +262,14 @@ var $AnimatorProvider = function() {
|
|||
* @description
|
||||
* Triggers a custom animation event to be executed on the given element
|
||||
*
|
||||
* @param {string} event the name of the custom event
|
||||
* @param {string} event the name of the custom event
|
||||
* @param {jQuery/jqLite element} element the element that will be animated
|
||||
*/
|
||||
animator.animate = function(event, element) {
|
||||
animateActionFactory(event, noop, noop)(element);
|
||||
}
|
||||
return animator;
|
||||
|
||||
|
||||
function animateActionFactory(type, beforeFn, afterFn) {
|
||||
return function(element, parent, after) {
|
||||
var ngAnimateValue = scope.$eval(attrs.ngAnimate);
|
||||
|
|
@ -329,10 +329,10 @@ var $AnimatorProvider = function() {
|
|||
polyfillStart(element, done, memento);
|
||||
} else if (isFunction($window.getComputedStyle)) {
|
||||
//one day all browsers will have these properties
|
||||
var w3cAnimationProp = 'animation';
|
||||
var w3cAnimationProp = 'animation';
|
||||
var w3cTransitionProp = 'transition';
|
||||
|
||||
//but some still use vendor-prefixed styles
|
||||
//but some still use vendor-prefixed styles
|
||||
var vendorAnimationProp = $sniffer.vendorPrefix + 'Animation';
|
||||
var vendorTransitionProp = $sniffer.vendorPrefix + 'Transition';
|
||||
|
||||
|
|
@ -340,7 +340,7 @@ var $AnimatorProvider = function() {
|
|||
delayKey = 'Delay',
|
||||
animationIterationCountKey = 'IterationCount',
|
||||
duration = 0;
|
||||
|
||||
|
||||
//we want all the styles defined before and after
|
||||
var ELEMENT_NODE = 1;
|
||||
forEach(element, function(element) {
|
||||
|
|
@ -387,15 +387,15 @@ var $AnimatorProvider = function() {
|
|||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function show(element) {
|
||||
element.css('display', '');
|
||||
}
|
||||
|
||||
|
||||
function hide(element) {
|
||||
element.css('display', 'none');
|
||||
}
|
||||
|
||||
|
||||
function insert(element, parent, after) {
|
||||
var afterNode = after && after[after.length - 1];
|
||||
var parentNode = parent && parent[0] || afterNode && afterNode.parentNode;
|
||||
|
|
@ -408,11 +408,11 @@ var $AnimatorProvider = function() {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function remove(element) {
|
||||
element.remove();
|
||||
}
|
||||
|
||||
|
||||
function move(element, parent, after) {
|
||||
// Do not remove element before insert. Removing will cause data associated with the
|
||||
// element to be dropped. Insert will implicitly do the remove.
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ function $CompileProvider($provide) {
|
|||
*/
|
||||
this.directive = function registerDirective(name, directiveFactory) {
|
||||
if (isString(name)) {
|
||||
assertArg(directiveFactory, 'directive');
|
||||
assertArg(directiveFactory, 'directiveFactory');
|
||||
if (!hasDirectives.hasOwnProperty(name)) {
|
||||
hasDirectives[name] = [];
|
||||
$provide.factory(name + Suffix, ['$injector', '$exceptionHandler',
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
* * Controller — The `ngController` directive specifies a Controller class; the class has
|
||||
* methods that typically express the business logic behind the application.
|
||||
*
|
||||
* Note that an alternative way to define controllers is via the {@link ng.$route $route} service.
|
||||
* Note that an alternative way to define controllers is via the {@link ngRoute.$route $route} service.
|
||||
*
|
||||
* @element ANY
|
||||
* @scope
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@
|
|||
* `http://example.com:8080/api`), you'll need to escape the colon character before the port
|
||||
* number, like this: `$resource('http://example.com\\:8080/api')`.
|
||||
*
|
||||
* If you are using a url with a suffix, just add the suffix, like this:
|
||||
* If you are using a url with a suffix, just add the suffix, like this:
|
||||
* `$resource('http://example.com/resource.json')` or `$resource('http://example.com/:id.json')
|
||||
* or even `$resource('http://example.com/resource/:resource_id.:format')`
|
||||
* or even `$resource('http://example.com/resource/:resource_id.:format')`
|
||||
* If the parameter before the suffix is empty, :resource_id in this case, then the `/.` will be
|
||||
* collapsed down to a single `.`. If you need this sequence to appear and not collapse then you
|
||||
* can escape it with `/\.`.
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
*
|
||||
* On success, the promise is resolved with the same resource instance or collection object,
|
||||
* updated with data from server. This makes it easy to use in
|
||||
* {@link ng.$routeProvider resolve section of $routeProvider.when()} to defer view rendering
|
||||
* {@link ngRoute.$routeProvider resolve section of $routeProvider.when()} to defer view rendering
|
||||
* until the resource(s) are loaded.
|
||||
*
|
||||
* On failure, the promise is resolved with the {@link ng.$http http response} object,
|
||||
|
|
@ -376,7 +376,7 @@ angular.module('ngResource', ['ng']).
|
|||
url = url.replace(/\/\.(?=\w+($|\?))/, '.');
|
||||
// replace escaped `/\.` with `/.`
|
||||
config.url = url.replace(/\/\\\./, '/.');
|
||||
|
||||
|
||||
|
||||
// set params - delegate param encoding to $http
|
||||
forEach(params, function(value, key){
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
'use strict';
|
||||
|
||||
ngRouteModule.directive('ngView', ngViewFactory);
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name ng.directive:ngView
|
||||
* @name ngRoute.directive:ngView
|
||||
* @restrict ECA
|
||||
*
|
||||
* @description
|
||||
* # Overview
|
||||
* `ngView` is a directive that complements the {@link ng.$route $route} service by
|
||||
* `ngView` is a directive that complements the {@link ngRoute.$route $route} service by
|
||||
* including the rendered template of the current route into the main layout (`index.html`) file.
|
||||
* Every time the current route changes, the included view changes with it according to the
|
||||
* configuration of the `$route` service.
|
||||
|
|
@ -21,7 +23,7 @@
|
|||
*
|
||||
* @scope
|
||||
* @example
|
||||
<example module="ngView" animations="true">
|
||||
<example module="ngViewExample" deps="angular-route.js" animations="true">
|
||||
<file name="index.html">
|
||||
<div ng-controller="MainCntl as main">
|
||||
Choose:
|
||||
|
|
@ -101,7 +103,7 @@
|
|||
</file>
|
||||
|
||||
<file name="script.js">
|
||||
angular.module('ngView', [], function($routeProvider, $locationProvider) {
|
||||
angular.module('ngViewExample', ['ngRoute'], function($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/Book/:bookId', {
|
||||
templateUrl: 'book.html',
|
||||
controller: BookCntl,
|
||||
|
|
@ -154,16 +156,14 @@
|
|||
|
||||
/**
|
||||
* @ngdoc event
|
||||
* @name ng.directive:ngView#$viewContentLoaded
|
||||
* @eventOf ng.directive:ngView
|
||||
* @name ngRoute.directive:ngView#$viewContentLoaded
|
||||
* @eventOf ngRoute.directive:ngView
|
||||
* @eventType emit on the current ngView scope
|
||||
* @description
|
||||
* Emitted every time the ngView content is reloaded.
|
||||
*/
|
||||
var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$compile',
|
||||
'$controller', '$animator',
|
||||
function($http, $templateCache, $route, $anchorScroll, $compile,
|
||||
$controller, $animator) {
|
||||
ngViewFactory.$inject = ['$route', '$anchorScroll', '$compile', '$controller', '$animator'];
|
||||
function ngViewFactory( $route, $anchorScroll, $compile, $controller, $animator) {
|
||||
return {
|
||||
restrict: 'ECA',
|
||||
terminal: true,
|
||||
|
|
@ -223,4 +223,4 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c
|
|||
}
|
||||
}
|
||||
};
|
||||
}];
|
||||
}
|
||||
|
|
@ -1,22 +1,32 @@
|
|||
'use strict';
|
||||
|
||||
/**
|
||||
* @ngdoc overview
|
||||
* @name ngRoute
|
||||
* @description
|
||||
*
|
||||
* Module that provides routing and deeplinking services and directives for angular apps.
|
||||
*/
|
||||
|
||||
var ngRouteModule = angular.module('ngRoute', ['ng']).
|
||||
provider('$route', $RouteProvider);
|
||||
|
||||
/**
|
||||
* @ngdoc object
|
||||
* @name ng.$routeProvider
|
||||
* @name ngRoute.$routeProvider
|
||||
* @function
|
||||
*
|
||||
* @description
|
||||
*
|
||||
* Used for configuring routes. See {@link ng.$route $route} for an example.
|
||||
* Used for configuring routes. See {@link ngRoute.$route $route} for an example.
|
||||
*/
|
||||
function $RouteProvider(){
|
||||
var routes = {};
|
||||
|
||||
/**
|
||||
* @ngdoc method
|
||||
* @name ng.$routeProvider#when
|
||||
* @methodOf ng.$routeProvider
|
||||
* @name ngRoute.$routeProvider#when
|
||||
* @methodOf ngRoute.$routeProvider
|
||||
*
|
||||
* @param {string} path Route path (matched against `$location.path`). If `$location.path`
|
||||
* contains redundant trailing slash or is missing one, the route will still match and the
|
||||
|
|
@ -47,7 +57,7 @@ function $RouteProvider(){
|
|||
* - `controllerAs` – `{string=}` – A controller alias name. If present the controller will be
|
||||
* published to scope under the `controllerAs` name.
|
||||
* - `template` – `{string=|function()=}` – html template as a string or function that returns
|
||||
* an html template as a string which should be used by {@link ng.directive:ngView ngView} or
|
||||
* an html template as a string which should be used by {@link ngRoute.directive:ngView ngView} or
|
||||
* {@link ng.directive:ngInclude ngInclude} directives.
|
||||
* This property takes precedence over `templateUrl`.
|
||||
*
|
||||
|
|
@ -57,7 +67,7 @@ function $RouteProvider(){
|
|||
* `$location.path()` by applying the current route
|
||||
*
|
||||
* - `templateUrl` – `{string=|function()=}` – path or function that returns a path to an html
|
||||
* template that should be used by {@link ng.directive:ngView ngView}.
|
||||
* template that should be used by {@link ngRoute.directive:ngView ngView}.
|
||||
*
|
||||
* If `templateUrl` is a function, it will be called with the following parameters:
|
||||
*
|
||||
|
|
@ -121,8 +131,8 @@ function $RouteProvider(){
|
|||
|
||||
/**
|
||||
* @ngdoc method
|
||||
* @name ng.$routeProvider#otherwise
|
||||
* @methodOf ng.$routeProvider
|
||||
* @name ngRoute.$routeProvider#otherwise
|
||||
* @methodOf ngRoute.$routeProvider
|
||||
*
|
||||
* @description
|
||||
* Sets route definition that will be used on route change when no other route definition
|
||||
|
|
@ -142,7 +152,7 @@ function $RouteProvider(){
|
|||
|
||||
/**
|
||||
* @ngdoc object
|
||||
* @name ng.$route
|
||||
* @name ngRoute.$route
|
||||
* @requires $location
|
||||
* @requires $routeParams
|
||||
*
|
||||
|
|
@ -163,10 +173,10 @@ function $RouteProvider(){
|
|||
* Is used for deep-linking URLs to controllers and views (HTML partials).
|
||||
* It watches `$location.url()` and tries to map the path to an existing route definition.
|
||||
*
|
||||
* You can define routes through {@link ng.$routeProvider $routeProvider}'s API.
|
||||
* You can define routes through {@link ngRoute.$routeProvider $routeProvider}'s API.
|
||||
*
|
||||
* The `$route` service is typically used in conjunction with {@link ng.directive:ngView ngView}
|
||||
* directive and the {@link ng.$routeParams $routeParams} service.
|
||||
* The `$route` service is typically used in conjunction with {@link ngRoute.directive:ngView ngView}
|
||||
* directive and the {@link ngRoute.$routeParams $routeParams} service.
|
||||
*
|
||||
* @example
|
||||
This example shows how changing the URL hash causes the `$route` to match a route against the
|
||||
|
|
@ -175,7 +185,7 @@ function $RouteProvider(){
|
|||
Note that this example is using {@link ng.directive:script inlined templates}
|
||||
to get it working on jsfiddle as well.
|
||||
|
||||
<example module="ngView">
|
||||
<example module="ngView" deps="angular-route.js">
|
||||
<file name="index.html">
|
||||
<div ng-controller="MainCntl">
|
||||
Choose:
|
||||
|
|
@ -208,7 +218,7 @@ function $RouteProvider(){
|
|||
</file>
|
||||
|
||||
<file name="script.js">
|
||||
angular.module('ngView', [], function($routeProvider, $locationProvider) {
|
||||
angular.module('ngView', ['ngRoute'], function($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/Book/:bookId', {
|
||||
templateUrl: 'book.html',
|
||||
controller: BookCntl,
|
||||
|
|
@ -267,8 +277,8 @@ function $RouteProvider(){
|
|||
|
||||
/**
|
||||
* @ngdoc event
|
||||
* @name ng.$route#$routeChangeStart
|
||||
* @eventOf ng.$route
|
||||
* @name ngRoute.$route#$routeChangeStart
|
||||
* @eventOf ngRoute.$route
|
||||
* @eventType broadcast on root scope
|
||||
* @description
|
||||
* Broadcasted before a route change. At this point the route services starts
|
||||
|
|
@ -283,12 +293,12 @@ function $RouteProvider(){
|
|||
|
||||
/**
|
||||
* @ngdoc event
|
||||
* @name ng.$route#$routeChangeSuccess
|
||||
* @eventOf ng.$route
|
||||
* @name ngRoute.$route#$routeChangeSuccess
|
||||
* @eventOf ngRoute.$route
|
||||
* @eventType broadcast on root scope
|
||||
* @description
|
||||
* Broadcasted after a route dependencies are resolved.
|
||||
* {@link ng.directive:ngView ngView} listens for the directive
|
||||
* {@link ngRoute.directive:ngView ngView} listens for the directive
|
||||
* to instantiate the controller and render the view.
|
||||
*
|
||||
* @param {Object} angularEvent Synthetic event object.
|
||||
|
|
@ -298,8 +308,8 @@ function $RouteProvider(){
|
|||
|
||||
/**
|
||||
* @ngdoc event
|
||||
* @name ng.$route#$routeChangeError
|
||||
* @eventOf ng.$route
|
||||
* @name ngRoute.$route#$routeChangeError
|
||||
* @eventOf ngRoute.$route
|
||||
* @eventType broadcast on root scope
|
||||
* @description
|
||||
* Broadcasted if any of the resolve promises are rejected.
|
||||
|
|
@ -311,8 +321,8 @@ function $RouteProvider(){
|
|||
|
||||
/**
|
||||
* @ngdoc event
|
||||
* @name ng.$route#$routeUpdate
|
||||
* @eventOf ng.$route
|
||||
* @name ngRoute.$route#$routeUpdate
|
||||
* @eventOf ngRoute.$route
|
||||
* @eventType broadcast on root scope
|
||||
* @description
|
||||
*
|
||||
|
|
@ -326,14 +336,14 @@ function $RouteProvider(){
|
|||
|
||||
/**
|
||||
* @ngdoc method
|
||||
* @name ng.$route#reload
|
||||
* @methodOf ng.$route
|
||||
* @name ngRoute.$route#reload
|
||||
* @methodOf ngRoute.$route
|
||||
*
|
||||
* @description
|
||||
* Causes `$route` service to reload the current route even if
|
||||
* {@link ng.$location $location} hasn't changed.
|
||||
*
|
||||
* As a result of that, {@link ng.directive:ngView ngView}
|
||||
* As a result of that, {@link ngRoute.directive:ngView ngView}
|
||||
* creates new scope, reinstantiates the controller.
|
||||
*/
|
||||
reload: function() {
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
'use strict';
|
||||
|
||||
ngRouteModule.provider('$routeParams', $RouteParamsProvider);
|
||||
|
||||
|
||||
/**
|
||||
* @ngdoc object
|
||||
* @name ng.$routeParams
|
||||
* @name ngRoute.$routeParams
|
||||
* @requires $route
|
||||
*
|
||||
* @description
|
||||
* Current set of route parameters. The route parameters are a combination of the
|
||||
* {@link ng.$location $location} `search()`, and `path()`. The `path` parameters
|
||||
* are extracted when the {@link ng.$route $route} path is matched.
|
||||
* are extracted when the {@link ngRoute.$route $route} path is matched.
|
||||
*
|
||||
* In case of parameter name collision, `path` params take precedence over `search` params.
|
||||
*
|
||||
|
|
@ -26,5 +29,5 @@
|
|||
* </pre>
|
||||
*/
|
||||
function $RouteParamsProvider() {
|
||||
this.$get = valueFn({});
|
||||
this.$get = function() { return {}; };
|
||||
}
|
||||
17
src/ngRoute/routeUtils.js
Normal file
17
src/ngRoute/routeUtils.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
'use strict';
|
||||
|
||||
var copy = angular.copy,
|
||||
equals = angular.equals,
|
||||
extend = angular.extend,
|
||||
forEach = angular.forEach,
|
||||
isDefined = angular.isDefined,
|
||||
isFunction = angular.isFunction,
|
||||
isString = angular.isString,
|
||||
jqLite = angular.element,
|
||||
noop = angular.noop,
|
||||
toJson = angular.toJson;
|
||||
|
||||
|
||||
function inherit(parent, extra) {
|
||||
return extend(new (extend(function() {}, {prototype:parent}))(), extra);
|
||||
}
|
||||
|
|
@ -190,3 +190,17 @@ jasmine.Matchers.prototype.toThrow = function(expected) {
|
|||
|
||||
return result;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Create jasmine.Spy on given method, but ignore calls without arguments
|
||||
* This is helpful when need to spy only setter methods and ignore getters
|
||||
*/
|
||||
function spyOnlyCallsWithArgs(obj, method) {
|
||||
var spy = spyOn(obj, method);
|
||||
obj[method] = function() {
|
||||
if (arguments.length) return spy.apply(this, arguments);
|
||||
return spy.originalValue.apply(this);
|
||||
};
|
||||
return spy;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,5 @@
|
|||
'use strict';
|
||||
|
||||
/**
|
||||
* Create jasmine.Spy on given method, but ignore calls without arguments
|
||||
* This is helpful when need to spy only setter methods and ignore getters
|
||||
*/
|
||||
function spyOnlyCallsWithArgs(obj, method) {
|
||||
var spy = spyOn(obj, method);
|
||||
obj[method] = function() {
|
||||
if (arguments.length) return spy.apply(this, arguments);
|
||||
return spy.originalValue.apply(this);
|
||||
};
|
||||
return spy;
|
||||
}
|
||||
|
||||
|
||||
describe('$location', function() {
|
||||
var url;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
describe('ngView', function() {
|
||||
var element;
|
||||
|
||||
beforeEach(module('ngRoute'));
|
||||
|
||||
beforeEach(module(function($provide) {
|
||||
$provide.value('$window', angular.mock.createMockWindow());
|
||||
return function($rootScope, $compile, $animator) {
|
||||
|
|
@ -473,7 +475,7 @@ describe('ngView', function() {
|
|||
expect(element.text()).toEqual('WORKS');
|
||||
|
||||
var div = element.find('div');
|
||||
expect(nodeName_(div.parent())).toEqual('NG:VIEW');
|
||||
expect(div.parent()[0].nodeName.toUpperCase()).toBeOneOf('NG:VIEW', 'VIEW');
|
||||
|
||||
expect(div.scope()).toBe($route.current.scope);
|
||||
expect(div.scope().hasOwnProperty('state')).toBe(true);
|
||||
|
|
@ -518,7 +520,7 @@ describe('ngView', function() {
|
|||
}
|
||||
|
||||
function applyCSS(element, cssProp, cssValue) {
|
||||
element.css(cssProp, cssValue);
|
||||
element.css(cssProp, cssValue);
|
||||
element.css(vendorPrefix + cssProp, cssValue);
|
||||
}
|
||||
|
||||
|
|
@ -544,7 +546,7 @@ describe('ngView', function() {
|
|||
}));
|
||||
|
||||
it('should fire off the enter animation + add and remove the css classes',
|
||||
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
|
||||
inject(function($compile, $rootScope, $sniffer, $location) {
|
||||
element = $compile(html('<div ng-view ng-animate="{enter: \'custom-enter\'}"></div>'))($rootScope);
|
||||
|
||||
$location.path('/foo');
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
'use strict';
|
||||
|
||||
describe('$routeParams', function() {
|
||||
|
||||
beforeEach(module('ngRoute'));
|
||||
|
||||
|
||||
it('should publish the params into a service', function() {
|
||||
module(function($routeProvider) {
|
||||
$routeProvider.when('/foo', {});
|
||||
|
|
@ -3,6 +3,8 @@
|
|||
describe('$route', function() {
|
||||
var $httpBackend;
|
||||
|
||||
beforeEach(module('ngRoute'));
|
||||
|
||||
beforeEach(module(function() {
|
||||
return function(_$httpBackend_) {
|
||||
$httpBackend = _$httpBackend_;
|
||||
|
|
@ -946,7 +948,7 @@ describe('$route', function() {
|
|||
var routeChangeSpy = jasmine.createSpy('route change');
|
||||
|
||||
module(function($routeProvider) {
|
||||
$routeProvider.when('/bar/:barId', {controller: noop, reloadOnSearch: false});
|
||||
$routeProvider.when('/bar/:barId', {controller: angular.noop, reloadOnSearch: false});
|
||||
});
|
||||
|
||||
inject(function($route, $location, $rootScope, $routeParams) {
|
||||
Loading…
Reference in a new issue