Angularjs my study to organize (irregular modification)

Source: Internet
Author: User

  The last January days, learning Angularjs, but just just getting started. Learn basic grammar rules and simple applications. Think about it, study angularjs time about half a month, spend on Angularjs two or three hours each day.

In a short time to learn to start, but also want to do a simple summary of a phase. The next study should be advanced. Plan to prepare for the advanced Angularjs and Nodejs after the Nodejs entry.

What is Angularjs?

  AngularJS makes it easier to develop a modern single-page application (single-page application spas:single page Applications), which is a JavaScript framework There are version 1 and version 2. Now I'm studying the 1 version, and version 2 is completely different from the previous version, which can be tricky to learn.

  ANGULARJS extends HTML through instructions, and binds data to HTML through an expression. Summarize the most recently used directives and functions:

    • ng-directives extends the HTML
    • The ng-app directive defines an AngularJS application.
    • The ng-model directive binds the element value (such as the value of the input field) to the application.
    • The ng-bind directive binds application data to HTML views

  At that time just started to learn, and then made a small mistake, but enough to understand the importance of Ng-app:

<div ng-app= "" ng-init= "Firstname= ' Sliycat '" >

<p>hi<span ng-bind= "FirstName" ></span></p>

</div>

In the middle of the Ng-app, a space is struck so that the expression cannot be bound to the SPAN element. Because Ng-app is defining an application, if the content in the Ng-app is wrong, then the expression naturally cannot be bound.

What is an ANGULARJS expression?

Angularjs expression {{expression}}, similar to Ng-bind, which can contain literals, operators, and variables. For example {{5+5}}{{firstname}}. The above example can also be written as:

<div ng-app= "" ng-init= "Firstname= ' Sliycat '" >

<p>hi<span>{{FirstName}}</span></p>

</div>

AngularJS An expression VS JavaScript An expression

    1. Similar to JavaScript expressions, AngularJS expressions can contain letters, operators, variables
    2. The AngularJS expression can be written in HTML, but does not support conditional judgments, loops and exceptions, and supports filters.
Some about the ANGULARJS directive

One obvious feature of learning Angularjs is that there are more instructions. In the initial learning to learn some of the more common directives, is not particularly complete, if you want to view all the instructions, Baidu Resources recommended.

ng-init Directive

This directive is used to initialize the ANGULARJS application variable. Have a! The code in the figure initializes price and Num. The initialized object is a variable in the Ng-model.

      • for HTML5 the page can use Data-ng-bind the prefix data-ng-*** (H5 the prefix of the custom attribute is data- )
      • Ng-init for relatively simple programs, it is best to initialize them in the controller.
   ng-repeat Directive

  The instruction repeats an HTML element. It is very convenient to output in the list, and the instruction similar to it is ng-options. The functions of the two are similar. The following is the Ng-options directive.

Output arrays or objects are all possible. But the output of the object should pay attention to the wording, has been sloppy several times, that is, xxx.xxx remember that point. You can also use filters to sort the elements of the output.

AngularJS filters can be added to expressions and directives using a pipe character (|). AngularJS filters can be used to convert data

What is a pipe character??? I haven't found the exact answer to that.

  

   ng-model Directive
    • Provide type validation for application data (number, email, required)
    • Provide status for application data (invalid, dirty, touched, error)
    • Providing CSS classes for HTML elements
    • Binding HTML elements to HTML forms

In fact, the above list seems to be a bit difficult to understand, used to feel very useful. The most common place is input box.

  

    1. Values used to bind application data to the HTML controller (input, select, textarea)
    2. Can you provide status values for app data (invalid, dirty, touched, error)?
    3. Add/Remove the following classes based on the state of the form field: Ng-empty,ng-not-empty,ng-touched,ng-untouched,ng-valid,ng-invalid,ng-dirty,ng-pending,ng-pristine

According to my understanding, only to 2nd, 3rd I have not used for the time being. The 2nd is super useful, the implementation is very good, can verify the form information in time.

   ng-options Directive

  Use Ng-options to create a selection box, and the list items are output through objects and arrays.

<select ng-model= "Shop" ng-options= "x for X in shopping" ng-init= "shop= shopping[0]" ></select>

The ng-repeat instruction uses an array to iterate through the HTML code to create a drop-down list, but the ng-options directive is more suitable for creating a drop-down list. An object using the Ng-options option, and Ng-repeat is a string.

The Ng-repeat command can display the table perfectly. You can use this feature $index can display the ordinal number.

Creating custom Directives

This is used in the learning process is relatively small, may not be to the point of the advanced level. Feel that customizing this type of feature will be very popular. But I haven't used a lot of places for the time being.

The . Directive function to add

The Restrict value can be in the following ways:

E is used as the element name

A as a property use

C use as Class name

M use as a comment

The restrict default is the EA, which can invoke instructions by element name and property name.

AngularJS scope (SCOPE)

  Scope (scope) is the link between HTML (view) and JavaScript (Controller).

Scope is part of the model area.

Root scope: All applications have a $rootScope that can function in all of the HTML elements contained in the NG-APP directive. $rootScope can act on the entire application. is the bridge of scope in each controller. Values defined with Rootscope can be used in each controller.

AngularJS The controller controls the data of the AngularJS application, which is the JS object, created by the constructor of the standard JavaScript object

In large applications, the controller is usually stored in an external file. The meaning of this sentence is to introduce the external file ***.js, write the controller in the external file, and form the code separation.

AngularJS Services (Service)

In AngularJS, a service is a function or object that can be used in your AngularJS app.

In the Novice tutorial, the services mentioned are $location, $http, $interval.

It's fun to have a custom for everything. As a result, this also has custom services:

To create an access named Hexafy:

App.service (' Hexafy ', function () {

This.myfunc = function (x) {

return x.tostring (16);

}

});

After the creation of the call in the controller, when the call is not with the $ symbol, I think is the internal service is required to bring $, while the custom service is not with $.

App.controller (' Myctrl ', function ($scope, Hexafy) {

$scope. Hex = Hexafy.myfunc (255);

});

$scope. thetime = new Date (). tolocaletimestring ();

The statement means: Get a time

$http is a core service in AngularJS for reading data from a remote server

$http. Get (URL) is a function for reading server data

Read database

about reading the database this aspect, I may still be not skilled, may not have the opportunity to practise, I think should find some examples to practice the practice.

To read data from a database:

<script>

var app = Angular.module (' myApp ', []);

App.controller (' Customersctrl ', function ($scope, $http) {

$http. Get ("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php")

. Success (Function (response) {$scope. names = Response.records;});

});

</script>

The data read from the database is returned in JSON format. JSON has learned before, so I can understand some. After getting to the database, you can get the table using the Ng-repeat and ng-options directives.

AngularJS Module

in the module definition, the [] parameter is used to define the dependency of the module.

The brackets [] indicate that the module is not dependent, and if there is a dependency, it will be written in brackets depending on the name of the module. This knowledge point is used for subsequent animation modules as well as for ANGULARJS routing. function affects the global namespace, it is important to note that you should avoid using global functions in JavaScript. Because they are easily overwritten by other script files

AngularJS form

AngularJS form a collection of input controls

The input Select button TEXTAREA element is called an HTML control. There are currently four of them. I think the more common is the input and select the two.

In this aspect of the form, Angularjs has a strong verification, although simple, but this function is very good.

AngularJS Input Validation

      • $dirty form is filled with records
      • $valid the contents of the field are valid
      • $invalid field contents are illegal
      • $pristine the form does not fill in the record

  Verified code I am still very unskilled in this area and need more practice, because sometimes it is wrong.

Angularjs a few knowledge points

1)AngularJS HTML DOM

      1. The ng-disabled directive binds the application data directly to the disabled property of the HTML
      2. Ng-show instruction hides or displays an HTML element (true or FALSE)
      3. The ng-hide directive is used to hide or display HTML elements.

What I have in doubt is: what is the essence of ng-show and ng-hide hiding or showing??? What's the difference? So far I've found that the parameters are different, in the opposite direction. is not like the HTML attributes of those different???

2)AngularJS Global API

A collection of JavaScript functions used by the global API to perform common tasks, such as: Comparing objects, iterating over objects, transforming objects

Common API functions:

A) angular.lowercase ()

b) Angular.uppercase ()

c) angular.isstring ()

d) Angular.isnumber ()

3) the preferred style sheet for AngularJS is bootstrap

4) There is also a cross-domain problem. I'm afraid of the problem. In the study of Ajax when it is difficult to learn, maybe there is no practice it.

AngularJS Animation

just at the beginning of the time I think the animation as if the content of the site is very small, and then mistakenly thought that animation is not very important, want to skip directly, then 100 degrees, found that the animation is very important in angularjs, so still need to study hard.

Using animations requires the introduction of the Angular-animate.min.js Library. You also need to use the model in your app

Nganimate:<body ng-app= "Nganimate" >

The Nganimate model can be added or removed from the class. However, the HTML element is not animated, but Nganimate monitors the event, similar to hiding the HTML element, and if the event occurs Nganimate uses the predefined class to animate the HTML element.

  When using transition, it is a little long to forget its properties. This example says that a check button will hide the block if the button is clicked. Of course, if the CSS property is set differently, it will have a different animation effect. Can be defined directly inside the body ng-app= "nganimate", can also be defined in the script code, two can have.

Dependency Injection

AngularJS provides a good dependency injection mechanism. The following 5 core components are used as Dependency injection:

      • Value
      • Factory
      • Service
      • Provider
      • constant

Value is a simple JavaScript object that is used to pass a value to the controller (configuration phase); Factory is a function that returns a value. Created when the service and controller are needed. Usually we use the factory function to calculate or return a value; provider creates a service, factory, etc. (configuration phase), and provider provides a factory method get (), which is used to return value/service/ Factory;constant (constant) is used to pass values during the configuration phase, noting that this constant is not available in the configuration phase

One of the important features of dependency injection angularjs, Dependency injection simplifies the process of angular parsing module/component dependencies.

When learning to rely on injection, learning what is coupling, what is decoupling, how many URLs are collected, or quite helpful to understand. http://blog.csdn.net/jaytalent/article/details/50986402

AngularJS Routing

AngularJS routing allows us to access different content through different URLs.

The config function of the AngularJS module is used to configure routing rules. By using CONFIGAPI, we request that we inject $routeprovider into our configuration functions and use $ROUTEPROVIDER.WHENAPI to define our routing rules. $routeProvider give us the When (Path,object) & Otherwise (object) function defines all routes in order, the function contains two parameters: the first parameter is a URL or a URL regular rule, The second parameter is a routing configuration object.

When using routing, you need to introduce angular-route.js. This can be downloaded online. Before comparing the site of the tutorial, the east of his own writing always has a strange bug, and later looked for a long time, found that the version of the problem, fainted ... Routing in this respect, in addition to the website example, I have not yet found out where to use. Hope that the next study can go deep to understand some things.

Learn about the issues that need to be solved in February
    • Demo25 Angularjs's Routing knowledge points
    • Demo23 Angularjs Dependency Injection
    • The Transition property in CSS
    • Form validation requires more practice
    • How to have an initialization value for the code

<select ng-model= "Shop1" ng-options= "X.site for x in Saleshop" ng-init= "Shop1=saleshop[0].site" ></select>

<p> selected the {{shop1.site}}</p>

<p>url is:{{shop1.url}}</p>

<p> use objects as

data source, x is the key (key), Y is the value (value) </p>

<select ng-model= "Shop2" ng-options= "X for (x, y) in sites" ></select>

    • Database and cross-domain issues

Angularjs my study to organize (irregular modification)

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.