How to learn deeply in AngularJS? The latest introductory learning experience of angularjs

This article is all about angularjs ’s self-study experience. If you want to learn well, read more about other people’s learning results. Although it may not be suitable for you, if you read more, you will definitely find yourself. Let’s take a look at this article now

1: Getting Started with AngularJS

1、 Introduction to AngularJS ： AngularJS is a JavaScript framework .

The four core ideas of AngularJS: dependency injection, modularization, two-way binding, and semantic tags.

2、 Development tools and debugging tools : sublime/webstorm; Use browse device to debug.

3、 The first AngularJS web application ：

①Introduce the angular.js file ( js/angular.min.js ), use ng-app directive declares AngularJS management boundaries.

②AngularJS Simple use of two-way binding : double braces {{}}

③Commonly used commands: See the official API

④Declare in : Angular.module('app', [ ])

# ',function($scope){

##

app is the name of ng-app='app', [] is the name of ng-app='app', [] is the other previously defined by angularjs Module, myctrl is the name of ng-controller, {{msg}}

# 2: Advanced AngularJS

1, Design and construction of AngularJS front-end MVC : See ④The writing style is a simple MVC

##2, Binding instruction implements two-way data binding : ng-bind or {{ }} (Note: Understand the ng-clock command)

3, Usage of Controller : Define the controller; declare variables in the controller; use ng-bind to bind data and display the controller scope;

4. Use of variables and methods in $scope :

① Define the method on $scope and make binding calls on the page.

② Define variables on $scope and use them in methods: Pay attention to the way the $scope method is called.

3: AngularJS Advanced--Using Services and Instructions 1, Customize a Services service ：

① There are many forms of services in angularjs, learn to use Services in Controller;

##② In The expressions of services in AngularJS include: value, constant (constant), factory (equivalent to factory mode), services

2. Application of Services : How to use multiple Sharing data in each controller

##3, Use of common instructions :

##ng-bind data two-way binding (equivalent to {{ }});

ng-model binds the form in HTML Element to scope ; ng-show displays the specified HTML element when the expression is true, otherwise it hides the specified HTML element ;

ng-hide hides the specified HTML element when the expression is true,

ng-if adds it when the expression is true Remove the element and display it. If false, remove the element (removed from the DOM)

ng-submit Instruction is used to execute the specified function after the form is submitted ;

##ng-disabled The instruction sets the disabled attribute of the form input field (input, select, or textarea). If the expression returns true, the form field is disabled ;

ng-checkde directive is used to set the checkde attribute of a checkbox or radio button. If true is returned, it will be selected;

The ng-src directive overrides the src attribute of the element

ng-herf The directive overwrites the native element href attribute ;

ng- class is used to dynamically bind one or more CSS classes to HTML elements ;

ng-selected The directive is used to set the selected attribute of the element in the list. If the expression returns true, it will be selected ;

ng-change directive is used to tell AngularJS what to do when the value of an HTML element changes. needs to be used with the ng-model directive.

##ng-change The instruction will not overwrite the native onchange event. If this event is triggered, ng-change Both expressions and native onchange events are executed.

4、 Common instructions ng-repeat usage ： ##command Used to loop through HTML elements for a specified number of times ( The collection must be an array or object)

Special attributes ($index array subscript, $first (If it is the first one, it will return true), $last) usage

Four: AngularJS built-in service--Usage of $http

1, Use $http to query MySql data : First send a $http request, and return the mysql data to the front end through the back-end development language. 2. $http request with parameters to implement addition, deletion and modification of the database : Case

3. Example of user role permissions : Just practice

5: AngularJS Advanced--Using Directive

1, Use Directive to customize HTML component : The meaning and application of restrict (A: attribute, E: element, C: class name), the use of replace, the use of template

2, and more Use require to call each other between directives; learn about the usage of link

6: Mobile APP development with AngularJS

1. Mobile front-end Introduction to the framework lonic;

2. Introduction to Cordova: a front-end platform and a set of codes can be packaged with it to become the current Android and IOS platforms;

3. Find some cases on the Internet to practice;

This article ends here (if you want to see more, go to the PHP Chinese website AngularJS User Manual middle school), if you have any questions, you can leave a message below.