Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to use Angular JS + Express JS to get started to build a website. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

Starting in April, I received a new task related to UI development, using technologies such as Angular JS,Express JS. So learn the new technology on the weekend.

The UI architecture of the products in the group is as follows:

Among them, the front end mainly uses the Angular JS framework, together with many controls provided by Bootstrap and JQuery, and the background is mainly built by Express JS Web Server,Express JS with Nginx is very convenient to use.

Therefore, when the project is not busy, I have the time and interest to learn Angular JS and Express JS.

At the same time, I have implemented the simplest website example of Angular JS + Express JS.

one。 Angular JS

Angular JS is a project developed by Google employees and later maintained by Google. Its website is https://angularjs.org/. You can download version 1.4 and stable version 1.3.15 of * * for detailed documentation above.

To put it simply, Angular JS is a Javascript framework that acts at the front end. Its two main features are that it extends Html through instructions and binds data to Html through expressions. At the same time, it provides controller, Filter filter, Factory and other services.

Because Angular JS acts in the front end, it can be combined with any server technology, and Express JS is a good combination.

In order to solve the malpractice of static web page operating DOM, Angular JS is suitable for the development of dynamic Web applications.

The principle of Angular JS can be understood in the following figure:

There are also a lot of materials for getting started on the Internet, so I won't repeat them here. But let's introduce several important concepts of Angular JS:

1. Controller Controller

To dynamically manipulate the data in the web page, we can write a controller for the Html page. The controller is essentially a Javascript method. For example, we can write a corresponding Javascript method for each HTML page as a controller to control the data in the page. As follows:

Index.html

Hello {{name}}

This is a page written by Angular JS control. Specify that the app of Angular JS is myApp. Notice the expression, {{name}}, name is a dynamic variable. Where does the value of name come from? This is to assign a value to the name in the corresponding controller, so that the real value of the name can be seen when the user visits the index.html page.

Controller.js

/ / Declare angular JS level module wich depends on filters, and services var myControllers = angular.module ('myControllers', []); / / controller myControllers.controller (' indexContrl', ['$scope', function ($scope) {$scope.name = "Kevin";}])

In controller.js, we define a controller for indexContrl that assigns values to name in index.html. Of course, I think the real development, the controller code will be a lot, it is recommended that each controller like indexContrl in a separate JS file, so standardized, easy to maintain.

So the question is, how does indexContrl relate to index.html? How does Angular JS know we're going to use indexContrl to control index.html?

There are two ways, one is to specify directly in index.html

Hello {{name}}

But this way, for large websites, is too troublesome. It is suggested to use another way, that is, to use another Module ng-route of Angular JS to do routing control, and define their respective controllers in the same file for different paths. As follows:

MyAngularApp.js

/ / Declare angular JS level module wich depends on filters, and services var myApp = angular.module ('myApp', [' ngRoute', 'myControllers']); / / route myApp.config ([' $routeProvider', function ($routeProvider) {$routeProvider. When ('/', {templateUrl: 'index.html', controller:' indexContrl'}). Otherwise ({redirectTo:'/ 404'});}])

It is worth noting that ng-route must be referenced in the moudle of myApp, and the angular-route.js file must be referenced in the file, otherwise it will not work.

In this way, the data in the index.html page is controlled by the indexContrl function. Here is just a simple Demo, more functions to see the documentation.

2. Filter filter

Angular JS provides a filter function, essentially because we define some general methods to format the output data on the page. It's very convenient.

It is recommended that you put it in a separate Filter.js file when developing.

3. Factory service

Also let's define some common methods as services. However, all services are delayed instantiation and will only be instantiated when they are used or relied upon, and are singletons.

It is recommended that you put it in a separate Factory.js file when developing.

two。 Express JS

In the front end of the example, we developed the Html page and the corresponding JS file using the Angular JS framework. But the backstage of the site is about to use other technologies. If we want to use Node.js as the background, it's very simple, http.createServer is fine. But in real website development, Express JS would be more appropriate.

Express JS is the current Node.js-based Web development framework, providing a variety of modules, such as session,cookie, you can quickly build a fully functional website.

In essence, Express JS is developed based on Node.js 's built-in http module.

Express JS and Nginx reverse proxy server are very convenient to match.

An important concept of Express JS here is middleware middleware, which can be loaded using modules provided by many Express JS or other modules as middleware. Its function is to handle http requests. One middleware can be processed and passed to the next middleware.

You can use NPM to download Express JS.

Npm install express

If you want to quickly use Express JS to build a website background, recommend a tool called express-generator, which can help you quickly build an Express JS project and generate the necessary files.

Npm install-g express-generator

But here, I find that there are many other modules used in express generator, such as jade for view rendering, which is a little more complex. I still refer to it and build the simplest Express JS project by myself.

The path is as follows:

The files related to UI are placed in the public folder, as follows:

Where app.js is the starting file of Express JS, which is equivalent to the main function.

App.js

Var express = require ('express'); var http = require (' http'); var path = require ('path'); var routes = require ('. / routes/index'); var app = express (); app.use (express.static (path.join (_ dirname, 'public')); app.use (' /', routes); http.createServer (app).

Here, is to use Express JS to create a server, note that the role of the 8th line of code is to specify the folder of the page, the role of the 10th sentence is about the path / routing information defined in the index file in the routes folder, the order of these two sentences can not be wrong.

Routes/index

Var express = require ('express'); var router = express.Router (); / * GET home page. * / router.get ('/', function (req, res, next) {res.render ('index', {title:' Express'}); module.exports = router

For access to the path /, go to the public folder to find the index.html file.

So through a command

Node app.js

You can hang up the website.

three。 Example results and summary

* visit the website and you can see the correct result. The website has been suspended and the variables in the page have been replaced with the correct data by the Angular JS controller.

Here is a small place, the initial experiment page variables are not replaced, spent a lot of hours, changed the Angular JS library, changed the controller and other writing, are useless. * check the information and documents and find that only when there is ng-view in the page will it work.

The above is the editor for you to share how to use Angular JS + Express JS to build a website, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.