Home > Developer > JavaScript
Angularjs basic tutorial and angularjs tutorial
I haven't written anything for a long time. I don't know where to start writing anything. Now I should write something technical first, angularjs-my brother called it "brother-in-law js"
1. Download
Copy codeThe Code is as follows:
Official Website: https://angularjs.org/CDN：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js
2. Introduction 1. ng-app
The scope of angularjs is determined. You can use
Copy codeThe Code is as follows:
<Html ng-app>
...
</Html>
For angularjs to render the entire page, you can also use
Copy codeThe Code is as follows:
<div ng-app='myapp'>
……
</div>
To render some of them.
2. ng-model
Ng-model: when your data model is changed, for example, ng-model = 'test', where the value of test is changed, the value of {test} will also change, that is, the value of test connected to ng-model will also change, as shown below:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script src = "angular. min. js" type = "text/javascript"> </script>
<Title> learing argularjs -- widuu </title>
</Head>
<Body ng-app>
<Input ng-model = 'test' >{{ test }}
</Body>
</Html>
3. angular. module
This is mainly used for module registration, creation, and indexing. For example, if ng-app wants to register this as a service, it will be used when we reference an index module.
Copy codeThe Code is as follows:
Angular. module (name, [requires], [configFn]);
# Name of the search module created by string of name Type
# A simple understanding of requires is the modules you need to include, such as the ngRoute routing module
# Function modules that can be selected for configFn, which are similar to module. config
4. controller
The controller is the method controller (name, constructor) in angular. Module. The name is the name of the controller, and the constructor is the controller constructor. We use a piece of code to describe it.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script src = "angular. min. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var app = angular. module ('myapp', []);
App. controller ('mytest', function ($ scope ){
$ Scope. test = "hello word ";
});
</Script>
<Title> learing argularjs -- widuu </title>
</Head>
<Body ng-app = 'myapp' ng-controller = 'mytest'>
<Input ng-model = 'test' >{{ test }}
</Body>
</Html>
5. value
The value is also the method value (name, object) in angular. Module. The name is the service name, and the object is the server instance object. At this time, we can modify the above Code.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script src = "angular. min. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var app = angular. module ('myapp', [])
. Value ('testvalue', 'word ');
App. controller ('mytest', function ($ scope, testvalue ){
$ Scope. test = "hello" + testvalue;
});
</Script>
<Title> learing argularjs -- widuu </title>
</Head>
<Body ng-app = 'myapp' ng-controller = 'mytest'>
<Input ng-model = 'test' >{{ test }}
</Body>
</Html>
5. factory
Factory is also angular. the method factory (name, providerFunction) in the Module; where name is the name of the service, and providerFunction is the function used to create a new server object. At this time, we can modify the above Code to become like this.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script src = "angular. min. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var app = angular. module ('myapp', [])
. Value ('testvalue', 'widuu ')
. Factory ('testfactory ', function (testvalue ){
Return {
Lable: function (){
Return "this can output: hello" + testvalue;
}
}
});
App. controller ('mytest', function ($ scope, testvalue, testfactory ){
$ Scope. test = "hello" + testvalue;
$ Scope. output = testfactory. lable ();
});
</Script>
<Title> learing argularjs -- widuu </title>
</Head>
<Body ng-app = 'myapp' ng-controller = 'mytest'>
<Input ng-model = 'test' >{{ test }}
</P>
{Output }}
</Body>
</Html>
6. provider
The provider is also angular. the method provider (name, providerType) in the Module; name is the name of the service, and providerFunction is the function used to create a new server object. This is similar to the factory. We use provider to override it now.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script src = "angular. min. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var app = angular. module ('myapp', [])
. Value ('testvalue', 'widuu ')
. Provider ('testprovider ',
Function (){
This. lable = "this will output: hello widuu ";
This. $ get = function (){
Return this;
}
}
);
App. controller ('mytest', function ($ scope, testvalue, testprovider ){
$ Scope. test = "hello" + testvalue;
$ Scope. output = testprovider. lable;
});
</Script>
<Title> learing argularjs -- widuu </title>
</Head>
<Body ng-app = 'myapp' ng-controller = 'mytest'>
<Input ng-model = 'test' >{{ test }}
</P>
{Output }}
</Body>
</Html>
7. service
The service is also the method service (name, constructor) in angular. Module. The name is the name of the service, and the constructor is a constructor to be instantiated. This is similar to the factory. We use the service to rewrite it now.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script src = "angular. min. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var app = angular. module ('myapp', [])
. Value ('testvalue', 'widuu ')
. Service ('testservice ',
Function (testvalue ){
This. lable = function (){
Return "this will output: hello" + testvalue;
}
}
);
App. controller ('mytest', function ($ scope, testvalue, testservice ){
$ Scope. test = "hello" + testvalue;
$ Scope. output = testservice. lable ();
});
</Script>
<Title> learing argularjs -- widuu </title>
</Head>
<Body ng-app = 'myapp' ng-controller = 'mytest'>
<Input ng-model = 'test' >{{ test }}
</P>
{Output }}
</Body>
</Html>
8. constant
Constant is also the method constant (name, object) in angular. Module. name is the name of a constant, and object is the value of a constant. we can write it like this.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script src = "angular. min. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var app = angular. module ('myapp', [])
. Value ('testvalue', 'widuu ')
. Constant ('Count', 23)
. Service ('testservice ',
Function (testvalue, count ){
This. lable = function (){
Return "this will output: hello" + testvalue + ", age is" + count;
}
}
);
App. controller ('mytest', function ($ scope, testvalue, testservice ){
$ Scope. test = "hello" + testvalue;
$ Scope. output = testservice. lable ();
});
</Script>
<Title> learing argularjs -- widuu </title>
</Head>
<Body ng-app = 'myapp' ng-controller = 'mytest'>
<Input ng-model = 'test' >{{ test }}
</P>
{Output }}
</Body>
</Html>
Write it here today and continue later.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
