I haven't written anything for a long time, and I feel like I don't know where to start writing things. Now I'd better write something technical first. angularjs, my brother called it "my brother js"
1. Download
The code copy is as follows:
官方网址：https://angularjs.org/
CDN：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js
2. Brief introduction to using 1.ng-app
Determines the scope of angularjs, you can use it as follows
The code copy is as follows:
<html ng-app>
…
</html>
Let angularjs render the entire page, you can also use it
The code copy is as follows:
<div ng-app='myapp'>
...
</div>
to render a part of it.
2.ng-model
ng-model, when your data model is changed, for example ng-model='test', the value of this test is changed, the value of {{test}} will also change, that is, the test connected to ng-model will also change, as follows
The code copy 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 to register, create and index modules. For example, if we want to register this as a service, we need to use it when we refer to index a module. We also need to use it when we refer to the index.
The code copy is as follows:
angular.module(name, [requires], [configFn]);
#name The name of the search module created by type string
#requires A simple understanding is the usage module you need to include, such as the ngRoute routing module
#configFn The optional function module, the functions are similar to module.config
4.controller
controller is the method controller(name, constructor); where name is the name of controller, constructor is the controller constructor, we use a piece of code to illustrate
The code copy 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
value is also the method value(name, object); where name is the name of the service and object is the server instance object. At this time, we can modify the above code to be corrected like this
The code copy 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 the method factory(name, providerFunction);; where name is the name of the service, providerFunction is a function used to create a new server object. At this time, we can modify the above code to be corrected like this
The code copy 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
Provider is also the method provider in angular.Module provider(name, providerType); where name is the name of the service, and providerFunction is a function used to create a new server object. This is similar to factory. We are now rewriting it with provider.
The code copy 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
service is also the method service(name, constructor); where name is the name of the service, constructor is a constructor that will be instantiated. This is similar to factory. We are now rewriting it with service
The code copy 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); where name is the name of the constant, and object is the value of the constant, we can write it like this
The code copy 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>
That’s all today and continue to do it later.