Angularjs Bootstrap to carry the foreground frame--Basic page _angularjs

1. Using Angularjs app seed to get a good frame after the initial need for us to fill some things manually, first open our app folder under the index.html, add some we need to use JS and CSS (of course, bootstrap), the code is as follows:

<script src= "Lib/angular/angular.min.js" ></script> 
<script src= "lib/jquery/" Jquery-1.10.2.min.js "></script> 
<script src=" Lib/bootstrap/bootstrap.min.js "></script> 
<script src= "js/app.js" ></script> 
<script src= "Js/services.js" ></script> 
<script src= "Js/controllers.js" ></script> 
<script src= "Js/filters.js" ></script> 
<script src= "Js/directives.js" ></script> 

Of course, remember that we are only introduced here, but also need to really add these JS and CSS just line, specific placement you can from the above introduction code to see, here is not mapped.

2. We first do a simple login registration page, the following is the index.html in the Body tag code:

<span style= "FONT-FAMILY:SIMSUN;FONT-SIZE:14PX;" ><div class= "wrap" > 
 <div class= "header > 
  <div class=" NavBar navbar-inverse navbar-swapper "> 
  <div class=" Navbar-inner "> 
   <div class=" container "> 
   <a class=" brand "href=" # "> jthink</a> 
   <ul class= "menu nav pull-right" > 
    <li><a href= "#/login" >login</a> </li> 
    <li><a href= "#/register" >register</a></li> 
   </ul> 
   </ div> 
  </div> 
  </div> 
  <div id= "content" class= "Content container" ng-view></ div> 
 </div> 
 </div> 
 
 <div class= "Footer" > 
 <div class= "Container" > 
  <p> 
  version1.0 
  </p> 
 </div> 
 </div></span> 

3. Do not forget that we need to modify the routing rules in App.js, the specific code is as follows:

' Use strict '; 
 
 
Declare app level module which depends on filters, and services 
angular.module (' Jthink ', [' jthink.filters ', ' Jthink . Services ', ' jthink.directives ']). 
 Config ([' $routeProvider ', function ($routeProvider) { 
 $routeProvider. When ('/login ', {templateurl: ' partials/ Login.html ', controller:myctrl2}); 
 $routeProvider. When ('/register ', {templateurl: ' partials/register.html ', controller:myctrl2}); 
 $routeProvider. Otherwise ({redirectto: '/login '}); 
 }]; 

4. After defining these rules, of course we must not be missing is login.html and register.html, the code is as follows:

Login.html

<div id= "Login" ng-controller= "login" > <form class= "form-horizontal" > <div class= "title Control-group" > <label class= "Control-label" for= "Inputemail" >Login</label> </div> <div class= "Control-gr" OUP "> <label class=" Control-label "for=" Inputemail ">Email</label> <div class=" Controls ">  ; input type= "text" id= "Inputemail" placeholder= "Email" ng-model= "Login.email" > </div> </div> <div class= "Control-group" > <label class= "Control-label" for= "Inputpassword" >Password</label> <div CLA 
  Ss= "Controls" > <input type= "password" id= "Inputpassword" placeholder= "password" ng-model= "Login.password" > </div> </div> <div class= "Control-group" > <div class= "Controls" > <label class= "Check Box "> <input type=" checkbox "> Remember me </label> <button type=" button "class=" Btn btn-succes S "ng-click=" Login.submit() ">sign in</button> </div> </div> </form> </div> 
 

Register.html

<div id= "Register" > <form class= "form-horizontal" > <div class= "title Control-group" > <label C lass= "Control-label" for= "Inputemail" >Register</label> </div> <div class= "Control-group" > < Label class= "Control-label" for= "Inputemail" >Email</label> <div class= "Controls" > <input type= "Tex" T "id=" Inputemail "class=" email "placeholder=" email "> </div> </div> <div class=" Control-group " 
  ; <label class= "Control-label" for= "Inputpassword" >Password</label> <div class= "Controls" > <inpu  T type= "password" id= "Inputpassword" class= "password" placeholder= "password" > </div> </div> <div class= "Control-group" > <label class= "Control-label" for= "Inputconfirmpassword" >confirmpassword</label > <div class= "Controls" > <input type= "password" id= "Inputconfirmpassword" placeholder= "Confirm password" > </div> &Lt;/div> <div class= "Control-group" > <div class= "Controls" > <button type= "button" class= "Btn btn- 
 Success ">Register</button> </div> </div> </form> </div>

The indispensable and CSS files, of course, this is relatively simple, because most of the work bootstrap has been done, in APP.CSS add the following layout code:

<span style= "FONT-FAMILY:SIMSUN;FONT-SIZE:14PX;" >/* app CSS stylesheet * 
/html,body { 
 height:100% 
} 
 
. Wrap { 
 min-height:100%; 
 Height:auto!important; 
 height:100%; 
 margin:0 auto-80px 
} 
 
. header { 
 height:100%; 
 min-height:100%; 
 Height:auto!important 
} 
 
. footer{ 
 background-color: #333; 
 Color:white; 
 height:80px 
} 
 
. Container. Credit { 
 margin:10px 0; 
} 
 
#login. Title label { 
 font-size:2em; 
 Font-weight:bold; 
} 
 
#register. Title label { 
 font-size:2em; 
 Font-weight:bold; 
} </span> 

Such a simple code would be able to lay out a decent front desk, albeit simple, but plausible:

Thanks to Bootstrap's credit, you need to start the Nodejs when you start it, by referring to the previous article

5. OK, this is almost achieved, quite simple, I try it, change the style ah what, bootstrap learning to go to the official website to learn it, quite easy, the next article should start to write our JS, is almost some controller and service.

Follow-up continue to add related articles, thank you for your support of this site!

Related articles:

                                 Angularjs Bootstrap carries the front frame--js Control Section
Angularjs Bootstrap with front frame--Basic page
Angularjs Bootstrap equipped with front frame--Preparation
Angularjs Bootstrap detailed and sample code