Use Angularjs and bootstrap front-end to develop case combat _javascript skills

We will use ANGULARJS and Bootstrap to develop a front-end application example, through this simple project combat, leading everyone into the Angularjs front-end development hall, and to introduce you a few knowledge points:
1.MVC Foundation, through the project example, let everybody preliminary experience MVC design pattern application.
2. Build our first Angularjs application, through a practical use case development, we can get a certain perceptual knowledge of front-end development.
3. Initial understanding of the ANGULARJS three most important components, they are model, View, and controller.
4. Preliminary understanding of the use of the scope object of Angularjs.

The basic description of the MVC pattern:

MVC is a kind of UI architecture pattern, its aim is to decompose the application function into the specialized module, realize the reusability of the module, reduce the coupling between the modules and enhance the robustness of the system. The MVC pattern is mainly divided into three parts:
Model: Used to store system data
View: The UI interface used to implement the system
Controller: For connecting model and view.

In my opinion, the best way to learn is to practice, we will develop a front-end application example, through this example, we can deepen the understanding of the ANGULARJS framework, and we can also feel how the MVC pattern embedded in the development process.

Application Introduction (Code path: HTTP://XIAZAI.JB51.NET/201608/YUANMA/BOOTSTRAP-MOOC (jb51.net). rar)

We will do a digital guessing Web application with the following interface:

The application background randomly generates a random number within 1 to 1000, the user enters the guessing number in the text box, if the input is correct, the application will pop up the green prompt below, if the error, for example the input number is bigger or small than the background generation, then the application will pop up the corresponding prompt, for example:

The numbers shown at the bottom indicate how many times we guessed.

The Code directory structure for the entire application is as follows:

Since we are currently doing a simple application example, so we put the code of each module together, later we build large-scale front-end applications, we will be very careful to arrange the entire project code directory structure.

In the composition of the file shown above, Angular.js is the framework file on which we develop applications, BOOTSTRAP.MIN.CSS is the interface library file for designing UI interfaces, and numberguessing.html will be the application principal file we are developing. Next we will step by step to add code to numberguessing.html, gradually increase the functionality of the application.

First of all, what we have to do is build a simple HTML template, on this template, we can slowly add functionality, the template code is as follows:

<! DOCTYPE html>
 
 

In the template code above, note that there is a row "meta ... charset=" utf=8 ""

The purpose of this line is to let the browser correctly display Chinese, if there is no this line, the browser will display the code in Chinese, in the template, we will be used later to use the framework code and UI Interface Library code introduced. When we're done, we load it into the browser to see if there's any errors, and if that's true, what we're looking at is a blank:

Next, we'll develop the backend logic code for the application, and we'll identify a few variables to use:

Originalval, used to store generated random numbers
Userguess, stores the guessing number that the user is currently entering
Numoftries, record how many times users have tried
Deviation: Records the user input number and the background random number difference, if the user enters the number to be big, then deviation > 0; Input small, devitation < 0; If the input is correct, then devitation = = 0

Implementation of Controller module

Controller is used to connect model and view two modules, and the system's business logic is also implemented in controller. When the user does something on the interface, such as clicking on the button and entering the content, controller receives the corresponding information on the view side, and then controller triggers the corresponding event-handling logic, such as the user entering a number in the interface, clicking on the OK button, Controller from view to enter the value, and then from model to take out the application generated random number, hatchback comparison, the results of the comparison deviation returned to view, view based on the return of the deviation value, show the corresponding interface changes. Let's look at how the logical body of controller is implemented:

function Guessthenumbercontroller ($scope) {
 $scope. verifyguess = function () {
 $scope. Deviation = $ scope.originalval-$scope. userguess;
 $scope. numoftries = $scope. numoftries + 1;
 }
 $scope. Initializegame=function () {
 $scope. numoftries = 0;
 $scope. Originalval = Math.floor (Math.random () * 1000) + 1);
 $scope. userguess = null;
 $scope. deviation = null;
 }
 $scope. Initializegame ();
 

The Guessthenumbercontroller function sets up the numerical properties of the model object, which we have mentioned before, and the controller function also derives two interface calls, one is verifyguess, When the OK button on the interface clicks, the View module invokes the interface to determine whether the data entered by the user is correct, and the call updates the values of the deviation and numoftries two properties.

Initializegame is used to initialize the entire system application, first generating a random number, and then initializing some variables to be empty.

In our controller principal function, we pass in a parameter $scope, which is angularjs to us, which is basically equivalent to M in the MVC pattern, model, which is similar to a database, designed to store the applied data and logical code. As you can see, in the Initializegame call, controller will numoftries, Originalval and so on into the $scope object, in the Verifyguess call, and from $ Scope to obtain these data for calculation and modification.

The controller code above is added to our template file numberguessing.html, and the results are as follows:

<! DOCTYPE html>
 
 

The interface design of app View application

The view, which is in MVC, is actually the data in model is displayed through the graphical interface. Our current application is simple, based on simple principles, the user experience of interface design may not be very good, but enough to let us quickly understand how to use ANGULARJS combination Bootstrap quickly build a program's front-end interface.

Let's look at the structure of the interface and integrate the controller with the interface logic:

 <body ng-app=" app "> <div class=" container "ng-controller=" Guessthenumbercontroller ">  
 

In MVC, C, controller, which is the bridge between the interface (view) and the data (Model), we need to embed all three of them into the ANGULARJS framework and then rely on the ANGULARJS framework mechanism, Realize the mutual linkage between the three.

In order to embed the view into ANGULARJS, the code statement above:

<body ng-app= "App" >

Ng-app This property tells the HTML code within the Angular,body tag to embed the view part into the ANGULAJS framework, and "app" as the Ng-app property value, notifying the ANGULARJS framework to load a module called "app". This module is the equivalent of a storage warehouse, we break down the functions of the front-end application into units, which are stored in the module named app, Controller, model are functional units, and later we will see that they will be added to the module called app, The ANGULARJS framework will take the CONTROLLRE and model two units from this module to use.

Next, we'll put the app-named module into the ANGULARJS framework, which is as follows:

<script type= "Text/javascript" >
 angular.module (' app ', [])
 function Guessthenumbercontroller ($scope) {
 ....
 }
<script>

So we have a module called app in the Angularjs framework, and we associate the module with the interface through ng-app= "app," and then we need to put the controller unit into the app module, which reads:

<script type= "Text/javascript" >
 angular.module (' app ', [])
 . Controller (' Guessthenumbercontroller ', Guessthenumbercontroller);
 function Guessthenumbercontroller ($scope) {
 ...
 }
</script>

The Angular.module function generates and returns a Module object that contains an interface called Controller, through which we can put our own developed controller function units into module, which can be seen from the code above We put a controller unit in the module, and the name of the unit is called Guessthenumbercontroller, which is the first input parameter of the controller function, The second input parameter is the functional logic body of the controller unit, which is the Guessthenumbercontroller function we developed ahead of us.

After the above steps, our application is developed, at this time we can load our HTML from the browser, so we can see the concrete effect.

Before finishing, we drill down into the code to see how the Angularjs integrates each module to form a complete front-end application. In the code, there are special symbols and attributes, special symbols such as: {{}}, special attributes such as: Ng-app, Ng-controller, and so on. In the angular context, {{and}} together are called interpolation symbols, ng-* form attributes called angular directives. Angular converts a variable in {{and}} to a numeric value of the variable, such as the following code fragment:

<p class= "Text-info" > You have guessed the number of times is: <span class= "badge" >{{numOfTries}}</span><p>

Numoftries indicates how many times the user has tried to guess, and if the Numoftries value is 0, Angularjs will escape the above code as:

<p class= "Text-info" > You have guessed the number of times is: <span class= "badge" >0</span><p>

The browser then renders the interface into the following scenario:

ANGULARJS directive is a complex technical knowledge point, in the follow-up discussion, we will carry on the detailed discussion, here we briefly introduce, the ANGULARJS instruction function, the main extension HTML syntax function, the instruction is the ANGULARJS frame, the function is most powerful place. Let's briefly introduce the ANGULARJS instructions used in the code.

Ng-controller: This instruction connects the view of controller and HTML representations, using this instruction, view can access controller set variables and interfaces, you can try to put
Ng-model=ng-controller= "Guessthenumbercontroller"
Get rid of this sentence and see what happens.

Ng-model: Double-bind the variables in model to the controls in view, for example:

<input type= "number" ng-model= "userguess"/>

This statement binds the variable userguess in model to the input text box on the interface, and when the values in the text box change, the value of the userguess changes, and conversely, if the value of guess changes in the background, the contents of the text box are also changed accordingly.

Ng-click: Connect the Click events generated by the interface with the controller processing logic, for example:

<button ng-click= "verifyguess ()" class= "btn btn-primary btn-sm" > OK </button>

The above code joins the click event of the OK button with the Controller verifyguess () function, which is executed once the button is clicked.

Ng-show: Whether the control that is used to control view is displayed, and if the value of the corresponding expression for ng-show is true, the control is displayed and, if False, the control is not displayed, for example:

<p ng-show= "deviation<0" class= "alert alert-warning" > Ye, your bid is too high! </p>

The above code, function is, when the value of the variable deviation is less than 0 o'clock, the contents of the paragraph element p will be displayed to the interface.

Angularjs is a powerful but also a more complex front-end development framework, our example is only to help you understand the angularjs of the powerful function, first to obtain certain perceptual knowledge, In order to our future rational Analysis master the entire ANGULARJS front-end development technology lay a solid foundation.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.