Home > Developer > Web Develop
Beginning in March, received a new task, with UI development, using angular js,express JS and other technologies. So the weekend to learn new technology.
The product UI structure in the group is as follows:
One of the front-end, mainly using angular JS frame, in addition to cooperate with Bootstrap to provide a lot of control and jquery, backstage is mainly Express JS set up the Web Server,express JS with nginx use very convenient.
Therefore, when the project is not busy, so I have the time and interest to learn angular JS and express JS.
At the same time, I realized one of the simplest angular js + Express JS website example.
I. Angular JS
Angular JS is developed by Google employees, after the maintenance of a project by Google, the official website is: https://angularjs.org/. Detailed documentation is available to download the latest version 1.4 and stable version of 1.3.15.
Simply put, Angular JS is a JavaScript framework that works on the front-end . Its two main features are the extension of HTML through directives , and the binding of data to HTML through an expression . At the same time provide the Controller, filter filter, factory and other services.
Angular JS because of the role in the front-end, so can be combined with any server technology , and Express JS is a good combination.
The generation of Angular JS is suitable for developing dynamic Web applications in order to solve the drawbacks of the static web Operation DOM.
The Angular JS principle can be understood by:
There are also a lot of information about getting started online. But introduce some important concepts of angular JS:
1. Controller controllers
To dynamically manipulate the data in the Web page, we can write the 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 to control the data in the page. As follows:
Index.html
1 <!DOCTYPE HTML>2 <HTMLNg-app= "MYAPP">3 <Head>4 <Scriptsrc= "Lib/angular-1.3.15/angular.js"></Script>5 <Scriptsrc= "Lib/angular-1.3.15/angular-route.js"></Script>6 <Scriptsrc= "Js/controller.js"></Script>7 <Scriptsrc= "Js/angularmainapp.js"></Script>8 </Head>9 <BodyNg-view>Ten <Div> One <P>Hello {{Name}}</P> A </Div> - </Body> - </HTML>
This is a angular JS control to write the page, specify angular JS app for MyApp, pay attention to the expression, {{Name}},name is a dynamic variable. Where does the value of the name come from? is to assign a value to the name in the corresponding controller, and never the user can see the true value of the name when accessing the Index.html page.
Controller.js
1 // 2 var mycontrollers = angular.module (' mycontrollers ' 3 // controller 5 Mycontrollers.controller (' Indexcontrl ', [' $scope ', function ($scope) { 6 $scope. Name = "Kevin" 7 }]); In Controller.js, we define a Indexcontrl controller that assigns a value to name index.html. Of course, I think the real development, the controller code will certainly be a lot, it is recommended that each controller like Indexcontrl is placed in a JS file, so the specification, good maintenance.
So there's a question,how does Indexcontrl relate to index.html? Angular JS How to know we want to use Indexcontrl to control index.html?
There are two ways, one is to specify directly in the index.html,
1 < ng-controller= "Indexcontrl">2 <P > Hello {{name}}</p>3 </Div >But this way, for large sites, too much trouble. Another way is to use angular JS, another module ng-route, do the routing control, for different paths, in the same file to define the respective controller. As follows:
Myangularapp.js
1 //Declare angular JS level module wich depends on filters, and services2 varMyApp = Angular.module (' MyApp ', [' Ngroute ', ' mycontrollers ')]);3 4 //Route5Myapp.config ([' $routeProvider ',6 function($routeProvider) {7 $routeProvider.8 When (9‘/‘,Ten { OneTemplateurl: ' index.html ', AController: ' Indexcontrl ' - } - ). the otherwise ({ -Redirectto: '/404 ' - }); - } +]);
It is worth noting that it is important to refer to Ng-route in the moudle of MyApp and to reference the Angular-route.js file in the file, otherwise it will not work.
This index.html the data in the page and is controlled by the Indexcontrl function. Here is just a simple demo, more features to read the document.
2. Filter filters
Angular JS provides the filter function, essentially we define some common methods to format the output data on the page. Very convenient.
It is recommended that the development be placed in a separate filter.js file.
3. Factory Service
Let's also define some common methods as services. However, all services are deferred instantiation and are instantiated only when they are used or relied upon, all of which are singleton cases.
It is recommended that the development be placed in a separate factory.js file.
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 website will use other technology. If we want to do backstage with node. JS, that's easy, http.createserver. But in the real site development, with Express JS will be more suitable.
Express JS is currently the most popular web development framework based on node. JS , providing a variety of modules, such as Session,cookie, to quickly build a full-featured website.
In essence, Express JS was developed based on the built-in HTTP module of node. js .
Express JS and nginx reverse proxy server collocation is very convenient.
Here Express JS has an important concept is the middleware middleware, can be loaded using many Express JS or other modules provided by the module as a middleware, its role is to handle HTTP requests, a middleware finished processing, can be passed to the next middleware.
You can use NPM to download Express JS.
1 npm Install Express
If you want to quickly use Express JS to build a website backstage, recommend a tool, called express-generator, it can help you quickly build an express JS project, generate the necessary files.
1 npm install-g express-generator
But here, I found that the other modules used in express generator, such as jade for view rendering, are slightly more complex. I still refer to the establishment of a simple Express JS project.
The path is as follows:
The public folder is where the UI-related files are placed, as follows:
Where App.js is the starting file of Express JS, equivalent to the main function.
App.js
1 varExpress = require (' Express ');2 varHTTP = require (' http ');3 varPath = require (' path ');4 varRoutes = require ('./routes/index '));5 6 varApp =Express ();7 8App.use (Express.static (Path.join (__dirname, ' public ')));9 TenApp.use ('/', routes); One AHttp.createserver (APP). Listen (3000);
Here, is to use Express JS to build a server, note that the 8th line of code is the role of the specified page folder, the 10th sentence is about the path/route information in the Routes folder in the index file definition, These two sentences can not be wrong .
Routes/index
1 var Express = require (' Express ') Span style= "color: #000000;" >); 2 var router = Express. Router (); 3 /* GET home page. */ 5 router.get ('/', (req, res, next) { 6 res.render (' index ', {title: ' Express ' For path/access, go to the public folder to find the index.html file.
So through a command,
1 Node app.js
You can hang up the website.
Three. Sample results and summary
Finally visit the site, you can see the correct results, the site has been suspended, and the page variables have been angular JS controller replaced by the correct data.
Here is a small place, the initial test when the page variables are not replaced, spent a lot of hours, changed the angular JS Library, change the controller and other wording, are useless. Finally check the data and documents, only to find that only the page has Ng-view, will work. It turns out that ... The Pit Daddy Ah ...
This article only introduces a very simple angular js + Express JS website Build example. I hope it works for you:-)
Kevin Song
2015-5-11
Angular JS + Express JS Starter building site
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
