node. JS Development Primer-angular Simple Example

In " using Angularjs," we mentioned how to introduce Angularjs in the node. JS Project, this time providing a very simple example that demonstrates instructions in Angularjs, data binding , Services and other content.

I am ready to do the Web management system, different administrators will have different permissions, the administrator login to see the menu and his permissions about, can see what, is dynamically generated (like RBAC). The example of this article comes from this project and, of course, it is still the simplest.

If not specifically stated, the examples we use later are generated using Express generator.

Angular Small Demo

Let's get started.

The first step is to enter the MyProjects directory and perform "Express Angulardemo".

The second step , navigate to the Angulardemo directory, and perform the "NPM install"

The third step , to angularjs download the latest Angularjs library file, I downloaded the 1.4.3 min version, renamed "Angular-1.4.3.min.js", put in angulardemo/public/ JavaScripts below. For our simple demo, just this one file will do.

The fourth step is to prepare the file we want to use.

The first is admin.html, put under Angulardemo/public. admin.html encoding format to use UTF8. The contents are as follows:

<! DOCTYPE html>

The

is then the Admin.js file, placed under Angulardemo/public/javascripts. UTF8 code Oh, the content is as follows:

Angular.module (' X-admin ', []). Controller (' X-controller ', function ($scope, $http) {$scope. currentuser= "Zhangsan"; $scope. Content = '/welcome.html '; $scope. Menus = [{text: "System Management", Enabled:true, submenus:[{text: "User Management", Enab Led:true, Action: "/login.html"}, {text: "Role Management", enabled:true, action : "/role"}, {text: "Rights Management", enabled:true, Action: "/access" }]}, {text: "Content Management", Enabled:true, submenus:[{text: "Live Monitor", Enab Led:true, Action: "/stream-monitor"}, {text: "Appointment Management", Enabled:true, AC tion: "/book-mgr"}]}, {text: "Push Management", Enabled:true, submenus:[{ Text: "Push list", Enabled:true, Action: "/push-list"}, {text: "New Push", Enabled:true, Action: "/add-push"}]}]; $scope. setcontent = function (action) {Console.log (action); $scope. content=action; };});

Next I wrote a simple CSS file--admin.css, placed under Angulardemo/public/stylesheets. The contents are as follows:

A {color: #00B7FF;} div.x-view-full {width:100%; height:100%;} Div.x-project-header {display:inline-block; Position:absolute; border:1px solid #E4E4E4; Background: #F2F2F2; width:100%; height:60px; left:0px; top:0px;} Div.x-sidemenu {display:inline-block; Position:absolute; border:1px solid #E4E4E4; Background: #F2F2F2; left:0px; top:66px; width:160px; height:600px; }div.x-contents {display:inline-block; Position:absolute; left:170px; top:66px; min-width:200px; min-height:200px;} div.x-sidemenu-one{margin-left:8px;} div.x-sidemenu-two{margin-left:14px; font-size:14px;} p.sidemenu-one{font-size:18px; Font-weight:bold; Color:black;}. sidemenu-button{font-size:14px; border:0px; margin-bottom:6px; Background: #F2F2F2;}. Sidemenu-button:hover {background-color: #218fd5;} #x-project-title{Position:absolute; Display:inline-block; top:20px; left:20px; font-size:28px; Font-weight:bold; width:200px;} #x-login-user{ Position:absolute; Display:inline-block; top:30px; right:10px; width:200px; Text-align:right;} div.admin-adduser{position:relative; top:4px; left:10px; Width:auto; Height:auto;}

Finally, to demonstrate the menu function, we also need to welcome.html and login.html the two static HTML files, are placed under public can.

Welcome.html content is as follows:

Welcome to X-Manager!

Login.html content is as follows (note, UTF8 encoding):

<! DOCTYPE html>

Fifth Step , in the Angulardemo directory, execute the "npm start" command to launch the website.

Sixth step , Access "http://localhost:3000/admin.html" in the browser. You should see the following effect:

Steps to create a basic Angularjs app

In front of us no matter 3,721 first to run the Angulardemo up. Now let's look at the steps to create a basic ANGULARJS application.

The first step is to implement a node. JS Web server. This express for us, we use the default application template, you go to see app.js, you should find it to the public directory using the App.static middleware, we can directly in the browser access to the public directory files, such as HTTP/ Localhost:3000/admin.html.

The second step is to implement a angularjs HTML template, such as our admin.html. This is the most important thing that we have to unfold to see.

1. Loading the ANGULARJS library

Well, the script element is placed at the end of the BODY element of the HTML document, as in admin.html. The browser will help you download and execute the angular-1.4.3.min.js file. The HTML code is as follows:

<script src="/javascripts/angular-1.4.3.min.js"></script>

2. Implement your Angular module

As in our example, Admin.js, which implements a controller to support HTML templates.

3. Load your main module

The script element, which is placed behind the angular library, is required. The HTML code is as follows:

<script src="/javascripts/admin.js"></script>

4. Defining the root element

Admin.html has such a line of code:

The 1th line of code for Admin.js

angular.module(‘x-admin‘, [])

The two lines of code correspond, and the HTML uses the NG-APP directive to specify the angular module name. The module name is the first parameter that you provide when you use Angular.module to define a module in your JS code. For our example, the module is named "X-admin".

After associating the Ng-app in HTML, you can add a controller.

For ng-app instructions and Angular.module methods, refer to here: Http://docs.angularjs.cn/api. Domestic, no need to turn Qiang.

When you use Angular.module to define a module, the second parameter is a list of dependent modules, and angular automatically solves the dependency injection problem for you. For example, if you rely on UI bootstrap, you can write:

angular.module(‘x-admin‘, [‘ui.bootstrap‘])

It is important to note that the instructions in the document are Ngapp in this form, while writing the code is Ng-app. Angular the document is good, like one.

5. Adding a Controller

This line of code is in the admin.html documentation:

<div class="x-view-full" ng-controller="x-controller">

The above code assigns the controller named "X-controller" to

element, so that we can use the data (Model) within the scope of the controller defined by JS in this element.

The 2nd line of code for Admin.js:

controller(‘x-controller‘, function ($scope, $http) {

Defines a controller. The specific syntax reference here: Http://docs.angularjs.cn/api. Domestic, no need to turn Qiang.

Controller is angular. Module, a method for defining a controller, the prototype is:
Controller (name, constructor);

The first parameter is the name of the controller, and the second parameter is the controller's constructor. The parameters of the constructor are the services that the controller relies on.

There is also a syntax controller (name,[]), and the second parameter is the controller's dependent array. Like what:

controller(‘x-controller‘,[‘$scope‘, ‘$http‘, function($scope, $http){}]);

I see 1.3.x,1.4.x's document that the Controller method prototype is the first, and the second is I see in the Node.js+mongodb+angularjs Web development. Both of which I have tested, can be used. But with what version of what relationship, doubts.

6. Implementing a Scope model

When you define a controller by using the module's controller method, the developer is given a constructor for the controller. When angular compiles HTML, an instance of the controller is created using the controller constructor provided by the developer. constructor, some data is initialized and associated to the scope sCoPeon. in themadewithDomain The data and methods in scope can be directly referenced by HTML.

I'm in Admin.js. Within the constructor of the X-controller controller, a menus array is provided to construct the left menu of the management interface, the CurrentUser is provided, and the content is used to save the local HTML template used in the lower left corner of the admin interface; A setcontent method is provided so that the user can change the contents of the functional area by changing the content through the menu of the admin interface.

7. Using directives and binding data in HTML templates

In fact, in the implementation of the scope model, the heart of "what data and which HTML element corresponds to" this point is clear, it is unclear you do not come ah not.

Once you have implemented the scope model, you can use the NG directive in the HTML template to correlate the data. In fact, sometimes you write the HTML template first, or to implement the scope of the model, it is not very clear.

We take admin.html as an example to illustrate the use of NG instructions, notice, only mention admin.html in use, useless to see Http://docs.angularjs.cn/api. We used Ng-app, Ng-controller, Ng-repeat, Ng-click, Ng-show, Ng-include, {{}}.

Ng-app and Ng-controller have said it. I didn't mention that.

<div id="x-login-user"><a href="/user/tttt">{{currentUser}}</a>&nbsp;<a href="/logout">退出</a></div>

This line of code uses the syntax of {{expression}} , which is a JS expression consisting of variables within the scope. The CurrentUser variable is referenced directly in the example, and the actual run will replace this part of the code in the HTML document with the value of CurrentUser in the admin.js. If the value of the CurrentUser variable changes during the run, the HTML will also change, which is data binding.

We can modify the Admin.js, use the $interval service to start a timer, modify the value of CurrentUser. The new admin.js is this:

angular.module(‘x-admin‘, []).controller(‘x-controller‘, function ($scope, $http, $interval) {  $scope.currentUser="ZhangSan";  $scope.content = ‘/welcome.html‘;  $scope.menus = [    ......   ];    $scope.setContent = function(action){    console.log(action);    $scope.content=action;  };  //2秒后改变一次currentUser  $interval(function(){    $scope.currentUser = "LiSi";  }, 2000, 1);});

The ng-repeat directive can create multiple similar HTML elements based on a set, using a templated item.

<div class="x-sidemenu-one" ng-repeat="menu in menus" ng-show="menu.enabled">

The above code uses the NG-REPEAT directive to create multiple x-controller based on the menus array defined in the

Elements, each with the same structure. Within the Ng-repeat directive, you typically use the syntax "X in Collections" to traverse a collection in a scope, and x can be used inside a template element defined by Ng-repeat. For example, the div template defined above uses the menu variable defined in the "menu in menus" when using the ng-show directive. At the same time this div template internal code also refers to the menu, see the following code:

<p class="sidemenu-one">{{menu.text}}</p>

The ng-show directive is placed inside an HTML element to indicate whether the element is displayed.

The ng-click directive can specify a response (function) when an element is clicked.

<input type="button" class="sidemenu-button" value="{{subMenu.text}}" ng-click="setContent(subMenu.action)">

The code above uses the Ng-click directive to specify the code "setcontent (submenu.action)" that responds to a mouse click on a button that represents a submenu. SetContent is a method defined within a scope, and submenu is a variable defined within the NG-REPEAT directive.

With this processing, when the user clicks on a menu, it invokes the SetContent method in the Admin.js to change the content value. This change, in turn, affects the HTML effect, changing the content displayed in the lower-left area of the admin page. In the example, when you click on user management, a landing page is displayed.

The code that contributes to this effect is as follows:

<div ng-include="content"></div>

The above code uses the ng-include directive to include an HTML fragment. When you use Ng-include to specify an HTML fragment, angular parses the instruction, obtains the corresponding HTML document, compiles it, and consolidates its contents into the original HTML document.

Other articles:

• Introduction to node. JS Development-Using ANGULARJS
• Getting Started with node. JS Development-Using the Jade template engine
• node. JS Development Starter--express Routing and middleware
• node. JS Development Primer--express Installation and use
• node. JS Development Primer--http File Server
• node. JS Development Primer--helloworld Re-analysis
• Introduction to node. JS Development--Environment building and HelloWorld

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

node. JS Development Primer-angular Simple Example