First of all, to use more than 1.2 angular ... For this reason wasted two days and a half of my time ...
Reference module: Angular-route
Load Require.js First
Index.html
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>{' TODO supply a title '}}</title>5 <MetaCharSet= "UTF-8">6 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1">7 <Linkhref= "/assets/css/bootstrap.min.css"rel= "stylesheet">8 <Linkhref= "/assets/css/apply.css"rel= "stylesheet">9 </Head>Ten <Body> One <Header> A <Divclass= "Container"> - <imgsrc= "/images/logo.png"></Div> - </Header> the <MainNg-view></Main> - <Footer> - <Divclass= "Container"></Div> - </Footer> + <Scripttype= "Text/javascript"src= "/assets/js/require.js"Data-main= "/assets/app/main.js"></Script> - </Body> + </HTML>
Main.js
1 Require.config ({2 //Configure the path to the angular3BASEURL: "/assets",4 paths: {5"Angular": "Js/angular/angular",6"Angular-route": "Js/angular/angular-route",7"Angular-resource": "Js/angular/angular-resource"8 9 Ten One }, A //This configuration is the package name when you introduce dependencies. - Shim: { -"jquery": { theExports: "JQuery" - }, -"Angular": { -Exports: "Angular" + }, -"Angular-route": { +Deps: [' angular '], AExports: "Angular-route" at }, -"Angular-resource": { -Deps: [' angular '], -Exports: "Angular" - } - } in }); - varApp = ' app.js ';//your app's module todefine ([' Angular ', app, ' Angular-route '),function(angular, app, config) { +Angular.bootstrap (document, [' app ']);//Key -});
Note that angular.bootstrap (document,[' app ') must be rendered manually because it becomes an asynchronous load angular.
In the second parameter write your module name, here I called the app (defined in app.js)
App.js (key point, I personally modified, mainly using the $routeprovider.when method parameter resolve plus $Q service return deferred object implementation)
1 define ([2' Angular ',3' App/route/apply ',//Route file4 //' S/md5 ',5' Angular-route ',6' Angular-resource '7],function(angular, config) {8 varApp =Angular9. Module (' app ', [' Ngroute ', ' Ngresource '])Ten. config (function($routeProvider, $controllerProvider) { One varRouter =function(config) { A returnAngular.extend ({ - Resolve: { -Delayfunction($q, $rootScope) { the vardefer =$q. Defer (); -Require (Config.require,function(s) { - $controllerProvider. Register (Config.controller, s); - defer.resolve (); + $rootScope. $apply (); - }) + returndefer.promise; A } at } - }, config); - }; - //the following loops should be changed to the appropriate path for your project yourself. - for(varIinchconfig) { - $routeProvider. When (i, router ({ inTemplateurl: ' html/' + config[i].html + '. html ',//Loaded template file address (same as normal $routeprovider) - Controller:i, toRequire: [' c/' + Config[i].controller]//The controller file that is loaded, corresponding to the first parameter in the Require () function + })); - } the $routeProvider. Otherwise ({ *Redirectto: '/login ' $ });Panax Notoginseng }) - the returnapp; +});
Next is the routing configuration file that you need to use above
Route.js
1define ([],function() {2 return {3"/": {4HTML: "Apply/step1",5Controller: "Apply"6 },7"/step2": {8HTML: "Apply/step2",9Controller: "Apply"Ten } One }; A});
and finally the Controller (note that the naming is consistent with your controller)
Apply.js
1define ([' angular '),function(angular) {2' User Strict ';3 return[' $log ', ' $http ', ' $scope ', ' $resource ',4 function($log, $http, $scope, $resource) {5 $http6. Get ('/data/option/apply ')7. Success (function(data) {8 //console.log (data)9 angular.extend ($scope, data);Ten$scope. data = data.default; One }); A //Register -$scope. Save =function() { - varUser = $resource ('/users '); theUser.save ($scope. Data,function(RS) { - - }); - } + } - ]; +});
It's not too much to write, so it's not good, forgive me.
In addition, because it is manual loading of the angular module and the asynchronous load controller, there is no need to write Ng-app and Ng-controller,controller names automatically on the HTML tag (that is, your routing rule string)
Modular development of ANGULARJS with Requirejs