Quickly build a Web environment Angularjs + EXPRESS3 + Bootstrap3

Quickly build a Web environment Angularjs + EXPRESS3 + Bootstrap3

The ANGULARJS experiential Programming series will show you how to build a powerful web front-end system with ANGULARJS. Angularjs is a very good web front-end framework developed by the Google team. Under so many web frameworks, Angularjs can stand out from architecture design on superior, bidirectional data binding, dependency injection, directives, MVC, templates. Angular.js innovative back-office technology into the front-end development, swept away jquery once the light. Using Angularjs is like writing background code, more standardized, more structured, and more controllable.

About the author

• Zhang Dan (Conan), programmer Java,r,php,javascript
• Weibo: @Conan_Z
• Blog:http://blog.fens.me
• Email: [Email protected]

Reprint please specify the source:
http://blog.fens.me/angularjs-express3-bootstrap3/

Objective

Angularjs more handy, not only the code volume is much less than jquery, and the realization of the idea is particularly clear, the construction of large-scale web front-end projects, is really the most suitable.

Bootstrap make the interface beautiful and generous, even like I do not know the UE person, can also make professional level. Combined with Nodejs Express to do the back end, three swords merged, too invincible, there is a unified front-end development trend, the future immeasurable!

Directory

1. Create a EXPRESS3 project manually from scratch
2. New Angularjs directory and file
3. Configure Bower
4. Configuring the ANGULARJS Project
5. Increase Bootstrap
6. The Complete project

1. Create a EXPRESS3 project manually from scratch

System environment:

• Win7 64bit Flagship edition
• Node v0.10.5
• NPM 1.2.19
• Bower 1.1.2

The development tools used in this article are webstorm, please refer to the article: Angularjs Ideal development tool Webstorm

Create an Express project

~ D:\workspace\javascript>express -e angular-basic~ D:\workspace\javascript>cd angular-basic && npm install

The generated Express project directory

Modify the configuration of the App.js

• Modify Ejs: File name extension Ejs to HTML
• Set angular: Start path to "/"
• Set Angular: Startup file is app/index.html

~ vi app.jsvar express = require(‘express‘)    , path = require(‘path‘)    , ejs = require(‘ejs‘)    , app = express()    , server = require(‘http‘).createServer(app);app.set(‘port‘, process.env.PORT || 3000);app.set(‘views‘, __dirname + ‘/views‘);app.engine(‘.html‘, ejs.__express);app.set(‘view engine‘, ‘html‘); //替换文件扩展名ejs为htmlapp.use(express.favicon());app.use(express.logger(‘dev‘));app.use(express.bodyParser());app.use(express.methodOverride());app.use(app.router);app.use(express.static(path.join(__dirname, ‘app‘)));if (app.get(‘env‘) === ‘development‘) {    app.use(express.errorHandler());}// angular启动页app.get(‘/‘, function (req, res) {    res.sendfile(‘app/index.html‘);});server.listen(app.get(‘port‘), function () {    console.log(‘Express server listening on port ‘ + app.get(‘port‘));});

How to create a EXPRESS3 project separately, please refer to the article: NODEJS Development Framework Express3.0 Development notes – from scratch

2. New Angularjs directory and file

Create directories and files required by Angularjs

D:\workspace\javascript\angular-basic>mkdir appD:\workspace\javascript\angular-basic>mkdir app\scriptsD:\workspace\javascript\angular-basic>mkdir app\scripts\angularD:\workspace\javascript\angular-basic>mkdir app\stylesD:\workspace\javascript\angular-basic>mkdir app\viewsD:\workspace\javascript\angular-basic>mkdir app\views\componentD:\workspace\javascript\angular-basic>mkdir app\views\tplD:\workspace\javascript\angular-basic>touch app\index.htmlD:\workspace\javascript\angular-basic>touch app\scripts\angular\app.jsD:\workspace\javascript\angular-basic>touch app\scripts\angular\controllers.jsD:\workspace\javascript\angular-basic>touch app\styles\main.cssD:\workspace\javascript\angular-basic>touch app\views\tpl\welcome.htmlD:\workspace\javascript\angular-basic>echo "aaaa" > app\index.html

Angularjs directories and files created

Directory Explanation:

• App directory: The root directory of the angular project
• Scripts directory: storing JavaScript script directories
• Scripts\angular directory: Storing angular JavaScript script directory
• Styles directory: The directory where CSS is stored
• Views Directory: The directory where HTML is stored
• Views\component directory: A custom component catalog that stores HTML
• VIEWS\TPL directory: The directory where HTML is stored

File Explanation:

• Entry file for App\index.html:angular project
• CSS file for Styles\main.css:angular project
• Scripts\angular\app.js:angular Project Global configuration file
• Scripts\angular\controllers.js:angular Project Global controller file/li>
• Views\tpl\welcome.html: Welcome page

Delete unwanted file directories

D:\workspace\javascript\angular-basic>rm -rf publicD:\workspace\javascript\angular-basic>rm -rf routes

Start the node server and check the configuration of the portal page

D:\workspace\javascript\angular-basic>node app.jsExpress server listening on port 3000GET / 200 11ms - 9b

The interface displays "AAAA", indicating that node starts Express, which has been directed to the App\index.html page.

3. Configure Bower

Next, I'm going to install Angularjs and bootstrap, as well as other dependent front-end libraries through bower. For detailed use of Bower, please refer to the article: Bower to solve JS dependency management

New file:

• . Bowerrc:bower environment settings for specifying the location of the dependent libraries of the Bower
• Bower.json:bower's dependency management

New file:. BOWERRC

~ vi .bowerrc{    "directory": "app/bower_components"}

New file: Bower.json

~ vi bower.json{    "name": "angular-basic",    "version": "0.0.1",    "dependencies": {        "angular": "~1.2.12-build.2226",        "angular-route": "~1.2.12-build.2226"    },    "devDependencies": {    }}

Run bower, download angular dependent libraries

D:\workspace\javascript\angular-basic>bower installbower angular-route#~1.2.12-build.2226 Cached Git://github . com/angular/bower-angular-route.git#1.2.13-build.2242bower angular-route#~1.2.12-build.2226 Validate 1.2.13-buil d.2242 against Git://github.com/angular/bower-angular-route.git#~1.2.12-build.2226bower angular#~1.2.12- build.2226 cached Git://github.com/angular/bower-angular.git#1.2.13-build.2242bower Angular#~1.2.12-build. 2226 Validate 1.2.13-build.2242 against Git://github.com/angular/bower-angular.git#~1.2.12-build.2226bower a ngular#1.2.13-build.2242+sha.e645f7c Cached Git://github.com/angular/bower-angular.git#1.2.13-build.2242bower angular#1.2.13-build.2242+sha.e645f7c Validate 1.2.13-build.2242 against git://github.com/angular/ Bower-angular.git#1.2.13-build.2242+sha.e645f7cbower angular-route#~1.2.12-build.2226 Install angular-route#1.2.1 3-build.2242bower angular#~1.2.12-build.2226 Install Angular#1.2.13-build.2242angular-route#1.2.13-build.2242 app\bower_components\angular-route└──angular#1.2.13- build.2242angular#1.2.13-build.2242 App\bower_components\angular

Download the latest version of angular and Angular-route, and the class inventory is placed under the App/bower_components directory.

4. Configuring the ANGULARJS Project

• Modify index.html: In the Portal file, page template
• Modify welcome.html: Welcome page
• Modify App.js: Global configuration
• Modify Controller.js: Controller

Modify Index.html

<!DOCTYPE html>

Modify Welcome.html

Welcome {{ username }}

Modify App.js

‘use strict‘;var app = angular.module(‘app‘, [‘ngRoute‘]);app.config([‘$routeProvider‘, ‘$locationProvider‘, function ($routeProvider, $locationProvider) { $routeProvider .when(‘/‘, {templateUrl: ‘/views/tpl/welcome.html‘, controller: ‘WelcomeCtrl‘}) .otherwise({redirectTo: ‘/‘}); $locationProvider.html5Mode(true);}]);

Modify Controller.js

‘use strict‘;function WelcomeCtrl($scope){ $scope.username = ‘Conan_Z‘;}

Restart node to view the angular project.

D:\workspace\javascript\angular-basic>node app.jsExpress server listening on port 3000GET / 304 8msGET /styles/main.css 304 3msGET /scripts/angular/app.js 304 6msGET /scripts/angular/controllers.js 304 11msGET /bower_components/angular-route/angular-route.min.js 200 18ms - 3.82kbGET /bower_components/angular/angular.min.js 200 19ms - 98.03kbGET /views/tpl/welcome.html 304 9msGET /bower_components/angular-route/angular-route.min.js.map 200 21ms - 9.61kbGET /bower_components/angular/angular.min.js.map 200 26ms - 264.16kb

Interface display:

The links configured in index.html are displayed, and the welcome conan_z configured in the Welcome.html page are displayed. For routing and template configuration, refer to the article: Angularjs Routing and templates

5. Increase Bootstrap

Next, add Bootstrap-v3 to make the interface look good. We still have bower to manage Bootstrap's dependence.

Add the class library through the command line, and write the Bower.json file

D:\workspace\javascript\angular-basic>bower install bootstrap --saveD:\workspace\javascript\angular-basic>bower install angular-bootstrap --save

• Modify index.html: Add css, JS reference
• Modify welcome.html: Increase the effect of bootstrap

Modify Index.html

<! DOCTYPE html>

Modify Welcome.html

This is done in a manual way: Angularjs + EXPRESS3 + Bootstrap3 combination.

6. The Complete project

Project code uploaded by GitHub, Project address: Https://github.com/bsspirit/angular-basic

Project Download and Installation

git clone https://github.com/bsspirit/angular-basicnpm installbower install

Project Run

node app.js

Of course, for large angular projects, we can choose to build with Yeoman seeds, please refer to the article: Angularjs start with a build project

But sometimes yeoman project, update not timely, such as Bootstrap has to V3, seed project or Bootstrap V2, and V3 incompatible v2. It may be better to build your own project manually.

Reprint please specify the source:
http://blog.fens.me/angularjs-express3-bootstrap3/

Quickly build a Web environment Angularjs + EXPRESS3 + Bootstrap3