We will use Angularjs and Bootstrap to develop a front-end application example. Through this simple project practice, we will lead everyone into the palace of AngularJS front-end development, and introduce some knowledge points to you:
1.MVC basics, through project examples, let everyone have a preliminary understanding of the application of MVC design model.
2. Build our first AngularJS application. Through the development of a practical use case, everyone can gain a certain perceptual understanding of front-end development.
3. A preliminary understanding of the three most important components of AngularJS, namely Model, View, and Controller.
4. Preliminary understanding of the use of AngularJS Scope objects.
Basic introduction to MVC mode:
MVC is a UI architecture model. Its purpose is to decompose the functions of applications into special modules, realize the reusability of modules, reduce the coupling between modules, and enhance the robustness of the system. The MVC mode is mainly divided into three parts:
Model: used to store system data
View: Used to implement the system's UI interface
Controller: Used to connect Model and View.
In my opinion, the best way to learn is practice. We will develop a front-end application example. Through this example, on the one hand, we can deepen our understanding of the AngularJS framework, and at the same time, we can also feel how the MVC model is embedded in the development process.
Application introduction (code path: http://xiazai.VeVB.COM/201608/yuanma/Bootstrap-mooc(VeVB.COM).rar)
We will make a web application that guesses numbers, with the interface as follows:
The application background will randomly generate a random number with a range of 1 to 1000. The user enters the guessed number in the text box. If the input is correct, the application will pop up a green prompt below. If it is wrong, for example, the input number is larger or smaller than the number generated by the background, the application will pop up a corresponding prompt, for example:
The numbers shown at the bottom indicate how many times we guessed.
The code directory structure of the entire application is as follows:
Since we are currently working on a simple application example, we put the code of each module together. In the future, when we build large-scale front-end applications, we will be very careful to arrange the code directory structure of the entire project.
In the file composition shown in the figure above, angular.js is the framework file on which we rely on to develop applications, bootstrap.min.css is the interface library file used to design the UI interface, and numberGuessing.html will be the main application file we want to develop. Next, we will add code to numberGuessing.html step by step and gradually increase the functions of the application.
First of all, what we need to do is build a simple html template. On this template, we can slowly add functions. The template code is as follows:
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Guess The Number !</title> <link href="bootstrap.min.css" rel="stylesheet"></head><body > <script src="angular.js"></script></body></html>
In the template code above, notice that there is a line "meta... charset="UTF=8"
The purpose of this line is to enable the browser to display Chinese correctly. If this line is not available, the browser will display Chinese. In the template, we first introduce the framework code and UI interface library code to be used later. After it is done, we load it into the browser to see if there are any errors. If that is correct, what we currently see is a blank:
Next, we will develop the application's background logic code, and we will first determine a few variables to use:
originalVal, used to store generated random numbers
userGuess, store the guessed number currently entered by the user
numOfTries, record how many times the user has tried
Deviation: Record the difference between the number entered by the user and the background random number. If the number entered by the user is large, then the definition > 0; The input is small, the definition < 0; If the input is correct, then the definition == 0
Implementation of Controller module
Controller is used to connect the two modules of Model and View, and the system's business logic is also implemented in Controller. When the user does some operations on the interface, such as clicking a button and entering content, the Controller receives the corresponding information from the View side, and then the Controller triggers the corresponding event processing logic. For example, the user enters a number in the interface and clicks the OK button, the Controller gets the input value from the View, and then takes out the random number generated by the application from the Model, compares it with the two hatchback, and returns the comparison result to the View. The View displays the corresponding interface changes based on the returned deviation value. Let's see how the logical body of the 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. The meaning of these values has been mentioned earlier. At the same time, this Controller function also derives two interface calls, one is verifyGuess. When the confirm button on the interface is clicked, the View module will call the interface to determine whether the data entered by the user is correct. At the same time, the call will update the values of the two attributes, deviation and numOfTries.
initializeGame is used to initialize the entire system application, first generating random numbers, and then initializing some variables to empty.
In our Controller body function, a parameter $scope is passed in. This parameter is passed to us by AngularJS. It is basically equivalent to M in the MVC mode, which is Model. It is similar to a database, specially used to store application data and logical code. As you can see, in the initializeGame call, the Controller puts numOfTries, originalVal and other data into the $scope object. In the verifyGuess call, he gets these data from $scope for calculation and modification.
After the above Controller code is added to our template file numberGuessing.html, the result is as follows:
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Guess The Number !</title> <link href="bootstrap.min.css" rel="stylesheet"></head><body > <script src="angular.js"></script> <script type="text/javascript"> 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(); } </script></body></html>App View application interface design
View, that is, View in MVC, is actually to display the data in the Model through a graphical interface. Our current application is simple and based on the principle of simplicity, the user experience of interface design may not be very good, but it is enough to quickly understand how to use AngularJS and Bootstrap to quickly build a front-end interface for a program.
Let’s take a look at the interface construction and integrate the Controller and interface logic:
<body ng-app="app"><div ng-controller="GuessTheNumberController"> <h2>Guess the number!</h2> <p>Please guess the random number generated by the computer, which ranges from 1 to 1000.</p> <label>Please take action: </label><input type="number" ng-model="userGuess"/> <button ng-click="verifyGuess()">Confirm</button> <button ng-click="initializeGame()">Return</button> <p> <p ng-show="deviation<0">Mr., you bid too high! </p> <p ng-show="deviation>0">My man, if you have less, add more points, add more points.</p> <p ng-show="deviation===0">My man, you really make you say it correctly!.</p> </p> <p>The number of times you guessed is: <span>{{numOfTries}}</span><p></div>C in MVC, that is, Controller, is a bridge between interface (view) and data (Model). To associate these three, we need to embed all three of them into the AngularJS framework, and then rely on the AngularJS framework mechanism to achieve interconnection between the three.
In order to embed the view into AngularJS, the above code statement:
<body ng-app="app">
ng-app This property tells Angular that the HTML code in the body tag will be embedded as a view part into the AngulaJS framework, and “app” is used as the ng-app property value to inform the AngularJS framework to load a module named “app”. This module is equivalent to a storage warehouse. We break down various functions of the front-end application into various units. These units are stored in a module called app. Controller and model are also functional units. Later we will see that they will be added to the module called app. The AngularJS framework will take out the two units of controllerre and model from this module for use.
Next, we first put this module called app into the AngularJS framework, the code is as follows:
<script type="text/javascript"> angular.module('app',[]) function GuessTheNumberController($scope) { .... }<script>In this way, we have a module called app in the AngularJS framework, and we associate the module with the interface through ng-app="app". Next, we need to put the Controller unit into the app module, the code is as follows:
<script type="text/javascript"> angular.module('app',[]) .controller('GuessTheNumberController', GuessTheNumberController); function GuessTheNumberController($scope) { .... }</script>The angular.module function generates and returns a module object. This object contains an interface called controller. Through this interface, the controller functional unit we developed can be placed into the module. From the above code, we can see that we put a controller unit in the module. The name of this unit is 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 earlier.
After completing the above steps, our application is developed. At this time, our html can be loaded from the browser, so you can see the specific effect.
Before the end, let's go deep into the code to see how AngularJS integrates various modules to form a complete front-end application. In the code, there are some special symbols and attributes, special symbols, such as: {{ }}, and special attributes such as: ng-app, ng-controller, etc. In the Angular context, {{ and }} are combined together are called interpolation symbols, and properties in the form of ng-* are called Angular instructions. Angular converts variables sandwiched in {{ and }} into values corresponding to variables, such as the following code snippet:
<p>The number of times you guessed is: <span>{{numOfTries}}</span><p>
numOfTries means how many times the user has tried to guess. If the value of numOfTries is 0, AngularJS will escape the above code as:
<p>The number of times you guessed is: <span>0</span><p>
The browser will render the interface to the following situation:
AngularJS directive is a complex technical knowledge point. In the subsequent discussion, we will discuss it in detail. Here we briefly introduce the role of AngularJS directive, which mainly extends the syntax function of HTML. Directives are the most powerful parts in the AngularJS framework. Let's briefly introduce the AngularJS directive used in the code.
ng-controller: This directive connects the Controller and the View represented by HTML. Only with this directive can the View access the variables and interfaces set by the Controller. You can try to put it in the code.
ng-model=ng-controller=”GuessTheNumberController”
Remove this sentence and see what the result is.
ng-model: Bidirectionally bind variables in Model with controls in View, for example:
<input type="number" ng-model="userGuess"/>
This statement binds the variable userGuess in the model to the input text box on the interface. When the value in the text box changes, the corresponding value of userGuess also changes. On the contrary, if the value of guess changes in the background, the content in the text box also changes accordingly.
ng-click: Connect the click events generated by the interface with the Controller's processing logic, for example:
<button ng-click="verifyGuess()">Confirm</button>
The above code connects the "OK" button click event with the Controller's verifyGuess() function. Once the button is clicked, the function will be executed.
ng-show: Used to control whether the control used to control the view to be displayed. If the value of the corresponding expression of ng-show is true, the control will be displayed. If it is false, the control will not be displayed. For example:
<p ng-show="deviation<0">Mr., your bid is too high! </p>
The function of the above code is that when the value of the variable definition is less than 0, the content of paragraph element P will be displayed on the interface.
AngularJS is a powerful but relatively complex front-end development framework. The role of our example is only to help everyone understand the powerful functions of AngularJS and first gain a certain perceptual understanding, so as to lay a solid foundation for us to rationally analyze and master the entire AngularJS front-end development technology in the future.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.