1. After using AngularJs app seed to initially install the framework, we need to manually fill in some things. First, open the index.html under our app folder and add some js and css we need to use (of course it is 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/filters.js"></script> <script src="js/filters.js"></script> <script src="js/filters.js"></script> src="js/directives.js"></script>
Of course, remember that we are just introducing it here, and we also need to really add these js and css. You can see the specific placement from the above introduction code, so there is no map here.
2. Let’s first make the simplest login registration page. The following is the code in the body tag in index.html:
<span style="font-family:SimSun;font-size:14px;"><div> <div> <div> <div> <div> <div> <a href="#">JThink</a> <ul> <li><a href="#/login">login</a></li> <li><a href="#/register">register</a></li> </ul> </div> </div> </div> </div> <div id="content" ng-view></div> </div> </div> </div> <div> <p> version1.0 </p> </div> </div> </div> </div> </div> <div> <p> version1.0 </p> </div> </div> </div> </div> </div> </div> </div> </div> <div> <p> version1.0 </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> <p> version1.0 </p> </div> </div> </span>
3. Don’t 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 cannot lack login.html and register.html. The code is as follows:
login.html
<div id="login" ng-controller="login"> <form> <div> <label for="inputEmail">Login</label> </div> <div> <label for="inputEmail">Email</label> <div> <input type="text" id="inputEmail" placeholder="Email" ng-model="login.email"> </div> </div> <div> <label for="inputPassword">Password</label> <div> <input type="password" id="inputPassword" placeholder="Password" ng-model="login.password"> </div> </div> <div> <div> <label> <input type="checkbox"> Remember me </label> <button type="button" ng-click="login.submit()">Sign in</button> </div> </div> </form> </div>
register.html
<div id="register"> <form> <div> <label for="inputEmail">Register</label> </div> <div> <label for="inputEmail">Email</label> <div> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div> <label for="inputPassword">Password</label> <div> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div> <label for="inputPassword">Password</label> <div> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div> <label for="inputConfirmPassword">ConfirmPassword</label> <div> <input type="password" id="inputConfirmPassword" placeholder="Confirm Password"> </div> </div> <div> <div> <button type="button">Register</button> </div> </form> </div>
The indispensable one is also the css file. Of course, this is relatively simple, because most of the work bootstrap has been completed, add the following layout code to the app.css:
<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 simple code can create a relatively decent front desk. Although it is a bit simple, it is still reasonable:
This is all thanks to bootstrap. Nodejs is required to start when starting. For the specific method, please refer to the previous article.
5. Okay, this is almost implemented. It’s quite simple. Try it yourself. Change the style and other things. Learning bootstrap is easy to learn from the official website. It’s quite easy. It’s time to start writing our js in the next article. It’s almost controllers and services.
We will continue to add relevant articles in the future. Thank you for your support for this site!
Related articles:
AngularJs bootstrap is equipped with the front-end framework - js control part
AngularJs bootstrap is equipped with front-end framework - basic page
AngularJs bootstrap equipped with front-end framework - preparation work
AngularJs bootstrap detailed explanation and sample code