Related reading:
The ANGULARJS expression of the Angularjs introductory tutorial
ANGULARJS instructions for the ANGULARJS introductory tutorial
The ANGULARJS model (Ng-model) can bin
tests in angularjs to encourage developers to write more about them.When writing tests, ANGULARJS developers tend to use the syntax in the Jasmine behavior-driven Development (BBD) framework. Although ANGULARJS does not force you to use Jasmine, all of the tests we have in the tutorial are written using Jasmine. You c
in the tutorial were written using Jasmine. You can get relevant knowledge on Jasmine's official homepage or Jasmine wiki.
Angularjs based projects are preconfigured to run unit tests using Jstestdriver. You can run the test as follows:
On a separate terminal, go to the Angular-phonecat directory and run./scripts/test-server.sh to start the test (please enter it under Windows command line. \scripts\ Test
01-Basic AngularJS tutorial, 01-angularjs0. Directory
Directory
Preface
AngularJS
Series tutorial Directories
Learning Resources
Statement
1. Preface
AngularJS is designed to overcome the shortcomings of HTML in building applications. HTML is a well-designed declara
often written in an external file.Copy the code from the personcontroller.js external file:DivNg-app= "MYAPP"Ng-controller= "Personctrl">First Name:inputtype= "text"Ng-model= "FirstName">BR>Last Name:inputtype= "text"Ng-model= "LastName">BR>BR>Full Name: {{firstName + "" + LastName}}Div>Scriptsrc= "Personcontroller.js">Script>Run
Another exampleCreate a new controller file and name it namescontroller.js:function ($scope) { = [ {name:' Jani ', Country: ' Norway '}, {name:'
how they map to the model-view-Controller design pattern:Templates (Templates)Templates are files written in HTML and CSS that show the view of your app. You can add new elements and attribute tags to HTML as instructions for the Angularjs compiler. The ANGULARJS compiler is fully extensible, which means that you can build your own HTML markup in HTML with ANGULARJS
arrays:Divng-app=""Ng-controller="fightercontroller" >InputNg-model="search"/>Ul>Ling-repeat="f in fighters|filter:search" > {{f}}Li>ul> script> function Fightercontroller ' Ryu ', Country: ' Ken ', country: ' USA '}, {name: ' Chun Li ', country: ' GuiLe ', country: ' USA '}, {name: ' Zangief ', country: ' Russia '}]; } script>div> of course, the data will not be placed in a controller.We can $http request the data and bind it.The above example can be changed to:function fighterC
This tutorial aims to help you learn AngularJS as quickly and effectively as possible. Through this tutorial, you will learn some basic features of AngularJS, such as commands, expressions, filters, modules and controllers. And all other things you need to know about AngularJS
controller, which is the same as in the controller chapter.Application has a default property (variable):$scope. MyVar = false;Element ng-hide instruction sets the visibility by the value of the myval variable (TRUE or false).The function Toggle () is used to convert the value of the myVar variable to TRUE or FALSE.HTML elements are hidden (that is, invisible) when ng-hide= "true" .
displaying HTML elements The ng-show directive can also be used to display (or hide) portions of the appli
through value values.You can use any expression that can return True or FALSE, for example:ng-app= "">ng-show= "Hour > ">I am visible. P > Div >Run
In the following chapters there will be more examples of hiding HTML elements through the Click event of a button.
Ng-hide directiveWe can also hide or display an HTML element by Ng-hide instructions.DivNg-app="">PNg-hide= "true">I am not visible.P>PNg-hide= "false">I am visible.P>Div>RunPrevious chapter-
="/img/ Jia.gif "style=" margin:0px;padding:0px 5px 0px 0px;border:0px;vertical-align:middle; "/> View CodeHTTP operations: Support for AJAX operations, including $http.get (URL), $http. Post (URL, data), $http. Put (URL, data), $http. Delete (URL), $http. Head (URL).Custom directives: Many commands are built in, such as Ng-repeat, Ng-show, Ng-model, etc., and a short instruction can be used to implement a front-end component, such as 650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "styl
AngularJS Quick StartExample code:* Create an empty page* Expand to be the simplest Angularjs page* Modify Page Title* Join Ng's Library* Define the name of the project app,* Must be in accordance with the MVC model requirements, the establishment of a basic framework, respectively, the project needs to define the model, View, Control:Data module: dataservice.jsC
}}p> div>Run
Currency filter currency filters are used to format numbers as cash formats:DivNg-app=""Ng-controller= "Costctrl">inputtype= "Number"Ng-model= "Quantity">inputtype= "Number"Ng-model= "Price">P>Total = {{(quantity * price) | currency}}P>Div>Run
Add a filter to an instructionFilters can also be passed through the pipe character (' | ' ) is added to the directive. The order by filter is sorted by an array of expressions:DivNg-app=""Ng-controller= "Namesctrl">ul> Ling-r
This article mainly introduces AngularJS getting started tutorial (1): static templates. This is the second article in the series. This series will use a project to explain how to use AngularJS, for more information about how angularJS has enhanced the standard HTML, see create a static HTML page template and convert t
KnockoutJs quick start tutorial and knockoutjs quick start tutorial
I. Introduction
Previously, Bootstrap has been introduced in this series of articles. For details, refer to this article: Bootstrap getting started tutorial. Due to the recent project, the frontend is implem
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.