The angularjs framework is basically used in front-end projects. I didn’t know about this framework before, and it was because I took over recently, so I planned to learn it well. I used to be PC-side, but now I took over the mobile project. The mobile UI framework uses ionic + vordova, but does not use bootstrap. I mainly use ios + Android app interface. I don’t know much about the ionic framework and I need to spend time to get familiar with it. angularjs learning novices are welcome to correct me.
What is AngularJs?
Simply put, it is a framework of javascript that is added to a web page through script tags. That is, when we use angularjs, we need to introduce the following code.
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
It is usually recommended to place the script at the bottom of the <body> element, which is to improve the loading speed of the web page. Because html loading is not subject to script loading.
What is AngularJs?
AngularJS makes it easier to develop modern single page applications (SPAs: Single Page Applications).
•AngularJS binds application data to HTML elements.
•AngularJS can clone and repeat HTML elements.
•AngularJS can hide and display HTML elements.
•AngularJS can add code "behind" the HTML element.
•AngularJS supports input verification.
For example, mobile terminals basically use single page comparisons, which are done using angular routing conversion. Like our current project, we also use a single page. That is, in the main page, the jumped pages are all performed in the main page. The screenshot is as follows:
AngularJs expressions
AngularJS expression is written in double braces: {{ expression }}.
AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.
AngularJS will "output" data at the location where the expression is written.
AngularJS expressions are much like JavaScript expressions: they can contain literals, operators, and variables.
<!doctype html><!-- Tag angularjs to process the entire html page and boot the application --><html ng-app> <head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script></head><body><p>name:{{"ting"+"feng"}}</p><p>number:{{5+5}}</p><div ng-init="person={name:'tingfeng',age:'13'}"><p>name:{{person.name}}age:{{person.age}}</p></div></body></html>Application of AngularJs in html
Mainly extend html through ng-directive. The angularjs directive is an html attribute prefixed with ng, which contains four major features: mvc, modular, instruction system (directive), and databinding
ng-init: This directive initializes angularjs application variables. For example, the following columns:
<!doctype html><!-- Tag angularjs to process the entire html page and guide the application --><html ng-app> <head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script></head><body><div ng-init="name='tingfeng'"><p>name is:<span ng-bind="name"></span></p></div></body></html>
ng-app: This directive indicates that an angularjs application is defined. Usually placed behind html, you can also use ng-app directive locally. For example, <div ng-app>, the angularjs script will only run in the div, which means that from here, all content is angularjs for management.
ng-model: This directive refers to binding element values (such as the value of the input box) to the application.
ng-bind: This directive binds application data to the html view. Use the corresponding instructions to use angularjs to operate the html page. Let’s take a look at the code for how to use it.
At this time, use ng-model to bind to the setname model variable. When entering the value in the input box, the corresponding setname will also change. You can test it by yourself.
Explanation about $scope
What is $scope? What is its function? How to use it?
Simply put, scope is a pojo (plainoldjavascriptobject), similar to an object, with properties and methods, scope is a pojo (plainoldjavascriptobject), similar to an object, with properties and methods, scope provides watch(), watch() and apply() tool methods. angularjs' mvc is all done with the help of $scope.
Features: 1. It is the execution environment (or scope) of the expression
2. scope is a tree structure, parallel to the dom tag, containing a scope, which is a tree structure, parallel to the dom tag, containing a rootscope on it is at the top level.
3. Scope will inherit the parent scope will inherit the properties and methods of the parent rootscope.
4.$scope can propagate events, similar to dom, which can propagate up or down.
5.$scope is not only the basis of mvc, but also the basis for implementing two-way binding later.
Components of AngularJs
Template: that is, written html and css files, showing the application's view. angularjs can build its own html tags in html!
Controller: Unlike ajax, there is no need to write a listener or dom controller as it is already built into angularjs. Benefits: Easy to write, test, maintain and understand.
Model data: The model is extended from angularjs as the attributes of domain objects. The data of the model may be a js object, an array, or a primitive type, but they all belong to an angularjs scope object.
How to understand scope in angularjs?
That is, a scope can be regarded as a template, a bond that works together with the model and the controller. Angularjs uses the scope, and there are also information, data models and controllers in the template. These can help separate the model and view, but they are both synchronized! Any changes to the model will be reflected on the view immediately, and any changes to the view will be reflected in the model immediately.
View: In angularjs, a view is the mapping after the model is rendered through the html template. That is, no matter when the model changes, angularjs will update the junction points in real time and update the view.
It’s more intuitive to post codes!
<!doctype html><html ng-app="HelloAngular"> <head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script>//Modular var myModule = angular.module("HelloAngular", []); －Control template HelloAngularmyModule.controller("helloAngular", ['$scope',function HelloAngular($scope) {$scope.value = {name: 'jiangting'};}]); </script></head><body><!-- mvc-view angular--><div ng-controller="helloAngular"> －The controller is helloAngular<p>{{value.name}},hello!</p></div><!-- angular Modular--> </body></html>Let’s take a look at the application of controller, that is, controller, that is, the controller operates data, binds it and displays it on the html page.
AngularJS module (Module) defines AngularJS applications.
AngularJS controller (Controller) is used to control AngularJS applications.
The ng-app directive defines the application, and the ng-controller defines the controller. Let's use the above columns to view:
AngularJS module defines applications:
var myModule = angular.module("HelloAngular", []); －Control template HelloAngularangularjs controller control application:
myModule.controller("helloAngular", ['$scope',function HelloAngular($scope) {$scope.value = {name: 'jiangting'};}]);Understand front-end mvc
About controller features:
1. Don't try to take the controller, a controller is usually only responsible for a small view.
2. Don’t operate the dom directly in the controller, it’s not its responsibility
3. Do not do data filtering operations in controller, there is a filter service
4. Don't format data in the controller, ng has very useful form controls
5. The controller will not call each other. The interaction between controllers will be carried out through events. It will be through filter service. 4. Do not format data in the controller. There are very useful form controls. 5. The controller will not call each other. The interaction between controllers will be carried out through events. It will be carried out through scope.
Let’s see how to customize the command system, the code is as follows:
<!doctype html><html ng-app><head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script>//Instruction system var myModule = angular.module("MyModule", []);myModule.directive("hello", function() {return {restrict: 'E',template: '<div>Hi everyone!</div>', --Here we insert a html tag replace: true}});</script></head><body> <hello></hello></body></html>In directive, there are three parameters returned afterwards, where the template middle refers to the html tag inserted. Now I will write a piece of html code myself and see how to write it into angularjs.
The original static html code is as follows:
<ul><li><span>new1</span><p>just a test page1</p></li><li><span>new2</span><p>just a test page2</p></li> </ul>
The way to modify it to angularjs is as follows:
<!doctype html><html ng-app><head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script>//$scope is the scope of the controller. //angularjs scope: it can be regarded as a template. After the application is started, a root scope will be created, and the scope of the controller is a typical successor to the root scope. function newsCtrl($scope){$scope.news=[{"content":"new1","introduce":"just a test page1"},{"content":"new2","introduce":"just a test page2"}];$scope.phones={length:"4" // A single attribute cannot be added with a semicolon, multiple attributes are separated by commas};}</script></head><body ng-controller="newsCtrl"><ul><li ng-repeat="new in news">{{new.content}}<p>{{new.introduce}}</p></li></ul> </body></html>The above is the analysis of the basic features of AngularJs introduced to you by the editor (I). I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!