Previous projects have implemented such a set of front-end frameworks, but the angular version is still 1.0.X, and the bootstrap is 2.0. When the project time is tight, and the research is not deep enough, the understanding of angular is not thorough, although the function is realized, but there are some bugs, many places can be optimized. So the project is ready to upgrade to angular1.3.x, BOOTSTRAP3.
The following is a simple framework for research demo,angularjs1.3.15,bootstrap3,requirejs2.1.16, ngroute1.3.15. The Simulation dialog box uses the Ngdialog to implement the dynamic template and controller files, which are described below.
File structure Reference online a variety of great God's suggestions, the various pages and the corresponding controller placed in the same file directory, this is really convenient to find, do not have to turn to the Controller's folder to find the corresponding controller of the page, the structure is as follows:
[Img]data/attachment/album/201506/04/164151hpimplpsw41gpp4a.gif[/img]
First of all, we say that bootstrap3,bootstrap3 and bootsrtap2 compared to different places are quite many, but for our project, upgrade, the biggest change is the layout of the page this aspect, BOOTSTRAP2 span* In the BOOTSTRAP3 has ceased to exist, has become the col-**-*, this benefit is many, the movement first. The trouble is that we programmers, hard to change the code bar.
other not to say, official web surface have detailed instructions, send Chinese network address : http://www.bootcss.com/
1<! DOCTYPE html>23 45<meta charset= "Utf-8" >6<title>fish. Ui.index</title>7<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no" >8<link rel= "stylesheet" href= ". /.. /resources/css/bootstrap.css "/>9<link rel= "stylesheet" href= ". /.. /resources/css/ngdialog.min.css "/>Ten<link rel= "stylesheet" href= ". /.. /resources/css/ngdialog-theme-default.min.css "/> One<link rel= "stylesheet" href= ". /.. /resources/css/style.css "/> A - -<body ng-controller= ' Mainctrl ' > the<div class= "Container main" > -<div class= "Row" > -<div class= "Col-md-2 main_content" > -<mymenu></mymenu> +</div> -<div class= "col-md-10 page_main" ng-view> +</div> A</div> at</div> -<script src= ". /.. /resources/plugin/require/require.js "Defer async=" true "data-main=": /.. /resources/main "></script> -</body> - -Requirejs usage This side does not do too much explanation, the online explanation is many, does not have the extra expansion operation, attaches the configuration information:
1(function() {2 Require.config ({3BASEURL: '. /.. /resources/',4 paths: {5jquery: ' Js/jquery.min ',6Bootstrap: ' Plugin/bootstrap/js/bootstrap.min ',7Angular: ' Plugin/angular/js/angular.min ',8Ngroute: ' Plugin/angular/js/angular-route ',9Routeconfig: ' Plugin/utils/route-config ',TenNgdialog: ' Plugin/angular/js/ngdialog.min ', One //text: ' Plugin/require/text ',//for require loading html,css and other non-JS files AApp: ' App ', -Directives: ' Js/directive ', -Services: ' Js/service ', theRoute: ' Routes ', -Mainctrl: '. /items/index/indexctrl ' - }, - Shim: { + Bootstrap: { -Deps: [' jquery '], +Exports: ' Bootstrap ' A }, at Angular: { -Deps: [' jquery '], -Exports: ' Angular ' - }, - Ngdialog: { -Deps: [' angular '] in }, - Ngroute: { toDeps: [' angular '] + }, - routeconfig: { theDeps: [' angular '] * }, $ app: {Panax NotoginsengDeps: [' Ngroute '] - }, the directives: { +Deps: [' angular '] A }, the Services: { +Deps: [' app '] - }, $ Route: { $Deps: [' app '] - }, - Mainctrl: { theDeps: [' angular '] - }Wuyi }, theUrlargs: ' v= ' + (NewDate ()). GetTime () - }); Wurequire ([' angular ', ' Bootstrap ', ' app ', ' Ngroute ', ' ngdialog ', ' routeconfig ', ' directives ', ' services ', ' Route ', ' Mainctrl '],function(angular) { -Angular.bootstrap (document, [' MyApp ']); About }); $})( This);Initializes the ANGULARJS and binds the document module to this side.
1 angular.bootstrap (document, [' MyApp ']);Here are the introduction of a few of the documents described below, there will be a specific introduction.
Ngroute:angularjs routing module, angularjs from the beginning of the 1.2.X to separate the routing module, so this side need to quote;
Routeconfig: This module is to implement dynamically loading template and controller files according to the current route, the larger the project, the more files, is definitely to implement on-demand loading. So this step is sure to do.
Services: A service that encapsulates a simulation dialog box so that dialog can be called repeatedly on different pages. There will be an introduction later.The App.js code is as follows:
1define ([' angular ', ' routeconfig '),function(angular, routeconfig) {2 varApp = Angular.module (' MyApp ', [' Ngroute ', ' Ngdialog '),3 function($compileProvider, $controllerProvider) {4 Routeconfig.setcompileprovider ($compileProvider);5 Routeconfig.setcontrollerprovider ($controllerProvider);6 }7 ]);8 returnapp;9})The angular module is defined in the app and some modules are loaded.
The next article describes the route on-demand load controller:"Instance decomposition one" angular+require+ngroute+bootstrap
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
