[AngularJS] ANGULARJS Series (1) Basic article

Source: Internet
Author: User
Tags button type


    • What is Angularjs?
    • Why use the/ng feature
    • Hello World
    • Built-in Directives
    • Built-in filters
    • Modular development

Starting with Angularjs a year ago (hereafter referred to as NG), Ng is now 2. Although the 2 is completely different, but the 1.x is still good enough.

What is Angularjs?

NG is a JS framework, and the latest version is 1.5.8.

Official website: https://angularjs.org/


Install-package Angularjs.core

NPM install [email protected]

Why use the/ng feature

Ng is a very rare two-way binding framework.


    1. Jvm
    2. Modular development
    3. Two-way binding
    4. Instruction System

Hello World

Building a 1 ng page is easy

<! DOCTYPE html>

This is almost the simplest Hello World page of Ng


Ng-app ng built-in directives that Mark Ng-managed areas

{{model}} is Ng's double-parenthesis interpolation syntax, where the values of model models are output

Ng-model ng built-in directives for binding specific models

Built-in Directives

In NG: ng-xxx for instructions in HTML

NG contains:

  • Ng-app

    • Specify NG Management Area
  • Ng-init

    • Initialization
  • Ng-model

    • Bidirectional data binding directives
  • Ng-bind

    • Bind data (the default is to escape HTML data)
  • Ng-cloak

    • Hidden before loading, loading the display (the NG module will move out of the feature after loading)
  • Ng-repeat

    • Loop traversal (with $id $index $first $last $middle $even Property with item in each element scope)
    • (Key,value) in the data track by $index
  • Ng-class

    • Ng-class= ' {red:true} ' set class based on object
  • Ng-show/ng-hide/ng-if

    • Whether to show/hide/exist (Ng-if can be restored by comment mark)
  • Ng-src/ng-href

    • An expression error that prevents the default request
  • Ng-switch

    • When a lot of judgment logic, reduce the use of ng-show, etc.
  • Ng-checked/ng-selected/ng-readonly/ng-disabled

    • Generally available Ng-model (above 4 instructions are not two-way binding, you can achieve the full selection of Tick box code)
  • Ng-change/ng-copy/ng-click/ng-dblclick/ng-focus/ng-blur/ng-submit

    • Ng Common Event directives

Built-in filters

In order to do some common operations on the data, NG defines some built-in filters

<! DOCTYPE html>

Ng-init Initialization of model data

{{model | currency}} Currency is a currency filter

    1. Currency (currency processing)

      {{num | currency: ' ¥ '}}

    2. Date (dates formatted)

      {{date | date: ' YYYY-MM-DD hh:mm:ss eeee '}}

    3. Filter (matched substring)

      {{Childrenarray | filter: {name: ' I '}}}//match the name attribute containing I

    4. JSON (format JSON object)

      {{jsontest | json}}

    5. LimitTo (Limit array length or string length)

      {{Childrenarray | limitto:2}}//will display the first two items in the array

    6. lowercase (lowercase)
    7. Uppercase (UPPERCASE)
    8. Number (formatted digit)
    9. Order BY (sort)

Modular development

In the actual development environment, it is not written as a single line of JS code in the above example.

In Ng, our code is generally developed under a module.

Way One:

<! DOCTYPE html>

Mode Two (you can also create multiple page modules at the same time):

<! DOCTYPE html>

Simply explain the above API

    • Angular.bootstrap ()

      • angular.bootstrap(dom,[‘myApp‘]) 手动加载模块myApp
    • Angular.module ()

      • angular.module(‘myApp‘,[])Create a module
      • angular.module(‘myApp)Get module
    • Module.run ()

      • module.run(function(){})Equivalent to the main method of the program
    • Module.controller ()

      • module.controller(‘HomeCtrl‘,function(){})Create a Controller
      • module.controller(‘HomeCtrl‘,[‘$scope‘,function(scope){}])Create a controller (recommended)

In Ng, it is recommended that the business logic be executed in the controller.

This address: http://www.cnblogs.com/neverc/p/5903257.html

[AngularJS] ANGULARJS Series (1) Basic article

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: info-contact@alibabacloud.com 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.