This example describes the MVC architecture of ANGULARJS. Share to everyone for your reference, specific as follows:
The MVC application architecture originated in the Smalltalk language as early as 1970 and was later used extensively in desktop application development and is now popular in web development. The core idea of MVC is to separate the data management (Model), Business logic Control (Controller) and data display (View), so that the program's logic and maintainability are stronger.
For ANGULARJS applications, view is the DOM (Document Object model), which you can understand as an HTML page. The controller (Controller) is a user-defined JavaScript class. Model data is stored in the object's properties.
Let's look at the following code:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial03</title>
</head>
<body>
<div ng-controller="UserController">
User name: < input type = "text" ng model = "name" placeholder = "user name" / >
Password: < input type = "password" ng model = "PWORD" placeholder = "password" / >
< button ng Click = "login()" > submit < / button >
<p>The user name you entered: {{name}}</p>
<p>The password you entered: {{PWORD}}}</p>
</div>
<script>
function UserController ($scope,$log)
{
$scope.name="admin";
$scope.pword="123456";
$log.info( $scope.name);
$log.info( $scope.pword);
$scope.login = function()
{
Alert ("login");
}
}
</script>
</body>
</html>
We modified it on the basis of the code for the data binding usage example of the ANGULARJS introductory tutorial, and we declared a controller by Ng-controller instruction, named Usercontroller, The part between the DIV start tag and the end tag is managed by the controller.
Function Usercontroller ... For the controller definition section, here we rely on the Angularjs dependency injection system to inject $scope and $log objects into the controller in the form of parameters. $scope as a model data object, as mentioned earlier, the Ng-model function is to add a property and form element binding for the $scope object. $log object is used to output debug information in the browser console.
Some initialization work can be done in the controller, for example, we initialize the contents of the Username and password text box to "admin", "123456". can also be used for event handling, we use the ng-click instruction to declare the button's Click event handler function for login (), in the controller through $scope.login = function () ... For event binding.
Running in a browser can see the effect as follows:
When the page loads, the contents of the text box are initialized and the Submit pop-up dialog box is clicked.
The scope of the ANGULARJS controller is limited to the portion between the start tag and the end tag of the element where the Ng-controller is located, and to prove this, we add a controller with the following code:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial03</title>
</head>
<body>
<div ng-controller="UserController" style="border:#ccc solid 1px;">
User name: < input type = "text" ng model = "name" placeholder = "user name" / >
Password: < input type = "password" ng model = "PWORD" placeholder = "password" / >
< button ng Click = "login()" > submit < / button >
<p>The user name you entered: {{name}}</p>
<p>The password you entered: {{PWORD}}}</p>
</div>
<br/>
<div ng-controller="InfoContoller" style="border:#ccc solid 1px;">
Personal hobbies: < input type = "text" ng model = "love" placeholder = "personal hobbies" / >
<p>Your personal hobbies: {{love}}</p>
</div>
<script>
function UserController($scope,$log)
{
$scope.name="admin";
$scope.pword="123456";
$scope.login = function()
{
Alert ("login");
}
}
function InfoContoller($scope,$log)
{
$scope. Love = "football";
$log.info($scope.name);
$log.info($scope.pword);
$log.info($scope.love);
}
</script>
</body>
</html>
Since name and Pword are not defined in the Infocontoller controller, we output $scope.name and $scope.pword in the console as undefined.
Angularjs Source can click here to download the site .
I hope this article will help you to Angularjs program design.
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
