Watching a video about Angularjs, the video content is about how to make a todo list spa (simple page application, single pages application). In order to enhance understanding, the following wrote an article to review the consolidation.
Get ready
Angularjs Download
Said is the download, in fact, as long as we can refer to the page in the Angularjs can be. You can have the following methods.
CDN Acceleration
It is also possible to use the domestic CDN Accelerator service.
NPM Way
The use of NODEJS package management tools is also very convenient, basically two steps are done.
First enter the folder where we will write the code.
• Install angularjs:npm Install angular
• The introduction of the use on the page:
<!--This src address depends on your situation-->
<script src= "Node_modules/angular/angular.js" ></script>
Normal way
The general way is that we manually download the relevant files, and then manually introduced, due to the more cumbersome. There is no longer much narrative here.
Bootstrap download
As a very popular modern front-end framework, Bootstrap is the limelight. Download Address
Knowledge Reserve
MVC Architecture
The Angularjs Core employs an MVC architecture, event-driven applications. I also just contact, so the understanding is not very in place. If there is a mistake, also hope Bo friends point out.
Ng-app
As the whole single page of the Butler, app is application, the application means. Our one-page service serves as a function of this app.
Generally, Ng-app is nested as a Ng-controller parent container. Otherwise, the expected results may not occur
Ng-controller
Controller, the application of the right-hand arm of the page, the existence of the controller simplifies the coupling between the modules, making the code more standardized and simple to write.
Ng-model
Model processing, usually with the page elements of the binding output, to achieve no refreshed page effect.
Event Basics
Ng-click
In our single page application, the element that declares this attribute has the function of clicking the event. As for the function that is called that part, it is actually related to the container in which the element is located.
In other words, the corresponding function of the Click event is written in the relevant controller to complete the specific function of the code.
Complete code
Here's a detailed code for this example
Main.js
(function (Windows) {
// register an application main module
Var todoapp = window. Presents. The module (' todoapp, []);
// register the controller
/ / window. Presents. The module (' todoapp)
Todoapp. Controller (' maincontroller
[' $scope, function ($scope) {
// $scope adds elements to the view
// values in the text box
$scope. The text = ' '; // will use bidirectional binding data types
// to facilitate page display, manually add a list
$scope. Todolist = [{
Text: 'Angularjs',
Done: false
}, {
Text: 'Bootstrap',
Done: false
}];
// add a function to respond to the interaction
$scope. The add = function () {
Var text = $scope. The text. The trim ();
If (text) {
$scope. Todolist. Push ({
Text: text.
Done: false
});
$scope. The text = ' ';
}
}
// click the delete button in response to the event
{$scope. Delete = function (todo)
Var index = $scope. Todolist. IndexOf (todo)
$scope. Todolist. Splice (index, 1); // serves the purpose of deletion
}
// gets the number of completed events, as chosen by the checkbox
// because the page changes dynamically, you can use functions or use model bindings altogether, but that's a little more cumbersome
$scope. DoneCount = function () {
// using filter
Var temp = $scope. Todolist. Filter (function (item) {
Return the item. The done; // returning true means that the current data satisfies the condition and the event has completed
});
Return temp. Length;
}
}]);
}) (Windows)
Todolist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
< title > angularjs integrated bootstrap implementation task list < / Title >
<! -- introduce bootstrap -- >
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
max-width: 720px;
}
.done {
Color: #cca;
}
.checkbox {
margin-right: 12px;
margin-bottom: 0;
}
.done > .checkbox > label > span {
text-decoration: line-through;
}
</style>
<script src="node_modules/angular/angular.js"></script>
<script src="myjs/app.js"></script>
</head>
<body >
<div class="container" ng-app="todoapp">
<header>
<h1 class="display-3">TODO LIST</h1>
<hr></header>
<! -- content part -- >
<section ng-controller="maincontroller">
<! -- in order to achieve a good-looking interface, form control is used -- >
<form class="input-group input-group-lg">
<input type="text" class="form-control" ng-model="text" name="">
<span class="input-group-btn">
<button class="btn btn-secondary" ng-click="add()">Add</button>
</span>
</form>
<ul class="list-group" style="padding:12px;">
<li class="list-group-item" ng-class="{'done':item.done}" ng-repeat="item in todolist" >
<button type="button" class="close" aria-label="close" ng-click="delete(item)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="item.done">
<span>{{item.text }}</span>
</label>
</div>
</li>
</ul>
<p>
Total < strong > {{todolist. Length}} < / strong >
Tasks, completed < strong > {{donecount()}} < / strong >
individual
</p>
</section>
</div>
</body>
</html>
Page effects
Code detailed
The outermost layer of code in the code can be a good temporary space to prevent the pollution of the namespace.
(function (window) {
//To do something
}) (window)
Note that the rear (window) is not missing.
Create an application
Registering an Application Master module
var Todoapp = window.angular.module (' Todoapp ', []);
Creating a Controller
Todoapp.controller (' Maincontroller '
//Here's $scope also acts as a container, declaring the range of variables visible.
, [' $scope ', function ($scope) {
//$scope effect is to add the
numeric value in the element//text box to the view
$scope. Text = ';//will use two-way bound data types
//For easy page display, manually add a list
$scope. todolist = [{
text: ' Angularjs ',
done:false
},{
text: ' Bootstrap ',
done:false
}];
Perfecting function function
Add a function that responds to interaction
$scope. Add = Functions () {
var text = $scope. Text.trim ();
if (text) {
$scope. Todolist.push ({
text:text,
done:false
});
$scope. Text = ';
}
}
Click the response event for the Delete button
$scope. Delete = function (Todo) {
var index = $scope. Todolist.indexof (TODO)
$ Scope.todolist.splice (index,1)//To remove effect
}
//Get the number of completed events, according to the choice of checkbox or not
because the page is dynamically changing, so to use the function, Or simply use model bindings, but that would be a bit of a hassle
$scope. Donecount = function () {
//use filter to implement
var temp = $ Scope.todolist.filter (function (item) {
return item.done;//returns True to indicate that the current data satisfies the condition, the event has been completed
});
return temp.length;
}
Summarize
The code is not many, the thought is very deep.
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.
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
