рдкрд░рд┐рдпреЛрдЬрдирд╛ рдХреЗ рд╡рд┐рдХрд╛рд╕ рдХреЗ рджреМрд░рд╛рди, рд╣рдо AngularJs рд╕реЗ рдкреНрдпрд╛рд░ рдХрд░рддреЗ рдереЗред рд▓реЗрдХрд┐рди рд╕реНрд╡рдЪреНрдЫ рдкреНрд░рддрд┐рд░реВрдкрдХрддрд╛ рдХреА рд▓рдбрд╝рд╛рдИ рдореЗрдВ рд╣рдореЗрдВ рдХреБрдЫ рдХрдард┐рдирд╛рдЗрдпреЛрдВ рдХрд╛ рднреА рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝рд╛, рдЬрд┐рд╕реЗ рдПрдВрдЧреБрд▓рд░рдЬ рдиреЗ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдХрд┐рдпрд╛, рд▓реЗрдХрд┐рди рдХрднреА-рдХрднреА рдЗрд╕рдореЗрдВ рдХреБрдЫ рдХрдореА рд╣реЛрддреА рд╣реИред рд░рд┐рдХреНрдЬреЗрд╕реНрдЯреНрд╕ рдЙрдкрдпреЛрдЧреА рд╣реИ рдЬрд╣рд╛рдБ рд╡рд╛рдВрдЫрд┐рдд рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рдПрдВрдЧреБрд▓рд░рдЬ рдмрд╣реБрдд рдЫреЛрдбрд╝рддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдЙрдиреНрд╣реЗрдВ рдПрдХ рд╕рд╛рде рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рддреБрдЪреНрдЫ рдХрд╛рд░реНрдп рдирд╣реАрдВ рд╣реИред
рдЗрд╕рд▓рд┐рдП, рд╣рдо рд╕рдорд╕реНрдпрд╛ рдХреЗ рд╕рдорд╛рдзрд╛рди рдкрд░ рдЕрдкрдиреЗ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХрд╛ рд╡рд░реНрдгрди рдХрд░рддреЗ рд╣реИрдВред
рдХрд┐рд╕ рд▓рд┐рдП?
AngularJs рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддреЗ рд╕рдордп, рдЖрдк рдХреЛрдб рдХреЗ рдЙрдЪрд┐рдд рд╕рдВрдЧрдарди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪрдирд╛ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рддреЗ рд╣реИрдВред рдмреЗрд╢рдХ, рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдЙрддреНрдХреГрд╖реНрдЯ рдЙрджрд╛рд╣рд░рдг рд╣реИрдВред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдЖрдк рдмреНрд░рд╛рдпрди рдлреЛрд░реНрдб рдХреЗ рд╕реИрджреНрдзрд╛рдВрддрд┐рдХ рдкрдж рдпрд╛ рдХреНрд▓рд┐рдл рдореЗрдпрд░реНрд╕ рдХреЗ рд╡реНрдпрд╛рд╡рд╣рд╛рд░рд┐рдХ рдорд╛рд░реНрдЧрджрд░реНрд╢рди рдХрд╛ рдЕрдзреНрдпрдпрди рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдореИрдВ рдЖрд╡рд╢реНрдпрдХрддрд╛рдПрдБ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ AngularJs рдЕрдиреБрдкреНрд░рдпреЛрдЧреЛрдВ рдореЗрдВ рдХреЛрдб рдХреЛ рд╡реНрдпрд╡рд╕реНрдерд┐рдд рдХрд░рдиреЗ рдХрд╛ рдПрдХ рддрд░реАрдХрд╛ рд╕рд╛рдЭрд╛ рдХрд░реВрдБрдЧрд╛ред
рдпрджрд┐ рдЖрдк рдЪрд╛рд╣рддреЗ рд╣реИрдВ рддреЛ рдпрд╣ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдЙрдкрдпреЛрдЧреА рд╣реЛрдЧрд╛:
- рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХреЛ рд╕рд╣реА рдХреНрд░рдо рдореЗрдВ рдЬреЛрдбрд╝рдиреЗ рдХреА рдЪрд┐рдВрддрд╛ рдХрд░рдирд╛ рдмрдВрдж рдХрд░реЗрдВ
- рд▓реЛрдб рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХреЛрдб рдЕрддреБрд▓реНрдпрдХрд╛рд▓рд┐рдХ;
- рдПрдХ minified JS рдлрд╛рдЗрд▓ рдореЗрдВ рдХреЛрдб рд╕рдВрдХрд▓рд┐рдд рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛;
рдХрд┐рд╕рдХреЗ рд▓рд┐рдП?
рдпрд╣ рдорд╛рдирд╛ рдЬрд╛рддрд╛ рд╣реИ рдХрд┐ рдЖрдк рдкрд╣рд▓реЗ рд╕реЗ рд╣реА AngularJs рдХреА рдореВрд▓ рдмрд╛рддреЗрдВ рдЬрд╛рдирддреЗ рд╣реИрдВ, рдФрд░ рдХрдо рд╕реЗ рдХрдо рдПрдПрдордбреА рджреГрд╖реНрдЯрд┐рдХреЛрдг рдФрд░ рдЖрд╡рд╢реНрдпрдХрддрд╛рдПрдБ рдкреБрд╕реНрддрдХрд╛рд▓рдп рд╕реЗ рдкрд░рд┐рдЪрд┐рдд рд╣реИрдВред рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреЛ рд╕реНрдкрд╖реНрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдореИрдВ рдкрд╣рд▓реЗ рдХреЛрдгреАрдп рдмреАрдЬ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХрддрд╛рдПрдБ рд╢рд╛рдорд┐рд▓ рдХрд░реВрдВрдЧрд╛ рдФрд░ рдХрд┐рдП рдЧрдП рдкрд░рд┐рд╡рд░реНрддрдиреЛрдВ рдХрд╛ рд╡рд░реНрдгрди рдХрд░реВрдВрдЧрд╛ред рдХреЛрдгреАрдп рдмреАрдЬ рдХреЛрдб рдХреЛ рдЙрджреНрджреЗрд╢реНрдп рд╕реЗ рдлрд╛рдЗрд▓реЛрдВ рдХреЛ рдЕрд▓рдЧ рдХрд░рдХреЗ рд╕рдВрд░рдЪрдирд╛ рдХрд░рддрд╛ рд╣реИред рдореИрдВ рднреА рдРрд╕рд╛ рд╣реА рдХрд░реВрдВрдЧрд╛ред
рдХреИрд╕реЗ?
рдХреЛрдгреАрдп рдмреАрдЬ рдкрд░рд┐рдпреЛрдЬрдирд╛
рдЪрд▓реЛ рдХреЛрдгреАрдп рдмреАрдЬ рдореЗрдВ рдХреЛрдб рд╕рдВрд░рдЪрдирд╛ рд╕реЗ рдкрд░рд┐рдЪрд┐рдд рд╣реЛ рдЬрд╛рддреЗ рд╣реИрдВред рдЧрд┐рдЯрд╣рдм рдЙрджрд╛рд╣рд░рдг рдХреЛрдб рдкрд░ рдПрдХ рдирдЬрд╝рд░ рдбрд╛рд▓реЗрдВ:
-
app.js
рдХреЛ рд▓реЛрдб рдХрд░рдиреЗ рдФрд░ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЛ рдЖрд░рдВрдн рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред - рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдлрд╛рдЗрд▓реЗрдВ рдЦреБрдж рдирд┐рдпрдВрддреНрд░рдХ, рдирд┐рд░реНрджреЗрд╢, рдлрд┐рд▓реНрдЯрд░, рд╕реЗрд╡рд╛рдПрдВ рд╣реИрдВред
-
index.html
рд╡рд╛рдВрдЫрд┐рдд рдХреНрд░рдо рдореЗрдВ рд╕рдВрд▓рдЧреНрди JS рдлрд╛рдЗрд▓реЛрдВ рдХреЗ рд╕рд╛рдеред - рдпрд╛
index-async.html
, рдЬреЛ рд╕рдордХрд╛рд▓рд┐рдХрддрд╛ рдкрд░ рдирд┐рд░реНрднрд░рддрд╛ рдХреЛ рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреЛрдгреАрдп-рд▓реЛрдбрд░.рдЬреЗрдПрд╕ рдпрд╛ рддреГрддреАрдп-рдкрдХреНрд╖ рд▓реЛрдбрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИред
рдЕрдЪреНрдЫрд╛, рдЪрд▓рд┐рдП рд╢реБрд░реВ рдХрд░рддреЗ рд╣реИрдВред
рдЖрд╡рд╢реНрдпрдХрддрд╛ рдЬреЛрдбрд╝реЗрдВ
рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдореЗрдВ рдпрд╛ рдЬреАрдердм рдкрд░ рдЙрджрд╛рд╣рд░рдг рджреЗрдЦреЗрдВред
рдирд┐рд░реНрднрд░рддрд╛ рд╕реНрдерд╛рдкрдирд╛
рдЗрд╕рдХреЗ рд▓рд┐рдП рдореИрдВрдиреЗ рдмреЛрд╡рд░ рдХрд╛ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд┐рдпрд╛ред
bower.json
рдХреЛрдб:
{ "name": "AngularJS + RequireJS Example", "version": "0.1", "main": "index.html", "ignore": [ "**/.*", "libs" ], "dependencies": { "angular": "latest", "requirejs": "latest", "requirejs-domready": "latest" } }
.bowerrc
рдмрдЧрд▓ рдореЗрдВ
.bowerrc
рдлрд╝рд╛рдЗрд▓
bower.json
рдФрд░
bower install
ред рдЕрдм рд╕рднреА рдЖрд╡рд╢реНрдпрдХ рдирд┐рд░реНрднрд░рддрд╛рдПрдБ
libs
рдирд┐рд░реНрджреЗрд╢рд┐рдХрд╛ рдореЗрдВ рд╣реИрдВред
index.html
рд╡рд┐рдирд╛рд╢ рдПрдХ рдЕрдЪреНрдЫреА рд╢реБрд░реБрдЖрдд рд╣реЛрдЧреА!
index.html
рдЦреЛрд▓реЗрдВ рдФрд░ рд╕рднреА рдЯреИрдЧ рд╣рдЯрд╛ рджреЗрдВ
. , ?
. , ?
. , ?
, рдЬреЛ рдЖрд╡рд╢реНрдпрдХрддрд╛ рдХреЗ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХреЛ рд▓реЛрдб рдХрд░реЗрдЧрд╛, рдФрд░ рдЗрд╕реЗ
js/main.js
рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХреЗ рд▓рд┐рдП рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдирд┐рд░реНрджреЗрд╢
js/main.js
рдЯреИрдЧ рдХреЗ
data-main
рд╡рд┐рд╢реЗрд╖рддрд╛ рдореЗрдВ рдирд┐рд░реНрджрд┐рд╖реНрдЯ
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , . :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , . :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , . :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , . :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .-
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
.index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). ,bootstrap.js
.
bootstrap.js
AngularJs,bootstrap.js
( ,ng-app
HTML ).routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . ,app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
,./module.js
.
:
. AngularJs RequireJs. , .
-
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
.index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). ,bootstrap.js
.
bootstrap.js
AngularJs,bootstrap.js
( ,ng-app
HTML ).routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . ,app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
,./module.js
.
:
. AngularJs RequireJs. , .
-
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
.index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). ,bootstrap.js
.
bootstrap.js
AngularJs,bootstrap.js
( ,ng-app
HTML ).routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . ,app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
,./module.js
.
:
. AngularJs RequireJs. , .
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , . :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , . :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , . :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .
:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS AngularJS + RequireJS App</title> <link rel="stylesheet" href="css/app.css"> </head> <body> <ul class="menu"> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <div data-ng-view></div> <div>Angular Require seed app: v<span app-version></span></div> <script src="lib/requirejs/require.js" data-main="js/main.js"></script> </body> </html>
. index.html
, .
main.js
RequireJS.
require.config({ // paths: { 'domReady': '../lib/requirejs-domready/domReady', 'angular': '../lib/angular/angular' }, // angular AMD , angular shim: { 'angular': { exports: 'angular' } }, // deps: ['./bootstrap'] });
?
paths
. AngularJs ( shim ). , bootstrap.js
.
bootstrap.js
AngularJs, bootstrap.js
( , ng-app
HTML ). routes.js
, , .
, ,
angular->app->routes
: AngularJs (app) (routes).
/** * bootstraps angular onto the window.document node */ define([ 'require', 'angular', 'app', 'routes' ], function (require, ng) { 'use strict'; require(['domReady!'], function (document) { ng.bootstrap(document, ['app']); }); });
domReady
, , DOM . , app.js
, .
app.js
app.js
.
define([ 'angular', './controllers/index', './directives/index', './filters/index', './services/index' ], function (ng) { 'use strict'; return ng.module('app', [ 'app.services', 'app.controllers', 'app.filters', 'app.directives' ]); });
: (controllers), (directives), (filters), (services). , .
routes.js
(routes) . ( ).
define(['./app'], function (app) { 'use strict'; return app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view1', { templateUrl: 'partials/partial1.html', controller: 'MyCtrl1' }); $routeProvider.when('/view2', { templateUrl: 'partials/partial2.html', controller: 'MyCtrl2' }); $routeProvider.otherwise({ redirectTo: '/view1' }); }]); });
:
app.controllers
.
controllers/module.js
define(['angular'], function (ng) { 'use strict'; return ng.module('app.controllers', []); });
(. )
controllers/index.js
define, . module.js ( ). . RequireJs .
define([ './my-ctrl-1', './my-ctrl-2' ], function () {});
controllers/my-ctrl-1.js
app.controllers
. :
define(['./module'], function (controllers) { 'use strict'; controllers.controller('MyCtrl1', [function ($scope) {}]); });
, ./module.js
.
:
. AngularJs RequireJs. , .