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.
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:
As in our example, Admin.js, which implements a controller to support HTML templates.
The script element, which is placed behind the angular library, is required. The HTML code is as follows:
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> <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