AngularJS: the first basic AngularJS knowledge and the first angularjs

Source: Internet
Author: User

AngularJS: the first basic AngularJS knowledge and the first angularjs

AngularJS learns about commands, filters, and other related content.


AngularJS commands are extended HTML attributes with the prefix ng-

1. ng-app:

Defines the root element of AngularJS applications;
The ng-app command automatically directs (automatically initializes) the application when the webpage is loaded;

<div ng-app="Demo"></div>

2. ng-init:

Defines the initial values for AngularJS applications;
Generally, we use a controller or module to replace it;

<Div ng-app = "Demo" ng-init = "firstName = 'john'"> <p> my name is: {firstName }}</p> </div>

3. ng-model:

Bind HTML elements to Application Data
You can also:
Provide type verification (number, email, and required) for application data );
Provide status (invalid, dirty, touched, and error) for application data );
Provides CSS classes for HTML elements;
Binds HTML elements to HTML forms;

<Div ng-app = "Demo" ng-init = "firstName = 'john'"> <p> Name: <input type = "text" ng-model = "firstName"> </p> <p> my name is: {firstName }}</p> </div>

4. ng-repeat:Each item in the Set (in the array) is cloned with an HTML element.

<div ng-app="Demo" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"> <ul>   <li ng-repeat="x in names">    {{ + ', ' + }}   </li> </ul></div> 

5. ng-controller:Add controllers to applications. See the following example:

<Div ng-app = "Demo"> 

<Div ng-app = "Demo" ng-controller = "personCtrl"> name: <input type = "text" ng-model = "firstName"> <br> Name: <input type = "text" ng-model = "lastName"> <br> name: {fullName () }}</div> <script> var app = angular. module ('Demo', []); app. controller ('personctrl ', function ($ scope) {$ scope. firstName = "John"; $ scope. lastName = "Doe"; $ scope. fullName = function () {return $ scope. firstName + "" + $ scope. lastName ;}}); </script>

6. ng-options:Create a drop-down list with items output cyclically through objects and arrays.

<div ng-app="Demo" ng-controller="DemoCtrl"> <select ng-model="selectedName" ng-options="x for x in names"> </select></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.names = ["Google", "W3Cschool", "Taobao"];});</script>

7. ng-disabled:Command to directly bind application data to the disabled attribute of HTML.

<Div ng-app = "" ng-init = "mySwitch = true"> <button ng-disabled = "mySwitch"> click me! </Button> <input type = "checkbox" ng-model = "mySwitch"/> button {mySwitch }}</div>

8. ng-show:Command to hide or display an HTML element.

<Div ng-app = ""> <p ng-show = "true"> I am visible. </P> <p ng-show = "false"> I am invisible. </P> </div>

9. ng-click:The command defines an AngularJS click event.

<Div ng-app = "Demo" ng-controller = "myController"> <button ng-click = "count = count + 1"> click me! </Button> <p >{{ count }}</p> </div>

10. ng-include:Use the ng-include command to include HTML content.


Add a pipe character (|) to expressions and instructions
Common expressions:
Currency: format the number as a currency;
Filter: select a subset from the array;
Lowercase: The formatted string is lowercase;
OrderBy: sorts arrays based on an expression;
Uppercase: format the string in uppercase;

<Div ng-app = "Demo" ng-controller = "DemoCtrl"> <p> name: {lastName | uppercase }}</p> </div>
<div ng-app="Demo" ng-controller="DemoCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'">  {{ + ', ' + }} </li> </ul></div>


In AngularJS, a service is a function or object that can be used in your AngularJS application;
In AngularJS, you can create your own services or use built-in services;
AngularJS has over 30 built-in services;
Custom Service

app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});
var app = angular.module('Demo', []);app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl();}); 

Common built-in services

1. $ http: a core service in AngularJS. The Service sends a request to the server, and the application responds to the data transmitted by the server;

Var app = angular. module ('Demo', []); app. controller ('democtrl ', function ($ scope, $ http) {$ http ({url: 'Data. json', method: 'get', params: {'username': 'tan '}}). success (function (data, header, config, status) {// response successful }). error (function (data, header, config, status) {// failed to process response });});

2. $ location: the service corresponds to the window. location function.

3. $ timeout: The Service corresponds to the window. setTimeout function.

4. $ interval: The Service corresponds to the window. setInterval function.

5. $ rootScope: it can act on all HTML elements contained in the ng-app command. The value defined by rootscope can be used in each controller.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

Contact Us

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: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.