AngularJS-Quick Start

Always go to a wiki or encyclopedia to get a glimpse of it when you first touch.
They'll tell me about MVVM, two-way data binding, dependency injection, and so on, and I think these nouns are good grades, and then I'm probably not going to use this stuff.

What is Angularjs?

A client-side technology written entirely using JavaScript. Working with other historic web technologies (HTML, CSS, and JavaScript) makes Web application development easier and faster than ever.

Without considering those nouns, this article helps you quickly understand the basic usage of ANGULARJS.

Let's start with this paragraph:

<div ng-app="" data-ng-init="name=‘Kavlez‘">    <p>Name: <input type="text" ng-model="name"></p>    <p ng-bind="name"></p>    {{name}}    {{6+8}}</div>

• Ng-app: Defines a ANGULARJS application that is included in the app.
• Ng-init: Initializes application data.
• Ng-model: Binds data to the current app.
• Ng-bind: Displays the variables defined in the app in the label

Angularjs directives are either ng prefaced or can be used at the data-ng beginning. The expression for Angularjs is expressed in two curly braces:{{expression}}
This is the most basic function of ANGULARJS: data Binding .

We can bind and display the various types:

• Number

  <div ng-app="" ng-init="quantity=1;cost=5">    <p>Total : ￥{{ quantity * cost }}</p></div>

• String

  <div ng-app="" ng-init="firstName=‘Kavlez‘;lastName=‘Jin‘">    <p>The name is {{ firstName + " " + lastName }}</p></div>

• Object

  <div ng-app="" ng-init="person={firstName:‘Kavlez‘,lastName:‘Jin‘}">    <p>The name is {{ person.lastName }}</p></div>

• Array

  PS: Can be used ng-repeat to iterate

  <div ng-app="" ng-init="myArr=[0,2,4,6,8]">    <p ng-repeat="element in myArr">        {{ element }}    </p></div>

Controllers

We use a controller to control a ANGULARJS application.
By ng-controller defining a controller, declare that all the elements that it contains belong to it.

For example:

<div ng-app="" ng-controller="personController">    


Of course, we should use a more efficient organizational approach.
ANGULARJS supports the definition of controller in other JS files, such as the above example can be changed to:

<div ng-app="" ng-controller="personController">    

Module

So far, define a way to use the angular app ng-app="" .
Yes, but the variables and functions under this app are global and can cause controller pollution (pollute).
In general, we use the module to organize the app. We can ng-app="名称" angular.modele() declare a module by or.
The method has two parameters:

1. The name of the module
2. Dependency List

For example, the previous example could be changed to:

<div ng-app="myApp" ng-controller="fighterController">    <script>    var myApp = angular.module("myApp",[]);    myApp.controller("fighterController", function($scope) {        //..    }    </script></div>

If you put the app and controller into two files defined separately, then:

<div ng-app="myApp" ng-controller="fighterController">    <script src="myApp.js"></script>    <script src="myAppControllers.js"></script></div>

Myapp.js:

var myApp = angular.module("myApp",[]);

Myappcontrollers.js:

myApp.controller("fighterController", function($scope) {        //..}

Filter

This can be added to the expression, changing the output format of the expression.
We can use the following filters:

Filter	Description
Uppercase	Turn capital
lowercase	Turn lowercase
Currency	Turn currency format
By	Sort by specified attribute
Filter	Filter by the specified keyword

The first 3 can be used directly in an expression, such as:

{{name | uppercase}}{{name | lowercase}}{{total | currency}}

Filter and by-do are typically used for arrays:

<div ng-app="" ng-controller="fighterController">    <input ng-model="search"/>    <ul>        <li ng-repeat="f in fighters|filter:search">            {{ f }}        </li>    </ul>    <script>    function fighterController($scope) {        $scope.fighters = [        {name:‘Ryu‘,country:‘Japan‘},        {name:‘Ken‘,country:‘USA‘},        {name:‘Chun Li‘,country:‘China‘},        {name:‘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 fighterController($scope,$http) {    var url = ‘请求地址‘;    $http.get(url).success(function(response) {        $scope.fighters = response;    })}

AngularJS-Quick Start